title: use css animation to detect positions in space invaders
body: <p>So I'm trying to make a space invaders game, using only HTML, JS and CSS. The problem I'm having right now is with the <code>collisionDetection</code> function in JS. I have animated the enemies to go to right -> down -> left -> right etc. However, the code still thinks the they are in their staring position. Hence, the broken hitbox then. If I turn off the CSS animation <code>collisionDetection</code> works perfectly. </p>
  
  <pre><code>&lt;div id="background"&gt;
      &lt;div id="pilot"&gt;&lt;/div&gt;
      &lt;div id="missiles"&gt;&lt;/div&gt;
      &lt;div id="fiende"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  function collisionDetection() {
  for (var enemy = fiende.length - 1; enemy &gt;= 0; enemy--) {
      for (var missile = 0; missile &lt; missiles.length; missile++) {
          if (
              missiles[missile].left &gt;= fiende[enemy].left &amp;&amp;
              missiles[missile].left &lt;= (fiende[enemy].left + 50) &amp;&amp;
              missiles[missile].top &lt;= (fiende[enemy].top + 50) &amp;&amp;
              missiles[missile].top &gt;= fiende[enemy].top
          ) {
              fiende.splice(enemy, 1);
              missiles.splice(missile, 1);
              break;
          }
      }
  }
  </code></pre>
  
  <p>It's a bit hard to explain so I'll give you my Github for the game: <a href="https://belminh.github.io/Projekt_2/html/space_invaders.html" rel="nofollow noreferrer">https://belminh.github.io/Projekt_2/html/space_invaders.html</a> and here's the link to get access to all my files: <a href="https://github.com/BelminH/belminh.github.io/tree/master/Projekt_2" rel="nofollow noreferrer">https://github.com/BelminH/belminh.github.io/tree/master/Projekt_2</a></p>