title: Directional collision detection
body: <p>If I want to move an object 40 pixels every second and I have the following scenario, how can I efficiently detect that there was a collision? </p>
  
  <p>Assume both objects are 10 by 10 squares</p>
  
  <p>Starting point of moving object at 2 seconds:</p>
  
  <p>40, 100</p>
  
  <p>Ending point of moving object at 3 seconds:</p>
  
  <p>80, 100</p>
  
  <p>Stagnant object at 60, 100</p>
  
  <p>If I am only moving the moving object once (from 40 to 80 without any movements in between) how would I tell there was an object between them?</p>
  
  <p>This is obviously a simplified version of what I am doing but I wanted it to be easy to understand.</p>
  
  <p>The only thing I can think of is check if each object has a side with an x value less than 80 and another side with an x value greater than 40 and the same idea with y values...</p>
  
  <p>I'll be using javascript and html5 canvas if that makes any difference.</p>