title: jQuery Collision Plugin for game character / div
body: <p>I'm aware there are a couple question similar but unfortunately they haven't quite been the answer to my problem... as far as I can tell.</p>
  
  <p>Over the past couple nights whenever I've had some free time, I've been fiddling with creating a little type of game, which you can see a snippet/example <a href="http://jsfiddle.net/HelloJoe/8NW2K/" rel="nofollow">here</a> (WASD to move - Note: It's not cross browser compatible yet)</p>
  
  <p>I'm using a plugin called <a href="http://plugins.jquery.com/project/jquery-collision" rel="nofollow">jQuery Collision</a>, it in theory does exactly what I would want it to do, but the examples given are done with draggable objects with the mouse and I'm having a few troubles adding it into my experiment.</p>
  
  <p>I've tried adding this to my 'W' key in the attempt to say when the player collides with the obstacle, the obstacle should be removed.</p>
  
  <pre><code>    if ($("#player").collision("#obstacle")) {
          $("#obstacle").remove();
      }
  </code></pre>
  
  <p>Currently the obstacle is being removed but some times unexpectedly, if you place the player underneath the obstacle and press W (up) the box is removed, even though the player and obstacle haven't collided yet.</p>
  
  <p>I've also tried other ways that I've seen in demo's which I also couldn't get working:</p>
  
  <pre><code>    var collided = $("#player").collision("#obstacle");
  
      if (collided.length &gt; 0) {
          $("#obstacle").remove()
      }
  </code></pre>
  
  <p>Could anyone shed some light on what I'm doing wrong?</p>
  
  <p><strong>NOTE</strong></p>
  
  <p>I'm aware there are plugins out there like gameQuery, so please don't recommend I just use that instead :)</p>