HTML5 platformer collision detection problem
- by fnx
I'm working on a 2D platformer game, and I'm having a lot of trouble with collision detection. I've looked trough some tutorials, questions asked here and Stackoverflow, but I guess I'm just too dumb to understand what's wrong with my code.
I've wanted to make simple bounding box style collisions and ability to determine on which side of the box the collision happens, but no matter what I do, I always get some weird glitches, like the player gets stuck on the wall or the jumping is jittery. You can test the game here: Platform engine test. Arrow keys move and z = run, x = jump, c = shoot. Try to jump into the first pit and slide on the wall.
Here's the collision detection code:
function checkCollisions(a, b)
{
if ((a.x > b.x + b.width) ||
(a.x + a.width < b.x) ||
(a.y > b.y + b.height) ||
(a.y + a.height < b.y))
{
return false;
}
else
{
handleCollisions(a, b);
return true;
}
}
function handleCollisions(a, b)
{
var a_top = a.y,
a_bottom = a.y + a.height,
a_left = a.x,
a_right = a.x + a.width,
b_top = b.y,
b_bottom = b.y + b.height,
b_left = b.x,
b_right = b.x + b.width;
if (a_bottom + a.vy > b_top && distanceBetween(a_bottom, b_top) + a.vy < distanceBetween(a_bottom, b_bottom))
{
a.topCollision = true;
a.y = b.y - a.height + 2;
a.vy = 0;
a.canJump = true;
}
else if (a_top + a.vy < b_bottom && distanceBetween(a_top, b_bottom) + a.vy < distanceBetween(a_top, b_top))
{
a.bottomCollision = true;
a.y = b.y + b.height;
a.vy = 0;
}
else if (a_right + a.vx > b_left && distanceBetween(a_right, b_left) < distanceBetween(a_right, b_right))
{
a.rightCollision = true;
a.x = b.x - a.width - 3;
//a.vx = 0;
}
else if (a_left + a.vx < b_right && distanceBetween(a_left, b_right) < distanceBetween(a_left, b_left))
{
a.leftCollision = true;
a.x = b.x + b.width + 3;
//a.vx = 0;
}
}
function distanceBetween(a, b)
{
return Math.abs(b-a);
}
