Start to separate game logic to classes

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package.json

@@ -1,6 +1,18 @@
 {
-  "name": "typescript",
+  "name": "2d-breakout-game",
   "version": "0.0.0",
   "private": true,
-  "dependencies": {}
-}
+  "dependencies": {},
+  "devDependencies": {
+    "clean-webpack-plugin": "^3.0.0",
+    "html-webpack-plugin": "^4.4.1",
+    "ts-loader": "^8.0.3",
+    "typescript": "^4.0.2",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "scripts": {
+    "start": "webpack-dev-server"
+  }
+}

index.ts → src/game/Game.ts

@@ -1,30 +1,60 @@
-var canvas = document.getElementById("myCanvas");
-var ctx = canvas.getContext("2d");
-var ballRadius = 10;
-var x = canvas.width / 2;
-var y = canvas.height - 30;
+import { Ball } from './components/Ball';
+import { Brick } from './components/Brick';
+import { Paddle } from './components/Paddle';
+
+// class Game {
+//   constructor() {}
+// }
+
+
+const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
+const ctx = canvas.getContext("2d");
+
+
+const ball = new Ball({
+  ctx: ctx,
+  x: canvas.width / 2,
+  y: canvas.height - 30,
+  color: '#ff95DD',
+  radius: 10
+})
+
+const paddle = new Paddle({
+  ctx: ctx,
+  x: (canvas.width - 75) / 2,
+  y: canvas.height - 10,
+  height: 10,
+  width: 75
+});
+
+
 var dx = 2;
 var dy = -2;
-var paddleHeight = 10;
-var paddleWidth = 75;
-var paddleX = (canvas.width - paddleWidth) / 2;
 var rightPressed = false;
 var leftPressed = false;
 var brickRowCount = 3;
 var brickColumnCount = 5;
 var brickWidth = 75;
 var brickHeight = 20;
-var brickPadding = 10;
-var brickOffsetTop = 30;
-var brickOffsetLeft = 30;
 var score = 0;
 var lives = 3;
 
 var bricks = [];
 for (var c = 0; c < brickColumnCount; c++) {
   bricks[c] = [];
   for (var r = 0; r < brickRowCount; r++) {
-    bricks[c][r] = { x: 0, y: 0, status: 1 };
+    bricks[c][r] = new Brick({
+      x: 0,
+      y: 0,
+      column: c,
+      row: r,
+      ctx: ctx,
+      width: 75,
+      height: 30,
+      padding: 10,
+      offsetLeft: 30,
+      offsetTop: 30
+    });
   }
 }
 
@@ -35,7 +65,7 @@ document.addEventListener("mousemove", mouseMoveHandler, false);
 function mouseMoveHandler(e) {
   var relativeX = e.clientX - canvas.offsetLeft;
   if (relativeX > 0 && relativeX < canvas.width) {
-    paddleX = relativeX - paddleWidth / 2;
+    paddle.x = relativeX - paddle.width / 2;
   }
 }
 
@@ -54,16 +84,17 @@ function keyUpHandler(e) {
     leftPressed = false;
   }
 }
