Javascript canvas collision side detection

Question

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
}

kirilloid kirilloid · Accepted Answer · 2011-02-23T22:44:24

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.

Javascript canvas collision side detection

1 Answers