MDN breakout step 4

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