diff --git a/mdn-breakout/index.html b/mdn-breakout/index.html index 8f853cf..c0875a7 100644 --- a/mdn-breakout/index.html +++ b/mdn-breakout/index.html @@ -3,231 +3,15 @@ MDN Breakout - + - + + diff --git a/mdn-breakout/script.js b/mdn-breakout/script.js new file mode 100644 index 0000000..1414a91 --- /dev/null +++ b/mdn-breakout/script.js @@ -0,0 +1,220 @@ +(function() { + var canvas = document.getElementById("myCanvas"), + ctx = canvas.getContext("2d"), + ballRadius = 10, + ballColor = '#0095DD', + paddleHeight = 7, + paddleWidth = 119, + paddleX = (canvas.width-paddleWidth)/2, + paddleSpeed = 7, + rightPressed = false, + leftPressed = false, + x = canvas.width/2, + y = canvas.height-randInt(10, 50), + dx = 2, + dy = -2, + score = 0, + scoreStep = 1, + lives = 3, + isPaused = false, + isOver = false, + brickRowCount = 3, + brickColumnCount = 5, + brickWidth = 75, + brickHeight = 20, + brickPadding = 10, + brickOffsetTop = 30, + brickOffsetLeft = 30, + bricks = []; + + (function() { + for(var 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)) { + isOver = true; + 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 drawLives() { + ctx.font = "16px Arial"; + ctx.fillStyle = "#0095DD"; + ctx.fillText("Lives: "+lives, canvas.width-65, 20); + } + + function draw() { + if(isPaused || isOver) { + return; + } + ctx.clearRect(0, 0, canvas.width, canvas.height); + drawBricks(); + drawBall(); + drawPaddle(); + drawScore(); + drawLives(); + collisionDetection(); + + if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { + dx = -dx; + ballColor = randColor(); + } + if(y + dy < ballRadius) { + dy = -dy; + ballColor = randColor(); + } + else if(y + dy > canvas.height-ballRadius) { + if(x > paddleX && x < paddleX + paddleWidth) { + dy = -dy; + dx *= 1.01; + dy *= 1.01; + } + else { + 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; + } + } + } + + if(rightPressed && paddleX < canvas.width-paddleWidth) { + paddleX += paddleSpeed; + } + else if(leftPressed && paddleX > 0) { + paddleX -= paddleSpeed; + } + + x += dx; + y += dy; + requestAnimationFrame(draw); + } + + 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; + } + else if(e.keyCode == 37) { + leftPressed = true; + } + } + + function keyUpHandler(e) { + if(e.keyCode == 39) { + rightPressed = false; + } + else if(e.keyCode == 37) { + leftPressed = false; + } + else if(e.keyCode == 27 && !isOver) { + if(isPaused) { + isPaused = false; + } else { + pauseWithMessage("PAUSE (ESC)"); + } + } + } + + function mouseMoveHandler(e) { + var relativeX = e.clientX - canvas.offsetLeft; + if(relativeX > paddleWidth/2 && + relativeX < (canvas.width-(paddleWidth/2))) { + paddleX = relativeX - paddleWidth/2; + } + } + + document.addEventListener("keydown", keyDownHandler, false); + document.addEventListener("keyup", keyUpHandler, false); + document.addEventListener("mousemove", mouseMoveHandler, false); + draw(); +})(); diff --git a/mdn-breakout/style.css b/mdn-breakout/style.css new file mode 100644 index 0000000..312ee38 --- /dev/null +++ b/mdn-breakout/style.css @@ -0,0 +1,14 @@ +* { + padding: 0; + margin: 0; +} +canvas { + background: #eee; + display: block; + margin: 0 auto; +} +footer { + margin: 32px auto; + font-family: Arial, sans-serif; + font-size: 12px; +}