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 · Accepted Answer · 2011-02-23 22:44:24Z

8

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.

answered Feb 23, 2011 at 22:44

kirilloid

14.4k6 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pockata Over a year ago

Well, i had to make a whole lot more calculations to make this work properly, but you showed me the way. Thanks :)

Sabai Over a year ago

Would be great if you could share the calculations you had to make. Would finish this question off nicely :)

Collectives™ on Stack Overflow

Javascript canvas collision side detection

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related