Horizontal Collision Detection Using Crafty.js Game Engine

Question

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 justHit is set to false):

.onHit("brick", function() { 
    if (data[0]['normal']['y']==0) { 
        reverseDirection(); 
    } 
    else { 
        this._hspeed = 0; 
    } 
}, function() { 
    this._hspeed = 3; 
}) 

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.

• I've posted some stripped down code on jsFiddle
• You can see examples of the current detection with hitdata conditionals here
• And an example of the original collision bug with no movement restraints when colliding on a brick edge

Answer 1

You could draw multiple hitboxes on the entity, and then depending on which box triggers the collision perform your specific action.