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