title: Horizontal Collision Detection Using Crafty.js Game Engine
body: <p>I'm trying to build a breakout-style type of game with continuous 
  vertical player movement and only horizontal input. I need to detect 
  if a brick is hit on the sides or top/bottom. Without detecting that, 
  I haven't been able to stop the player movement from overlapping the 
  bricks that aren't destroyed. I tried to detect which edge of the 
  polygon the player entity was hitting using this (calls the first function when a collision is detected and the second when <code>justHit</code> is set to false):</p>
  
  <pre><code>.onHit("brick", function() { 
      if (data[0]['normal']['y']==0) { 
          reverseDirection(); 
      } 
      else { 
          this._hspeed = 0; 
      } 
  }, function() { 
      this._hspeed = 3; 
  }) 
  </code></pre>
  
  <p>But I'm getting 2 problems: the 'y' datahit value changes when the 
  player entity reaches the corner of a brick, and for some reason the 
  brick component is pretty much ignored if there are 2 bricks side by 
  side.</p>
  
  <ul>
  <li>I've posted some stripped down code on <a href="http://jsfiddle.net/XurrR/" rel="nofollow">jsFiddle</a></li>
  <li>You can see examples of the current detection with hitdata 
  conditionals <a href="http://marcripley.com/diamonds/" rel="nofollow">here</a></li>
  <li>And an example of the original collision bug with <a href="http://marcripley.com/diamonds/coll_bug.html" rel="nofollow">no movement 
  restraints when colliding on a brick edge</a></li>
  </ul>