mirror of
https://github.com/sigmasternchen/88x31breakout
synced 2025-03-15 07:59:00 +00:00
the paddle can move now
This commit is contained in:
parent
ab26ce4074
commit
0673f90454
3 changed files with 23 additions and 1 deletions
|
@ -9,6 +9,7 @@
|
||||||
.banner {
|
.banner {
|
||||||
margin: 1px;
|
margin: 1px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paddle {
|
.paddle {
|
||||||
|
@ -19,4 +20,5 @@
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
border-top-left-radius: 50%;
|
border-top-left-radius: 50%;
|
||||||
border-top-right-radius: 50%;
|
border-top-right-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
|
@ -1,3 +1,4 @@
|
||||||
|
import {fieldWidth} from "./geometry";
|
||||||
|
|
||||||
export class Paddle {
|
export class Paddle {
|
||||||
private position: number;
|
private position: number;
|
||||||
|
@ -5,16 +6,33 @@ export class Paddle {
|
||||||
private readonly element: HTMLElement;
|
private readonly element: HTMLElement;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.position = ((88 + 1) * 11 + 1) / 2;
|
this.position = fieldWidth / 2;
|
||||||
this.size = 60;
|
this.size = 60;
|
||||||
|
|
||||||
this.element = document.createElement("div");
|
this.element = document.createElement("div");
|
||||||
this.element.classList.add("paddle");
|
this.element.classList.add("paddle");
|
||||||
|
|
||||||
|
this.redraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
private redraw() {
|
||||||
this.element.style.left = this.position + "px";
|
this.element.style.left = this.position + "px";
|
||||||
this.element.style.width = this.size + "px";
|
this.element.style.width = this.size + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private mouseHandler(event: MouseEvent) {
|
||||||
|
this.position =
|
||||||
|
Math.min(fieldWidth - this.size / 2,
|
||||||
|
Math.max(this.size / 2, event.offsetX)
|
||||||
|
);
|
||||||
|
|
||||||
|
this.redraw();
|
||||||
|
}
|
||||||
|
|
||||||
public setup(gameElement: HTMLElement): void {
|
public setup(gameElement: HTMLElement): void {
|
||||||
gameElement.appendChild(this.element);
|
gameElement.appendChild(this.element);
|
||||||
|
gameElement.addEventListener("mousemove", this.mouseHandler.bind(this));
|
||||||
|
gameElement.addEventListener("mouseenter", this.mouseHandler.bind(this));
|
||||||
|
gameElement.addEventListener("mouseleave", this.mouseHandler.bind(this));
|
||||||
}
|
}
|
||||||
}
|
}
|
2
src/game/geometry.ts
Normal file
2
src/game/geometry.ts
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
|
||||||
|
export const fieldWidth = (88 + 1) * 11 + 1;
|
Loading…
Reference in a new issue