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