JavaScript 碰撞检测系统不会忽略被阻止的碰撞

我在使用迷你游戏开发过程中遇到问题EaselJS我的碰撞检测系统，我需要有人的帮助。当英雄（圆形位图）碰撞一个对象并且第一个对象后面有其他对象时，英雄会与两个对象碰撞，即使第二次碰撞被阻止，也会出现此问题。这是一个图像解释：

问题的原因非常简单，即使问题本身并非如此：

该碰撞检测系统基于圆的未来位置（而不是其实际位置），那么如果圆的下一个位置与矩形相交，它将反弹。问题是，如果未来的位置与两个矩形相交，圆就会在两个矩形中反弹——即使实际的圆运动被另一个矩形阻挡并且无法到达第二个矩形。

Update:请注意，仅当由于矩形创建顺序而按住向上箭头时，才会出现此问题。

这是相关的 JavaScript 代码：

                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

您必须独立处理水平和垂直碰撞。

我对你的 JSfiddle 做了一些小改动：http://jsfiddle.net/Kf6cv/1/现在应该可以了，我所做的是将您的一张支票分成两份：

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");
    }
}

这样做的原因是，如果同时检查两个方向，它将阻止两个方向的移动（或使其弹跳）（如图片中的红色图） - 即使它可以向一个方向移动。检查水平/垂直的顺序通常并不重要，通常仅当您的“英雄”100% 边缘到边缘接近另一个对象时才重要。但你可以做的是首先检查速度较高的方向，所以如果 |velX| > |速度|然后你首先检查是否存在水平碰撞。

另外我想说在检查后直接应用新位置会更安全，现在它会进行两次独立检查，然后应用两个方向的移动 - 我不确定这一点，但我可以想象这可能会导致稍后一些问题。