MDN breakout step 7

mdn-breakout/index.html

@@ -37,7 +37,7 @@ canvas { background: #eee; display: block; margin: 0 auto; }
   for(c=0; c<brickColumnCount; c++) {
     bricks[c] = [];
     for(r=0; r<brickRowCount; r++) {
-      bricks[c][r] = { x: 0, y: 0 };
+      bricks[c][r] = { x: 0, y: 0, status: 1 };
     }
   }
 
@@ -74,6 +74,9 @@ canvas { background: #eee; display: block; margin: 0 auto; }
   function drawBricks() {
     for(c=0; c<brickColumnCount; c++) {
       for(r=0; r<brickRowCount; r++) {
+        if(bricks[c][r].status != 1) {
+          continue;
+        }
         var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
         var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
         bricks[c][r].x = brickX;
@@ -92,6 +95,7 @@ canvas { background: #eee; display: block; margin: 0 auto; }
     drawBricks();
     drawBall();
     drawPaddle();
+    collisionDetection();
 
     if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
       dx = -dx;
@@ -142,6 +146,21 @@ canvas { background: #eee; display: block; margin: 0 auto; }
     }
   }
 
+  function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+      for(r=0; r<brickRowCount; r++) {
+        var b = bricks[c][r];
+        if(b.status != 1) {
+          continue;
+        }
+        if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+          dy = -dy;
+          b.status = 0;
+        }
+      }
+    }
+  }
+
   document.addEventListener("keydown", keyDownHandler, false);
   document.addEventListener("keyup", keyUpHandler, false);
   setInterval(draw, 10);