MDN breakout step 10

mdn-breakout/index.html

@@ -28,7 +28,9 @@ canvas { background: #eee; display: block; margin: 0 auto; }
   var dy = -2;
   var score = 0;
   var scoreStep = 1;
+  var lives = 3;
   var isPaused = false;
+  var isOver = false;
   var brickRowCount = 3;
   var brickColumnCount = 5;
   var brickWidth = 75;
@@ -106,6 +108,7 @@ canvas { background: #eee; display: block; margin: 0 auto; }
           score += scoreStep;
           // scoreStep++;
           if(score >= (brickRowCount*brickColumnCount*scoreStep)) {
+            isOver = true;
             pauseWithMessage("YOU WIN! FINAL SCORE "+score+"!");
             // document.location.reload();
           }
@@ -120,8 +123,14 @@ canvas { background: #eee; display: block; margin: 0 auto; }
     ctx.fillText("Score: "+score, 8, 20);
   }
 
+  function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+  }
+
   function draw() {
-    if(isPaused) {
+    if(isPaused || isOver) {
       return;
     }
     ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -129,6 +138,7 @@ canvas { background: #eee; display: block; margin: 0 auto; }
     drawBall();
     drawPaddle();
     drawScore();
+    drawLives();
     collisionDetection();
 
     if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
@@ -146,8 +156,18 @@ canvas { background: #eee; display: block; margin: 0 auto; }
         dy *= 1.01;
       }
       else {
+        lives--;
+        if(!lives) {
+          isOver = true;
           pauseWithMessage("GAME OVER");
-        // document.location.reload();
+        }
+        else {
+          x = canvas.width/2;
+          y = canvas.height-randInt(10, 50);
+          dx = 2;
+          dy = -2;
+          paddleX = (canvas.width-paddleWidth)/2;
+        }
       }
     }
 
@@ -160,6 +180,7 @@ canvas { background: #eee; display: block; margin: 0 auto; }
 
     x += dx;
     y += dy;
+    requestAnimationFrame(draw);
   }
 
   function pauseWithMessage(msg) {
@@ -185,7 +206,7 @@ canvas { background: #eee; display: block; margin: 0 auto; }
     else if(e.keyCode == 37) {
       leftPressed = false;
     }
-    else if(e.keyCode == 27) {
+    else if(e.keyCode == 27 && !isOver) {
       if(isPaused) {
         isPaused = false;
       } else {
@@ -196,7 +217,8 @@ canvas { background: #eee; display: block; margin: 0 auto; }
 
   function mouseMoveHandler(e) {
     var relativeX = e.clientX - canvas.offsetLeft;
-    if(relativeX > (0-paddleWidth) && relativeX < (canvas.width+paddleWidth)) {
+    if(relativeX > paddleWidth/2 &&
+       relativeX < (canvas.width-(paddleWidth/2))) {
       paddleX = relativeX - paddleWidth/2;
     }
   }
@@ -204,7 +226,7 @@ canvas { background: #eee; display: block; margin: 0 auto; }
   document.addEventListener("keydown", keyDownHandler, false);
   document.addEventListener("keyup", keyUpHandler, false);
   document.addEventListener("mousemove", mouseMoveHandler, false);
-  setInterval(draw, 10);
+  draw();
 })();
     </script>
   </body>