title: collision detection algorithm issue
body: <p>here is the jsfiddle i am working on so far : <a href="http://jsfiddle.net/TLYZS/" rel="nofollow noreferrer">http://jsfiddle.net/TLYZS/</a></p>
  
  <p>if you debug the code and check the collision function you can see that the collision is working fine when the user overlap with the other character wish in a fighting game the collision should not work like this : </p>
  
  <ol>
  <li>you can see that when i punch or kick the character from a little distance the collision detection function does not work even if you can see it on the screen that the user is punishing the character</li>
  <li><p>how can i fix this collision detection function to make it work fine ?</p>
  
  <pre><code>function Collision(r1, r2) {
          return !(r1.x &gt; r2.x + r2.w || r1.x + r1.w &lt; r2.x || r1.y &gt; r2.y + r2.h || r1.y + r1.h &lt; r2.y);
      }
  </code></pre></li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/UtvKv.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/H7taZ.png" alt="enter image description here"></p>