javascript - 阻止两个矩形相交

Question

这个小世界包含一个人(蓝色矩形)和一棵树(大绿色矩形)。通过按键盘上的上、下、左、右键可以控制人。蓝色矩形仅在按下按键时移动。蓝色矩形不得脱离 map (即不得脱离灰色区域)，并且不得与绿色矩形重叠。

我知道防止蓝色矩形脱离灰色区域的方法:

if (blueRect.rightEdge >= (canvas.width - 1)) {
    // Don't allow going further to the right
    // But allow going up, down, and to the left
}

// Check the same thing for the other sides of the grey area

我不确定如何防止两个矩形相交。

在上图中，如何“禁止”向右行驶(以防止交叉路口)？我还是希望能够向上、向下、向左。

Answer 1

您正在处理的内容称为 collision detection 。我不相信有一个始终适用的简单答案。

但是，在您的情况下，因为您有简单的矩形，所以您可以检查SMALLER矩形的四个 Angular 中的任何一个是否在LARGER矩形内.

如果您不知道哪个较小，哪个较大，您可以在两个方向上检查(即矩形 A 的 Angular 是否在矩形 B 内，然后矩形 B 的 Angular 是否在矩形 A 内)。确保使用 >= 和 <= 来捕获讨厌的边界条件。

也许这样的东西是合适的(伪代码):

nextLocation = translate(rectangleA, "up")
if (isIntersecting(rectangleB, nextLocation)) {
    error("collision!")
} else {
    rectangleA = nextLocation
}