src/main.js

@@ -12,6 +12,7 @@ import {
   PADDLE_WIDTH,
 } from './config';
 import { calculateCollision } from './lib/calculateCollision/calculateCollision';
+import { calculateDirection } from './lib/calculateDirection/calculateDirection';
 
 (async () => {
   // Create a new application
@@ -54,6 +55,8 @@ import { calculateCollision } from './lib/calculateCollision/calculateCollision'
   });
 
   const ball = new Graphics().circle(0, 0, BALL_RADIUS).fill('#ffffff');
+  ball.x = 100;
+  ball.y = 100;
   container.addChild(ball);
 
   const leftBoundary = BALL_RADIUS;
@@ -80,13 +83,21 @@ import { calculateCollision } from './lib/calculateCollision/calculateCollision'
       const ballTop = ball.y - BALL_RADIUS;
       const ballBottom = ball.y + BALL_RADIUS;
 
-      const isCollided = calculateCollision(
-        { left: ballLeft, right: ballRight, top: ballTop, bottom: ballBottom },
-        { left: brickLeft, right: brickRight, top: brickTop, bottom: brickBottom },
-      );
+      const ballObject = { left: ballLeft, right: ballRight, top: ballTop, bottom: ballBottom };
+      const brickObject = { left: brickLeft, right: brickRight, top: brickTop, bottom: brickBottom };
 
-      if (isCollided) {
-        verticalSpeed *= -1;
+      const isCollided = calculateCollision(ballObject, brickObject);
+      const directions = calculateDirection(ballObject, brickObject);
+
+      if (isCollided && directions !== null) {
+        horizontalSpeed *= directions[0];
+        verticalSpeed *= directions[1];
+
+        container.removeChild(currentBrick);
+        currentBrick.destroy();
+        bricksRow.splice(i, 1);
+
+        break;
       }
     }