diff --git a/mdn-breakout/index.html b/mdn-breakout/index.html index 8be959f..e097583 100644 --- a/mdn-breakout/index.html +++ b/mdn-breakout/index.html @@ -16,6 +16,12 @@ 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 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 dx = 2; @@ -43,21 +49,59 @@ canvas { background: #eee; display: block; margin: 0 auto; } ctx.closePath(); } + function drawPaddle() { + ctx.beginPath(); + ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight); + ctx.fillStyle = "#0095DD"; + ctx.fill(); + ctx.closePath(); + } + function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); - x += dx; - y += dy; + drawPaddle(); + + if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { + dx = -dx; + ballColor = randColor(); + } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; ballColor = randColor(); } - if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { - dx = -dx; - ballColor = randColor(); + + if(rightPressed && paddleX < canvas.width-paddleWidth) { + paddleX += paddleSpeed; + } + else if(leftPressed && paddleX > 0) { + paddleX -= paddleSpeed; + } + + x += dx; + y += dy; + } + + 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; } } + document.addEventListener("keydown", keyDownHandler, false); + document.addEventListener("keyup", keyUpHandler, false); setInterval(draw, 10); })();