diff --git a/mdn-breakout/index.html b/mdn-breakout/index.html
index 5a6481b..8f853cf 100644
--- a/mdn-breakout/index.html
+++ b/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 {
- pauseWithMessage("GAME OVER");
- // document.location.reload();
+ lives--;
+ if(!lives) {
+ isOver = true;
+ pauseWithMessage("GAME OVER");
+ }
+ 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();
})();