MDN breakout step 6

mdn-breakout/index.html

@@ -26,6 +26,20 @@ canvas { background: #eee; display: block; margin: 0 auto; }
   var y = canvas.height-30;
   var dx = 2;
   var dy = -2;
+  var brickRowCount = 3;
+  var brickColumnCount = 5;
+  var brickWidth = 75;
+  var brickHeight = 20;
+  var brickPadding = 10;
+  var brickOffsetTop = 30;
+  var brickOffsetLeft = 30;
+  var bricks = [];
+  for(c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(r=0; r<brickRowCount; r++) {
+      bricks[c][r] = { x: 0, y: 0 };
+    }
+  }
 
   function randInt(min, max) {
     min = Math.ceil(min);
@@ -57,8 +71,25 @@ canvas { background: #eee; display: block; margin: 0 auto; }
     ctx.closePath();
   }
 
+  function drawBricks() {
+    for(c=0; c<brickColumnCount; c++) {
+      for(r=0; r<brickRowCount; r++) {
+        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();
+      }
+    }
+  }
+
   function draw() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBricks();
     drawBall();
     drawPaddle();