diff --git a/mdn-breakout/index.html b/mdn-breakout/index.html index 4efb584..57491bf 100644 --- a/mdn-breakout/index.html +++ b/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 paddleWidth = 75; + var paddleHeight = 7; + 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 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"); - document.location.reload(); + pauseWithMessage("GAME OVER"); + // 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 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);