mirror of
https://github.com/sigmasternchen/88x31breakout
synced 2025-03-15 07:59:00 +00:00
refactor to using lambdas instead of binds
This commit is contained in:
parent
3c6e1aff5f
commit
687cb1b034
5 changed files with 24 additions and 26 deletions
|
@ -24,21 +24,21 @@ export class Ball {
|
|||
this._position = position;
|
||||
}
|
||||
|
||||
public redraw(): void {
|
||||
public readonly redraw = (): void => {
|
||||
this.element.style.left = this._position.x + "px";
|
||||
this.element.style.top = this._position.y + "px";
|
||||
}
|
||||
|
||||
public setup(gameElement: HTMLElement): void {
|
||||
public readonly setup = (gameElement: HTMLElement): void => {
|
||||
gameElement.appendChild(this.element);
|
||||
}
|
||||
|
||||
public launch() {
|
||||
public readonly launch = (): void => {
|
||||
this.phi = choice(startAngles);
|
||||
this.speed = defaultBallSpeed;
|
||||
}
|
||||
|
||||
public tick(delta: number) {
|
||||
public readonly tick = (delta: number): void => {
|
||||
this._position = this._position.moveInDirection(this.phi, this.speed * delta / 1000);
|
||||
this.redraw();
|
||||
}
|
||||
|
|
|
@ -18,7 +18,7 @@ export class Banner {
|
|||
this.element.style.left = this.position.x + "px";
|
||||
}
|
||||
|
||||
public load(): Promise<void> {
|
||||
public readonly load = (): Promise<void> => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
const image = new Image();
|
||||
image.onload = () => resolve();
|
||||
|
@ -28,7 +28,7 @@ export class Banner {
|
|||
})
|
||||
}
|
||||
|
||||
public setup(gameElement: HTMLElement): void {
|
||||
public readonly setup = (gameElement: HTMLElement): void => {
|
||||
gameElement.appendChild(this.element);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,33 +23,32 @@ export class Game {
|
|||
this.balls = [];
|
||||
}
|
||||
|
||||
public load(): Promise<void> {
|
||||
return Promise.all(this.banners.map(banner => banner.load())).then(() => {});
|
||||
}
|
||||
public readonly load = (): Promise<void> =>
|
||||
Promise.all(this.banners.map(banner => banner.load())).then(() => {});
|
||||
|
||||
public setup(): void {
|
||||
public readonly setup = (): void => {
|
||||
this.banners.forEach(banner => banner.setup(this.root));
|
||||
this.paddle.setup(this.root, this.ballLaunchHandler.bind(this));
|
||||
this.paddle.setup(this.root, this.ballLaunchHandler);
|
||||
this.balls.forEach(ball => ball.setup(this.root));
|
||||
}
|
||||
|
||||
private ballLaunchHandler(ball: Ball): void {
|
||||
private readonly ballLaunchHandler = (ball: Ball): void => {
|
||||
this.balls.push(ball);
|
||||
ball.launch();
|
||||
}
|
||||
|
||||
public run(): void {
|
||||
public readonly run = (): void => {
|
||||
this.running = true;
|
||||
requestAnimationFrame(this.tick.bind(this))
|
||||
requestAnimationFrame(this.tick)
|
||||
}
|
||||
|
||||
private tick(timestamp: number): void {
|
||||
private readonly tick = (timestamp: number): void => {
|
||||
const delta = timestamp - this.lastTickTimestamp;
|
||||
this.lastTickTimestamp = timestamp;
|
||||
|
||||
this.balls.forEach(ball => ball.tick.bind(ball)(delta));
|
||||
this.balls.forEach(ball => ball.tick(delta));
|
||||
if (this.running) {
|
||||
requestAnimationFrame(this.tick.bind(this));
|
||||
requestAnimationFrame(this.tick);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -22,7 +22,7 @@ export class Paddle {
|
|||
this.redraw();
|
||||
}
|
||||
|
||||
private redraw() {
|
||||
private readonly redraw = (): void => {
|
||||
this.element.style.left = this.position + "px";
|
||||
this.element.style.width = this.size + "px";
|
||||
|
||||
|
@ -32,7 +32,7 @@ export class Paddle {
|
|||
}
|
||||
}
|
||||
|
||||
private mouseHandler(event: MouseEvent) {
|
||||
private readonly mouseHandler = (event: MouseEvent): void => {
|
||||
this.position =
|
||||
Math.min(fieldWidth - this.size / 2,
|
||||
Math.max(this.size / 2, event.offsetX)
|
||||
|
@ -41,11 +41,11 @@ export class Paddle {
|
|||
this.redraw();
|
||||
}
|
||||
|
||||
public setup(gameElement: HTMLElement, ballLaunchHandler: (ball: Ball) => void): void {
|
||||
public readonly setup = (gameElement: HTMLElement, ballLaunchHandler: (ball: Ball) => void): 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));
|
||||
gameElement.addEventListener("mousemove", this.mouseHandler);
|
||||
gameElement.addEventListener("mouseenter", this.mouseHandler);
|
||||
gameElement.addEventListener("mouseleave", this.mouseHandler);
|
||||
|
||||
gameElement.addEventListener("click", () => {
|
||||
if (this.ball) {
|
||||
|
|
|
@ -16,10 +16,9 @@ export class Position {
|
|||
return this._y;
|
||||
}
|
||||
|
||||
public moveInDirection(phi: number, distance: number): Position {
|
||||
return new Position(
|
||||
public readonly moveInDirection = (phi: number, distance: number): Position =>
|
||||
new Position(
|
||||
this._x + Math.cos(phi) * distance,
|
||||
this._y - Math.sin(phi) * distance
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue