x/box-o-sand
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

MDN breakout step 10

Browse Source
This commit is contained in:
Dan Buch 2017-01-03 16:52:24 -05:00
parent a649c14487
commit a94e815fc2
No known key found for this signature in database
GPG Key ID: FAEF12936DD3E3EC
1 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
mdn-breakout/index.html
View File

@ -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();
})();
</script>
</body>