title: Ball passing through paddle in Pong game
body: <p>I'm making <em>another</em> Pong clone using HTML5 canvas and JavaScript. The problem I'm having can best be described in this diagram:</p>
  
  <p><img src="https://i.stack.imgur.com/222M0.png" alt="http://i.stack.imgur.com/fPIOH.png"></p>
  
  <p>If the ball is moving at 10px per frame, I can't just test if the ball is touching the paddle, as it is possible that the ball has surpassed the paddle in that frame-step.</p>
  
  <p>Is there any way to test if the ball has collided with the paddle?</p>
  
  <p>Edit: The only 2 solutions I can think of at the moment are:</p>
  
  <p><img src="https://i.stack.imgur.com/2eeEI.png" alt="Test at every position"></p>
  
  <p>or</p>
  
  <p><img src="https://i.stack.imgur.com/GEjsM.png" alt="Make a collision area 10px behind the paddle"></p>