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;
|
this._position = position;
|
||||||
}
|
}
|
||||||
|
|
||||||
public redraw(): void {
|
public readonly redraw = (): void => {
|
||||||
this.element.style.left = this._position.x + "px";
|
this.element.style.left = this._position.x + "px";
|
||||||
this.element.style.top = this._position.y + "px";
|
this.element.style.top = this._position.y + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
public setup(gameElement: HTMLElement): void {
|
public readonly setup = (gameElement: HTMLElement): void => {
|
||||||
gameElement.appendChild(this.element);
|
gameElement.appendChild(this.element);
|
||||||
}
|
}
|
||||||
|
|
||||||
public launch() {
|
public readonly launch = (): void => {
|
||||||
this.phi = choice(startAngles);
|
this.phi = choice(startAngles);
|
||||||
this.speed = defaultBallSpeed;
|
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._position = this._position.moveInDirection(this.phi, this.speed * delta / 1000);
|
||||||
this.redraw();
|
this.redraw();
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ export class Banner {
|
||||||
this.element.style.left = this.position.x + "px";
|
this.element.style.left = this.position.x + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
public load(): Promise<void> {
|
public readonly load = (): Promise<void> => {
|
||||||
return new Promise<void>((resolve, reject) => {
|
return new Promise<void>((resolve, reject) => {
|
||||||
const image = new Image();
|
const image = new Image();
|
||||||
image.onload = () => resolve();
|
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);
|
gameElement.appendChild(this.element);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,33 +23,32 @@ export class Game {
|
||||||
this.balls = [];
|
this.balls = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
public load(): Promise<void> {
|
public readonly load = (): Promise<void> =>
|
||||||
return Promise.all(this.banners.map(banner => banner.load())).then(() => {});
|
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.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));
|
this.balls.forEach(ball => ball.setup(this.root));
|
||||||
}
|
}
|
||||||
|
|
||||||
private ballLaunchHandler(ball: Ball): void {
|
private readonly ballLaunchHandler = (ball: Ball): void => {
|
||||||
this.balls.push(ball);
|
this.balls.push(ball);
|
||||||
ball.launch();
|
ball.launch();
|
||||||
}
|
}
|
||||||
|
|
||||||
public run(): void {
|
public readonly run = (): void => {
|
||||||
this.running = true;
|
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;
|
const delta = timestamp - this.lastTickTimestamp;
|
||||||
this.lastTickTimestamp = timestamp;
|
this.lastTickTimestamp = timestamp;
|
||||||
|
|
||||||
this.balls.forEach(ball => ball.tick.bind(ball)(delta));
|
this.balls.forEach(ball => ball.tick(delta));
|
||||||
if (this.running) {
|
if (this.running) {
|
||||||
requestAnimationFrame(this.tick.bind(this));
|
requestAnimationFrame(this.tick);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,7 +22,7 @@ export class Paddle {
|
||||||
this.redraw();
|
this.redraw();
|
||||||
}
|
}
|
||||||
|
|
||||||
private redraw() {
|
private readonly redraw = (): void => {
|
||||||
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";
|
||||||
|
|
||||||
|
@ -32,7 +32,7 @@ export class Paddle {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private mouseHandler(event: MouseEvent) {
|
private readonly mouseHandler = (event: MouseEvent): void => {
|
||||||
this.position =
|
this.position =
|
||||||
Math.min(fieldWidth - this.size / 2,
|
Math.min(fieldWidth - this.size / 2,
|
||||||
Math.max(this.size / 2, event.offsetX)
|
Math.max(this.size / 2, event.offsetX)
|
||||||
|
@ -41,11 +41,11 @@ export class Paddle {
|
||||||
this.redraw();
|
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.appendChild(this.element);
|
||||||
gameElement.addEventListener("mousemove", this.mouseHandler.bind(this));
|
gameElement.addEventListener("mousemove", this.mouseHandler);
|
||||||
gameElement.addEventListener("mouseenter", this.mouseHandler.bind(this));
|
gameElement.addEventListener("mouseenter", this.mouseHandler);
|
||||||
gameElement.addEventListener("mouseleave", this.mouseHandler.bind(this));
|
gameElement.addEventListener("mouseleave", this.mouseHandler);
|
||||||
|
|
||||||
gameElement.addEventListener("click", () => {
|
gameElement.addEventListener("click", () => {
|
||||||
if (this.ball) {
|
if (this.ball) {
|
||||||
|
|
|
@ -16,10 +16,9 @@ export class Position {
|
||||||
return this._y;
|
return this._y;
|
||||||
}
|
}
|
||||||
|
|
||||||
public moveInDirection(phi: number, distance: number): Position {
|
public readonly moveInDirection = (phi: number, distance: number): Position =>
|
||||||
return new Position(
|
new Position(
|
||||||
this._x + Math.cos(phi) * distance,
|
this._x + Math.cos(phi) * distance,
|
||||||
this._y - Math.sin(phi) * distance
|
this._y - Math.sin(phi) * distance
|
||||||
);
|
);
|
||||||
}
|
|
||||||
}
|
}
|
Loading…
Reference in a new issue