title: How to make the ball move faster when it hits paddle?
body: <p>How to make the ball move faster when it hits paddle !</p>
  
  <p><pre>  var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
      var dx = 2;var dy = -2;
      var w = canvas.width, h = canvas.height;
      var x = w/2;var y = h-30;
      var ballRadius = 10;
      var color = getColor();
      var paddleHeight = 10;var paddleWidth = 75;var paddleX = (w-paddleWidth)/2;
      var rightPressed = false;
      var leftPressed = false;</p>
  
  <pre><code>    document.addEventListener("keydown", keyDownHandler,false);
      document.addEventListener("keyup", keyUpHandler,false);
  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;
      }
  }
  
  function getColor() {
          var letters = '0123456789ABCDEF'.split('');
      var color = '#';
      for (var i = 0; i &lt; 6; i++ ) {
          color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
  }
  
  function drawBall() {   
      ctx.beginPath();
          ctx.arc(x, y, ballRadius, 0, Math.PI*2);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.closePath();
  }
  
  function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, h-paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = "#eee";
      ctx.fill();
      ctx.closePath();
  }
  
  function draw() {
          ctx.clearRect(0,0,w,h);
      drawBall();
          drawPaddle();
          if(x + dx &lt; ballRadius || x + dx &gt; w-ballRadius) {
          dx = -dx;
              color = getColor();
          }   
  
          if(y + dy &lt; ballRadius) {
          dy = -dy;
              color = getColor();
          }else if(y + dy &gt; h-ballRadius) {
          if(x &gt; paddleX &amp;&amp; x &lt; paddleX + paddleWidth) {
              dy = -dy;                       
          }
          else {
              alert("GAME OVER");
          }
      }
  
      if(rightPressed &amp;&amp; paddleX &lt; w-paddleWidth) {
      paddleX += 7;
      }
      else if(leftPressed &amp;&amp; paddleX &gt; 0) {
              paddleX -= 7;
      }
      x += dx;
      y += dy;
  }
  
      setInterval(draw, 10);
  /*left arrow: 37 
  up arrow: 38
  right arrow: 39
  down arrow: 40*/
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>* { 
      background-color: #224;
      padding: 0; margin: 0; 
  }
  canvas {
      background: #555; 
      display: block; 
      margin: 10px auto; 
  }
  </code></pre>
  
  <p></pre>
  </p>
  
  <pre><code>&lt;canvas id="myCanvas" width="480px" height="320px"&gt;&lt;/canvas&gt;
  </code></pre>