title: Detecting collisions between two moving objects
body: <p>I've got a basic Space Invaders type game going, and I can't get it to recognise when the shot from the player hits the alien. (I'm only checking Alien2 atm, the one second from the left). Since they're both moving, I've decided the only way to check for collisions is with either a range-based if statement (with 2 top coordinates and one left coordinate), or directly comparing the positions along the Y axis with Jquery.</p>
  
  <p>I'm using the range-based solution at the moment, but so far it hasn't worked (not sure why).</p>
  
  <p>My code so far:</p>
  
  <pre><code>        if (key == "87"/*&amp;&amp; document.getElementById('BarrelOne').id=='BarrelOne'*/){
              var Invader2 = document.getElementById('Alien2');
              var Shot1 = document.getElementById('ShortShot');
              Shot1.style.webkitAnimationPlayState="running";
              setTimeout(function(){
                  Shot1.style.webkitAnimationPlayState="paused";
              }, 1200);   
  
              if(document.elementFromPoint(625.5, 265.5) == Shot1){
                  Invader2.style.visibility="hidden"; 
              }
          };
  </code></pre>
  
  <p>Jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/ZJxgT/2/" rel="nofollow">http://jsfiddle.net/ZJxgT/2/</a></p>