Javascript collision detection system don't ignore blocked collisions

Question

I'm having issues during a minigame development using EaselJS with my collision detection system and I need someone's help. The issue occurs when the hero (a circle bitmap) collides an object and there's other object behind the first one, the hero collides with both objects, even if the second collision is blocked. Here's an image explanation:

The cause of the problem is really simple, even if the problem itself isn't:

This collision detection system is based on the future position of the circle (and not on its actual position), then if the next position of the circle intersect a rectangle, it will bounce. The problem is that, if the future position intersects two rectangles, the circle will bounce in both rectangles — even if the actual circle movement is blocked by another rectangle and it can't reach the second one.

Update: Note that this problem only occurs when the up arrow is being hold due to the rect creation order.

Here's the relevant javascript code:

                rects.forEach(function (rect) { // Affect all rects
                    // Collision detection:
                    // (This MUST BE after every change in xvel/yvel)

                    // Next circle position calculation:
                    var nextposx = circle.x + event.delta / 1000 * xvel * 20,
                        nextposy = circle.y + event.delta / 1000 * yvel * 20;

                    // Collision between objects (Rect and Circle):
                    if (nextposy + height(circle) > rect.y &&
                        nextposx + width(circle) > rect.x &&
                        nextposx < rect.x + rect.width &&
                        nextposy < rect.y + rect.height) {
                        if (circle.y + height(circle) < rect.y) {
                            cls("top");
                        }
                        if (circle.x + width(circle) < rect.x) {
                            cls("left");
                        }
                        if (circle.x > rect.x + rect.width) {
                            cls("right");
                        }
                        if (circle.y > rect.y + rect.height) {
                            cls("bottom");
                        }
                    }

                    // Stage collision:
                    if (nextposy < 0) { // Collided with TOP of stage. Trust me.
                        cls("bottom"); // Inverted collision side is proposital!
                    }
                    if (nextposx < 0) {
                        cls("right");
                    }
                    if (nextposx + width(circle) > stage.canvas.width) {
                        cls("left");
                    }
                    if (nextposy + height(circle) > stage.canvas.height) {
                        cls("top");
                    }
                });

JSFiddle

I've updated the question with my latest knowledge about this issue to provide more information for new programmers who are facing the same problem. — Tiago Marinho, Apr 29 '14 at 01:44

olsn · Accepted Answer · 2019-08-23T10:16:27.340

You have to treat horizontal and vertical collisions independently.

I've made some minor changes to your JS-fiddle: http://jsfiddle.net/Kf6cv/1/ it should work now, what I did is I split up your one check into two:

if (nextposy + height(circle) > rect.y &&
    circle.x + width(circle) > rect.x &&
    circle.x < rect.x + rect.width &&
    nextposy < rect.y + rect.height) {
    if (circle.y + height(circle) < rect.y) {
       cls("top");
    }
    if (circle.y > rect.y + rect.height) {
        cls("bottom");
    }
}

if (nextposx + width(circle) > rect.x &&
    nextposx < rect.x + rect.width &&
    circle.y + height(circle) > rect.y &&
    circle.y < rect.y + rect.height) {
    if (circle.x + width(circle) < rect.x) {
        cls("left");
    }
    if (circle.x > rect.x + rect.width) {
        cls("right");
    }
}

The reason for this is that if check both directions at once, it will prevent the movement(or make it bounce) for both directions(like the red figure in your picture) - even if it COULD move into one direction. The order of checking horizontal/vertical usually doesn't matter, it usually only matters if your "hero" approaches the other object 100% edge-to-edge. But what you could to is to first check the direction with the higher velocity, so if |velX| > |velY| then you first check for a horizontal collision.

Also I'd say it is safer to apply the new position directly after checking, right now it does two independend checks and then applies the movement of both directions - I'm not to sure about it but I could imagine that this might lead to some issues later.

This solved my first problem because it just remove support to 100% edge-to-edge collision, creating a new problem: There's no edge-to-edge collision. — Tiago Marinho, Mar 13 '14 at 05:53
If I check which direction has higher velocity, what will occur when `yvel == xvel`? And if, in this case http://i.imgur.com/l9LwPGz.png, `yvel > xvel`? — Tiago Marinho, Mar 13 '14 at 05:54
You do also have edge-to-edge collision, since you are using boinding-boxes. But this is a rare case, it will only matter if for example your circle's bounding box' right upper edge is directly at the lower left edge of the collision-rectangle. If you then check horizontal first, the ball will to right below the rectangle, if you check vertical first, it will go up on the left side of the rectangle. But those cases are so very rare, they pretty much won't happen - anyway IF you want to catch those cases, you can use the higher velocity first. (if they are equal just go with a standard case) — olsn, Mar 13 '14 at 08:10
You issue only occurs when pressing **UP** AND **LEFT/RIGHT** - and the reason for this is, that your detection checks both directions in one step with a preferation of horizontal collitions. The only "explanation" you will get for your issue is by stepping through your code with the debugger and understanding what your code actually does... What you are currently asking for is someone to explain the code for you, that you wrote yourself. — olsn, Mar 19 '14 at 11:16

Javascript collision detection system don't ignore blocked collisions

1 Answers1

Linked