Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A collision function two prevent two rectangular sprites from overlapping. Optionally, bounce them apart
/*
#### rectangleCollision
Use it to prevent two rectangular sprites from overlapping.
Optionally, make the first retangle bounceoff the second rectangle.
Parameters:
a. A sprite object with `x`, `y` `center.x`, `center.y`, `halfWidth` and `halfHeight` properties.
b. A sprite object with `x`, `y` `center.x`, `center.y`, `halfWidth` and `halfHeight` properties.
c. Optional: true or false to indicate whether or not the first sprite
should bounce off the second sprite.
*/
function rectangleCollision(r1, r2, bounce) {
var collision, combinedHalfWidths, combinedHalfHeights,
overlapX, overlapY, vx, vy;
//Set `bounce` to a default value of `true`
if(bounce === undefined) bounce = false;
//Find the collision vector
vx = r1.centerX - r2.centerX;
vy = r1.centerY - r2.centerY;
//Figure out the combined half-widths and half-heights
combinedHalfWidths = r1.halfWidth + r2.halfWidth;
combinedHalfHeights = r1.halfHeight + r2.halfHeight;
//Check whether vx is less than the combined half widths
if (Math.abs(vx) < combinedHalfWidths) {
//A collision might be occurring!
//Check whether vy is less than the combined half heights
if (Math.abs(vy) < combinedHalfHeights) {
//A collision has occurred! This is good!
//Find out the size of the overlap on both the X and Y axes
overlapX = combinedHalfWidths - Math.abs(vx);
overlapY = combinedHalfHeights - Math.abs(vy);
//The collision has occurred on the axis with the
//*smallest* amount of overlap. Let's figure out which
//axis that is
if (overlapX >= overlapY) {
//The collision is happening on the X axis
//But on which side? vy can tell us
if (vy > 0) {
collision = "top";
//Move the rectangle out of the collision
r1.y = r1.y + overlapY;
} else {
collision = "bottom";
//Move the rectangle out of the collision
r1.y = r1.y - overlapY;
}
//Bounce
if (bounce) {
r1.vy *= -1;
/*Alternative
//Find the bounce surface's vx and vy properties
var s = {};
s.vx = r2.x - r2.x + r2.width;
s.vy = 0;
//Bounce r1 off the surface
//bounceOffSurface(r1, s);
*/
}
} else {
//The collision is happening on the Y axis
//But on which side? vx can tell us
if (vx > 0) {
collision = "left";
//Move the rectangle out of the collision
r1.x = r1.x + overlapX;
} else {
collision = "right";
//Move the rectangle out of the collision
r1.x = r1.x - overlapX;
}
//Bounce
if (bounce) {
r1.vx *= -1;
}
}
} else {
//No collision
}
} else {
//No collision
}
//Return the collision string. it will be either "top", "right",
//"bottom", or "left" depening on which side of r1 is touching r2.
return collision;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.