Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript canvas collision side detection

Hey i'm trying to get the side with which the two objects in the canvas collide. Here's what i'm using for collision detection, but it only checks for a collision, without a specific side.

Where o1 and o2 are objects taht have properties:

x - position on the X axis
y - position on the Y axis
w - the width of the rectangle
h - the height of the rectangle

var collidesWith = function (o2) {
    var o1 = this;
    if ((o1.y + o1.h) < o2.y) {
        return 0;
    }
    if (o1.y > (o2.y + o2.h)) {
        return 0;
    }
    if ((o1.x + o1.w) < o2.x) {
        return 0;
    }
    if (o1.x > (o2.x + o2.w)) {
        return 0;
    }
    return 1;
};

EDIT: Here's the code i came up for the collision detection on the top of the element:

if (
    (o1.y - o1.dy >= o2.y) &&
    (o1.y - o1.dy <= o2.y + o2.h) &&
    (o1.x + o1.w >= o2.x) &&
    (o1.x <= o2.x + o2.w)
) {
    // We have collision at the top end
}
like image 816
Pockata Avatar asked Feb 23 '11 22:02

Pockata


1 Answers

You need double-conditions like this:

if ((o1.y > o2.y) && (o1.y < o2.y + o2.h)) {
  return 'top'; // o1's top border collided with o2's bottom border
}

Similarily for other sides.

like image 79
kirilloid Avatar answered Sep 19 '22 09:09

kirilloid