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(); })();