Make game horizontal (#274)

* move_left -> move_top * move_right -> move_down * collide_with_side -> collide_with_top_bottom * bounce_off_side -> bounce_off_top_bottom * ArrowRight -> ArrowDown * ArrowLeft -> ArrowUp * Remove practice mode * Switch x and y * Format
usatie · Feb 21, 2024 · 70ac8a9 · 70ac8a9
1 parent 1a0e31c
commit 70ac8a9
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 81 deletions.
diff --git a/frontend/app/pong/[id]/Ball.ts b/frontend/app/pong/[id]/Ball.ts
@@ -76,8 +76,8 @@ export class Ball {
     let speed = this.speed();
     speed = clamp(
       speed * this.generate_random_scale(),
-      this.canvasHeight / 100,
-      this.canvasHeight / 10,
+      this.canvasWidth / 100,
+      this.canvasWidth / 10,
     );
     this.vx = speed * Math.cos(radian);
     this.vy = speed * Math.sin(radian);
@@ -91,22 +91,22 @@ export class Ball {
   };
 
   bounce_off_paddle = (paddle: Paddle) => {
-    this.y = clamp(
-      this.y,
-      paddle.height,
-      this.canvasHeight - paddle.height - this.radius * 2,
+    this.x = clamp(
+      this.x,
+      paddle.width,
+      this.canvasWidth - paddle.width - this.radius * 2,
     );
-    this.vy = -this.vy;
+    this.vx = -this.vx;
     // this.fluctuate_velocity_vector();
   };
 
-  collide_with_side = () => {
-    return this.x < 0 || this.x + this.radius * 2 > this.canvasWidth;
+  collide_with_top_bottom = () => {
+    return this.y < 0 || this.y + this.radius * 2 > this.canvasHeight;
   };
 
-  bounce_off_side = () => {
-    this.x = clamp(this.x, 0, this.canvasWidth - this.radius * 2);
-    this.vx = -this.vx;
+  bounce_off_top_bottom = () => {
+    this.y = clamp(this.y, 0, this.canvasHeight - this.radius * 2);
+    this.vy = -this.vy;
   };
 
   move = (elapsed: number) => {

diff --git a/frontend/app/pong/[id]/Paddle.ts b/frontend/app/pong/[id]/Paddle.ts
@@ -1,6 +1,6 @@
 import { clamp } from "@/lib/utils";
 import { Ball } from "./Ball";
-import { CANVAS_WIDTH } from "./const";
+import { CANVAS_HEIGHT } from "./const";
 
 export class Paddle {
   x: number;
@@ -33,25 +33,26 @@ export class Paddle {
     ctx.fillRect(this.x, this.y, this.width, this.height);
   };
 
-  move_left = () => {
-    this.x -= (CANVAS_WIDTH / 100) * 3;
-    this.x = Math.round(this.x);
-    this.x = clamp(this.x, 0, CANVAS_WIDTH - this.width);
+  move_top = () => {
+    this.y -= (CANVAS_HEIGHT / 100) * 3;
+    this.y = Math.round(this.y);
+    this.y = clamp(this.y, 0, CANVAS_HEIGHT - this.height);
   };
 
-  move_right = () => {
-    this.x += (CANVAS_WIDTH / 100) * 3;
-    this.x = Math.round(this.x);
-    this.x = clamp(this.x, 0, CANVAS_WIDTH - this.width);
+  move_down = () => {
+    this.y += (CANVAS_HEIGHT / 100) * 3;
+    this.y = Math.round(this.y);
+    this.y = clamp(this.y, 0, CANVAS_HEIGHT - this.height);
   };
 
   collide_with = (ball: Ball) => {
-    // Ball is in the same x-axis
-    if (ball.x >= this.x && ball.x + ball.radius * 2 <= this.x + this.width) {
+    // Ball is in the same y-axis
+    if (ball.y >= this.y && ball.y + ball.radius * 2 <= this.y + this.height) {
       // Ball is actually colliding with paddle
+      const isLeftPaddle = this.x == 0;
       if (
-        (ball.y <= this.height && this.y == 0) ||
-        (ball.y + ball.radius * 2 >= this.y && this.y != 0)
+        (ball.x <= this.width && isLeftPaddle) ||
+        (ball.x + ball.radius * 2 >= this.x && !isLeftPaddle)
       ) {
         return true;
       }

diff --git a/frontend/app/pong/[id]/PongBoard.tsx b/frontend/app/pong/[id]/PongBoard.tsx
@@ -180,14 +180,14 @@ function PongBoard({ id }: PongBoardProps) {
     const game = getGame();
 
     const handleKeyUp = (event: KeyboardEvent) => {
-      if (event.key == "ArrowRight" || event.key == "ArrowLeft") {
+      if (event.key == "ArrowDown" || event.key == "ArrowUp") {
         game.setMovingDirection("none");
       }
     };
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key == "ArrowRight") {
+      if (event.key == "ArrowDown") {
         game.setMovingDirection("right");
-      } else if (event.key == "ArrowLeft") {
+      } else if (event.key == "ArrowUp") {
         game.setMovingDirection("left");
       }
     };
@@ -317,18 +317,6 @@ function PongBoard({ id }: PongBoardProps) {
           <Button onClick={start} disabled={startDisabled}>
             Start
           </Button>
-          <Button
-            onClick={() => gameRef.current?.switch_battle_mode()}
-            disabled={battleDisabled}
-          >
-            Battle
-          </Button>
-          <Button
-            onClick={() => gameRef.current?.switch_practice_mode()}
-            disabled={practiceDisabled}
-          >
-            Practice
-          </Button>
         </div>
         <PongInformationBoard
           fps={fps}

diff --git a/frontend/app/pong/[id]/PongGame.ts b/frontend/app/pong/[id]/PongGame.ts
@@ -118,14 +118,14 @@ export class PongGame {
         this.ball.bounce_off_paddle(this.player1);
         this.onAction && this.onAction("bounce");
       }
-    } else if (this.ball.y + this.ball.radius * 2 >= CANVAS_HEIGHT) {
+    } else if (this.ball.x <= 0) {
       if (this.userMode === "player") {
         this.ball.reset();
         this.score.player2++;
         this.onAction && this.onAction("collide");
       }
-    } else if (this.ball.collide_with_side()) {
-      this.ball.bounce_off_side();
+    } else if (this.ball.collide_with_top_bottom()) {
+      this.ball.bounce_off_top_bottom();
     }
     this.ball.draw(this.ctx);
     this.player1.draw(this.ctx);
@@ -152,12 +152,12 @@ export class PongGame {
     if (this.userMode === "player") {
       if (this.movingDirection === "left") {
         this.player1.clear(this.ctx);
-        this.player1.move_left();
+        this.player1.move_top();
         this.player1.draw(this.ctx);
         this.onAction && this.onAction("left");
       } else if (this.movingDirection === "right") {
         this.player1.clear(this.ctx);
-        this.player1.move_right();
+        this.player1.move_down();
         this.player1.draw(this.ctx);
         this.onAction && this.onAction("right");
       }
@@ -196,32 +196,6 @@ export class PongGame {
     this.is_playing = false;
   };
 
-  switch_battle_mode = () => {
-    // Make the left player a paddle
-    this.player2.clear(this.ctx);
-    this.player2 = new Paddle(
-      CANVAS_WIDTH / 2 - PADDLE_WIDTH / 2,
-      0,
-      PADDLE_WIDTH,
-      PADDLE_HEIGHT,
-      this.paddleColor,
-    );
-    this.player2.draw(this.ctx);
-  };
-
-  switch_practice_mode = () => {
-    // Make the left player a wall
-    this.player2.clear(this.ctx);
-    this.player2 = new Paddle(
-      0,
-      0,
-      CANVAS_WIDTH,
-      PADDLE_HEIGHT,
-      this.paddleColor,
-    );
-    this.player2.draw(this.ctx);
-  };
-
   resetPlayerPosition = () => {
     this.player1 = this.initPlayer1();
     this.player2 = this.initPlayer2();
@@ -230,17 +204,17 @@ export class PongGame {
 
   initPlayer1 = () =>
     new Paddle(
-      CANVAS_WIDTH / 2 - PADDLE_WIDTH / 2,
-      CANVAS_HEIGHT - PADDLE_HEIGHT,
+      0,
+      CANVAS_HEIGHT / 2 - PADDLE_HEIGHT / 2,
       PADDLE_WIDTH,
       PADDLE_HEIGHT,
       this.paddleColor,
     );
 
   initPlayer2 = () =>
     new Paddle(
-      CANVAS_WIDTH / 2 - PADDLE_WIDTH / 2,
-      0,
+      CANVAS_WIDTH - PADDLE_WIDTH,
+      CANVAS_HEIGHT / 2 - PADDLE_HEIGHT / 2,
       PADDLE_WIDTH,
       PADDLE_HEIGHT,
       this.paddleColor,
@@ -256,25 +230,25 @@ export class PongGame {
 
   movePlayer1Left = () => {
     this.player1.clear(this.ctx);
-    this.player1.move_left();
+    this.player1.move_top();
     this.player1.draw(this.ctx);
   };
 
   movePlayer1Right = () => {
     this.player1.clear(this.ctx);
-    this.player1.move_right();
+    this.player1.move_down();
     this.player1.draw(this.ctx);
   };
 
   movePlayer2Left = () => {
     this.player2.clear(this.ctx);
-    this.player2.move_left();
+    this.player2.move_top();
     this.player2.draw(this.ctx);
   };
 
   movePlayer2Right = () => {
     this.player2.clear(this.ctx);
-    this.player2.move_right();
+    this.player2.move_down();
     this.player2.draw(this.ctx);
   };
 

diff --git a/frontend/app/pong/[id]/const.ts b/frontend/app/pong/[id]/const.ts
@@ -1,7 +1,7 @@
 export const CANVAS_WIDTH = 500;
 export const CANVAS_HEIGHT = 1000;
-export const PADDLE_WIDTH = Math.round(CANVAS_WIDTH / 4 / 4) * 4;
-export const PADDLE_HEIGHT = Math.round(CANVAS_HEIGHT / 64);
+export const PADDLE_WIDTH = Math.round(CANVAS_HEIGHT / 64);
+export const PADDLE_HEIGHT = Math.round(CANVAS_WIDTH / 4 / 4) * 4;
 export const BALL_RADIUS = Math.round(CANVAS_WIDTH / 64);
 export const INITIAL_BALL_SPEED = CANVAS_HEIGHT / 128;
 export const TARGET_FPS = 60;