From a43a70f523a1c930eeb6fb4615c79e7bafd7f7bc Mon Sep 17 00:00:00 2001
From: sigmasternchen <git@sigma-star.io>
Date: Fri, 1 Nov 2024 19:56:23 +0100
Subject: [PATCH] feat: Banners now have collisions
---
src/game/Ball.ts | 1 -
src/game/Banner.ts | 31 +++++++++++++++++++++++++++++++
src/game/Game.ts | 5 +++++
3 files changed, 36 insertions(+), 1 deletion(-)
diff --git a/src/game/Ball.ts b/src/game/Ball.ts
index 28aac51..38aeef2 100644
--- a/src/game/Ball.ts
+++ b/src/game/Ball.ts
@@ -26,7 +26,6 @@ export class Ball {
}
public readonly redraw = (): void => {
- console.log(this.phi / Math.PI, this.position.x, this.position.y);
this.element.style.left = this.position.x + "px";
this.element.style.top = this.position.y + "px";
}
diff --git a/src/game/Banner.ts b/src/game/Banner.ts
index 657b4f7..ef80587 100644
--- a/src/game/Banner.ts
+++ b/src/game/Banner.ts
@@ -2,6 +2,8 @@
import banners from 'banners';
import {toShuffled} from "../utils";
import {Position} from "./Position";
+import {Ball} from "./Ball";
+import {ballSize} from "./geometry";
export class Banner {
private readonly position: Position;
@@ -31,6 +33,35 @@ export class Banner {
public readonly setup = (gameElement: HTMLElement): void => {
gameElement.appendChild(this.element);
}
+
+ public readonly remove = (gameElement: HTMLElement): void => {
+ gameElement.removeChild(this.element);
+ }
+
+ public readonly handleCollisions = (ball: Ball): boolean => {
+ if (
+ ball.position.x + ballSize / 2 > this.position.x &&
+ ball.position.x - ballSize / 2 < this.position.x + 88 &&
+ ball.position.y + ballSize / 2 > this.position.y &&
+ ball.position.y - ballSize / 2 < this.position.y + 31
+ ) {
+ const distancesWithAngles = [
+ { distance: Math.abs(ball.position.x - this.position.x), phi: Math.PI / 2 }, // left
+ { distance: Math.abs(ball.position.x - this.position.x + 88), phi: Math.PI /2 }, // right
+ { distance: Math.abs(ball.position.y - this.position.y), phi: 0 }, // top
+ { distance: Math.abs(ball.position.y - this.position.y + 31), phi: 0 }, // bottom
+ ];
+ console.log(distancesWithAngles);
+
+ const closestAngle = distancesWithAngles.sort((a, b) => a.distance - b.distance)[0];
+
+ ball.collision(closestAngle.phi);
+
+ return true;
+ } else {
+ return false;
+ }
+ }
}
export const makeBanners = (numberOfBanners: number, positioning: (i: number) => Position) =>
diff --git a/src/game/Game.ts b/src/game/Game.ts
index 81971b2..4234a06 100644
--- a/src/game/Game.ts
+++ b/src/game/Game.ts
@@ -59,6 +59,11 @@ export class Game {
private readonly handleCollisions = (ball: Ball): void => {
this.handleEdgeCollisions(ball);
this.paddle.handleCollisions(ball);
+
+ const toDelete = this.banners.filter(banner => banner.handleCollisions(ball));
+ toDelete.forEach(banner => banner.remove(this.root));
+
+ this.banners = this.banners.filter(banner => !toDelete.includes(banner));
}
private readonly handleEdgeCollisions = (ball: Ball): void => {