the paddle can move now

This commit is contained in:
sigmasternchen 2024-10-29 22:08:24 +01:00
parent ab26ce4074
commit 0673f90454
3 changed files with 23 additions and 1 deletions

View file

@ -9,6 +9,7 @@
.banner {
margin: 1px;
position: absolute;
pointer-events: none;
}
.paddle {
@ -19,4 +20,5 @@
background-color: #333;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
pointer-events: none;
}

View file

@ -1,3 +1,4 @@
import {fieldWidth} from "./geometry";
export class Paddle {
private position: number;
@ -5,16 +6,33 @@ export class Paddle {
private readonly element: HTMLElement;
constructor() {
this.position = ((88 + 1) * 11 + 1) / 2;
this.position = fieldWidth / 2;
this.size = 60;
this.element = document.createElement("div");
this.element.classList.add("paddle");
this.redraw();
}
private redraw() {
this.element.style.left = this.position + "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 {
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
View file

@ -0,0 +1,2 @@
export const fieldWidth = (88 + 1) * 11 + 1;