MDN breakout step 8

mdn-breakout/index.html

@@ -16,16 +16,19 @@ canvas { background: #eee; display: block; margin: 0 auto; }
   var ctx = canvas.getContext("2d");
   var ballRadius = 10;
   var ballColor = '#0095DD';
-  var paddleHeight = 10;
+  var paddleHeight = 7;
-  var paddleWidth = 75;
+  var paddleWidth = 119;
   var paddleX = (canvas.width-paddleWidth)/2;
   var paddleSpeed = 7;
   var rightPressed = false;
   var leftPressed = false;
   var x = canvas.width/2;
-  var y = canvas.height-30;
+  var y = canvas.height-randInt(10, 50);
   var dx = 2;
   var dy = -2;
+  var score = 0;
+  var scoreStep = 1;
+  var isPaused = false;
   var brickRowCount = 3;
   var brickColumnCount = 5;
   var brickWidth = 75;
@@ -90,11 +93,42 @@ 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;
+          score += scoreStep;
+          // scoreStep++;
+          if(score >= (brickRowCount*brickColumnCount*scoreStep)) {
+            pauseWithMessage("YOU WIN! FINAL SCORE "+score+"!");
+            // document.location.reload();
+          }
+        }
+      }
+    }
+  }
+
+  function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+  }
+
   function draw() {
+    if(isPaused) {
+      return;
+    }
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     drawBricks();
     drawBall();
     drawPaddle();
+    drawScore();
     collisionDetection();
 
     if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
@@ -112,8 +146,8 @@ canvas { background: #eee; display: block; margin: 0 auto; }
         dy *= 1.01;
       }
       else {
-        alert("GAME OVER");
+        pauseWithMessage("GAME OVER");
-        document.location.reload();
+        // document.location.reload();
       }
     }
 
@@ -128,6 +162,13 @@ canvas { background: #eee; display: block; margin: 0 auto; }
     y += dy;
   }
 
+  function pauseWithMessage(msg) {
+    isPaused = true;
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#FF3333";
+    ctx.fillText(msg, 150, 200);
+  }
+
   function keyDownHandler(e) {
     if(e.keyCode == 39) {
       rightPressed = true;
@@ -146,21 +187,6 @@ 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);