Public Group

# 2D collision not behaving in JavaScript

This topic is 1881 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hello everyone,

I'm attempting to build some basic 2D collision detection using JavaScript and the HTML5 canvas. I'm well aware of the magnitude of full-fledged collision detection, but I'm hoping this problem isn't so significant.

Okay so basically I can do wall collision easily (if (x > screen.width), etc.) but I'm having a problem colliding with other objects on the stage. I can bounce a sprite back (away from the object) from both directions along the X-axis, but when it comes to adding in the Y-axis, problems start occurring such as the sprite hopping in to positions it shouldn't be in or getting "stuck" and having a fit whilst half-embedded in a box.

This is my collision code:

Arc.prototype.collision = function()
{
for(var i = 0; i < game.sprites.length; i++)
{
if
(
// If the right side of the player is greater than the left side of the object.
this.x + this.r > game.sprites[i].x &&

// If the bottom of the player is greater than (meaning lower than) the top of the object.
this.y + this.r > game.sprites[i].y &&

// If the left side of the player is greater than the right side of the object.
this.x - this.r < game.sprites[i].x + game.sprites[i].w &&

// if the top of the player is greater than (meaning lower than) the bottom of the object.
this.y - this.r < game.sprites[i].y + game.sprites[i].h
)
{
// Invert speed depending on direction.
// (Causes "sticking" of sprite on top of box).
if(this.speed > 0)
{
//this.speed = -Math.abs(this.speed);
}
else
{
//this.speed = Math.abs(this.speed);
}

this.y = game.sprites[i].y - this.r;
this.vy *= this.b;

//console.log("Y:" + this.y + " R:" + this.r + " (" + parseInt(this.y + this.r) +") " + game.sprites[i].y);
}
}
}


In its current state the sprite can just roll right over the top of the box without being bounced back. If I alter the code to make it bounce back when it hits the box, the Y-axis collision suddenly stops working correctly. What will happen is the ball will "jump" to the top of the box before bouncing back, which produces an ugly result.

I've posted my project to JSFiddle for viewing if anybody could help me make it work the way it should: http://jsfiddle.net/Yzg2v/1/ (the keys are A, D and space).

Thanks.

Edited by Georgie

##### Share on other sites

I was actually writing simple collision detection in JS just a min ago and have it here at JSFiddle. Maybe this can help you. http://jsfiddle.net/erRDP/34/

##### Share on other sites

I made a system too, some time ago. I would do it like this instead:

• Make a shape.xmax(), shape.xmin(), shape.ymax(), shape.ymin() functions instead of directly calculating the bounds.

This will make it easier later on to extend your collision detection to aabb collision detection. You will need aabb detection to determine which side of the boxes has been bunced on. This will in turn be needed to calculate the bouncing direction. To bounce, you multiply the movement component with -1:

• Bounce on left-right side: x is multiplied with -1
• Bounce on top-bottom: y is multiploed with -1

• ### What is your GameDev Story?

In 2019 we are celebrating 20 years of GameDev.net! Share your GameDev Story with us.

• 13
• 9
• 15
• 14
• 46
• ### Forum Statistics

• Total Topics
634067
• Total Posts
3015320
×