+
 function collisionDetection() {
   for (var c = 0; c < brickColumnCount; c++) {
     for (var r = 0; r < brickRowCount; r++) {
       var b = bricks[c][r];
       if (b.status == 1) {
         if (
-          x > b.x &&
-          x < b.x + brickWidth &&
-          y > b.y &&
-          y < b.y + brickHeight
+          ball.x > b.x &&
+          ball.x < b.x + brickWidth &&
+          ball.y > b.y &&
+          ball.y < b.y + brickHeight
         ) {
           dy = -dy;
           b.status = 0;
@@ -88,55 +119,32 @@ function drawLives() {
   ctx.fillStyle = "#0095DD";
   ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
 }
-function drawBall() {
-  ctx.beginPath();
-  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-}
-function drawPaddle() {
-  ctx.beginPath();
-  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-}
 function drawBricks() {
   for (var c = 0; c < brickColumnCount; c++) {
     for (var r = 0; r < brickRowCount; r++) {
-      if (bricks[c][r].status == 1) {
-        var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
-        var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
-        bricks[c][r].x = brickX;
-        bricks[c][r].y = brickY;
-        ctx.beginPath();
-        ctx.rect(brickX, brickY, brickWidth, brickHeight);
-        ctx.fillStyle = "#0095DD";
-        ctx.fill();
-        ctx.closePath();
-      }
+      bricks[c][r].draw();
     }
   }
 }
 
 function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   drawBricks();
-  drawBall();
-  drawPaddle();
+  ball.draw();
+  paddle.draw();
   collisionDetection();
   drawScore();
   drawLives();
 
-  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
+  if (ball.x + dx > canvas.width - ball.radius || ball.x + dx < ball.radius) {
     dx = -dx;
   }
-  if (y + dy < ballRadius) {
+  if (ball.y + dy < ball.radius) {
     dy = -dy;
-  } else if (y + dy > canvas.height - ballRadius) {
-    if (x > paddleX && x < paddleX + paddleWidth) {
-      if ((y = y - paddleHeight)) {
+  } else if (ball.y + dy > canvas.height - ball.radius) {
+    if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
+      ball.y -= paddle.height;
+      if (ball.y) {
         dy = -dy;
       }
     } else {
@@ -146,24 +154,24 @@ function draw() {
         document.location.reload();
         // clearInterval(interval); // Needed for Chrome to end game
       } else {
-        x = canvas.width / 2;
-        y = canvas.height - 30;
+        ball.x = canvas.width / 2;
+        ball.y = canvas.height - 30;
         dx = 2;
         dy = -2;
-        paddleX = (canvas.width - paddleWidth) / 2;
+        paddle.x = (canvas.width - paddle.width) / 2;
       }
     }
   }
 
-  if (rightPressed && paddleX < canvas.width - paddleWidth) {
-    paddleX += 7;
-  } else if (leftPressed && paddleX > 0) {
-    paddleX -= 7;
+  if (rightPressed && paddle.x < canvas.width - paddle.width) {
+    paddle.x += 7;
+  } else if (leftPressed && paddle.x > 0) {
+    paddle.x -= 7;
   }
 
-  x += dx;
-  y += dy;
+  ball.x += dx;
+  ball.y += dy;
   requestAnimationFrame(draw);
 }
 
-draw();
+draw();

src/game/components/Ball.ts

@@ -0,0 +1,32 @@
+export class Ball {
+  #ctx: BallConfig['ctx']
+  x: BallConfig['x']
+  y: BallConfig['y']
+  #color: BallConfig['color']
+  radius: BallConfig['radius']
+
+  constructor(config: BallConfig) {
+    this.x = config.x;
+    this.#ctx = config.ctx;
+    this.y = config.y;
+    this.#color = config.color;
+    this.radius = config.radius;
+  }
+
+  draw() {
+    this.#ctx.beginPath();
+    this.#ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+    this.#ctx.fillStyle = this.#color;
+    this.#ctx.fill();
+    this.#ctx.closePath();
+  }
+
+}
+
+interface BallConfig {
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  color: string,
+  radius: number,
+}

src/game/components/Brick.ts

@@ -0,0 +1,57 @@
+export class Brick {
+  x: BrickConfig['x'];
+  y: BrickConfig['y'];
+  #ctx: BrickConfig['ctx']
+  width: BrickConfig['width']
+  height: BrickConfig['height']
+  padding: BrickConfig['padding']
+  offsetLeft: BrickConfig['offsetLeft']
+  offsetTop: BrickConfig['offsetTop']
+  column: BrickConfig['column']
+  row: BrickConfig['row']
+
+  status = true;
+
+  constructor(config: BrickConfig) {
+    this.x = config.x;
+    this.y = config.y;
+
+    this.#ctx = config.ctx;
+    this.x = config.x;
+    this.y = config.y;
+    this.width = config.width;
+    this.height = config.height;
+    this.padding = config.padding;
+    this.offsetLeft = config.offsetLeft;
+    this.offsetTop = config.offsetTop;
+    this.column = config.column;
+    this.row = config.row;
+  }
+
+  draw() {
+    if (this.status) {
+      var brickX = this.column * (this.width + this.padding) + this.offsetLeft;
+      var brickY = this.row * (this.height + this.padding) + this.offsetTop;
+      this.x = brickX;
+      this.y = brickY;
+      this.#ctx.beginPath();
+      this.#ctx.rect(brickX, brickY, this.width, this.height);
+      this.#ctx.fillStyle = "#0095DD";
+      this.#ctx.fill();
+      this.#ctx.closePath();
+    }
+  }
+}
+
+interface BrickConfig {
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  padding: number,
+  offsetLeft: number,
+  offsetTop: number,
+  column: number,
+  row: number
+}

src/game/components/Paddle.ts

@@ -0,0 +1,39 @@
+export class Paddle {
+  #width: PaddleConfig['width']
+  #height: PaddleConfig['height']
+  #ctx: PaddleConfig['ctx']
+  x: PaddleConfig['x']
+  y: PaddleConfig['y']
+
+  constructor(config: PaddleConfig) {
+    this.#width= config.width;
+    this.#height= config.height;
+    this.x = config.x;
+    this.#ctx = config.ctx;
+    this.y = config.y;
+  }
+
+  draw() {
+    this.#ctx.beginPath();
+    this.#ctx.rect(this.x, this.#ctx.canvas.height - this.height, this.width, this.height);
+    this.#ctx.fillStyle = "#0095DD";
+    this.#ctx.fill();
+    this.#ctx.closePath();
+  }
+
+  get width() {
+    return this.#width
+  }
+
+  get height() {
+    return this.#height
+  }
+}
+
+interface PaddleConfig {
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  height: number,
+  width: number,
+}