From e29d51e439f5b6bd68931a4ef1ffeb7c410ea6c2 Mon Sep 17 00:00:00 2001
From: Dan Buch <daniel.buch@gmail.com>
Date: Mon, 2 Jan 2017 23:34:41 -0500
Subject: [PATCH] MDN breakout step 6

---
 mdn-breakout/index.html | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/mdn-breakout/index.html b/mdn-breakout/index.html
index 8c02018..ec0c943 100644
--- a/mdn-breakout/index.html
+++ b/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();