jquery - JavaScript 对矩形和一组边界坐标的碰撞检测？

Question

我一直在查看 Stack Overflow(和其他地方)上发布的类似问题，但它们似乎要么只处理矩形(我目前可以很好地处理)，要么比我目前能理解的更复杂.

我通过 mousedown 事件在屏幕上移动 Sprite ，并希望锁定它以免移动“越界”。边界可以是像这个房间这样简单的东西:

绿色为可移动空间，红色为限制空间。我是否最好将其分解为 1 个长矩形和 2 个三角形(或一组正方形来表示具有锯齿状边缘的三角形)，或者是否有一个我应该考虑的基本概念来指定“可步行区域”的坐标并验证用户始终在“范围内”？

我用 JavaScript 进行编码，并且严重依赖 jQuery。

编辑:考虑到我可能需要无限的点(如果房间有超过 4 个点)，我最好使用 A* 之类的东西来生成路径吗？

Answer 1

尝试稍微解构您的问题。通过这个简单的形状，您将得到一个矩形，该矩形需要在两个斜率之间具有 x 坐标，在两条平坦线之间具有 y 坐标。

像这样的东西应该可以很好地工作:

function outOfBounds(point, boundary) {
    return point.y > boundary.top
        || point.y < boundary.bottom
        || point.x < boundary.getLeftBoundAt(point.y)
        || point.x > boundary.getRightBoundAt(point.y);
}

回想一下，斜线可以定义为 mx + b，但在这种情况下，斜线的 x 坐标相对于 y 坐标会有所不同。无论如何， getLeftBoundAt() 看起来像:

function getLeftBoundAt(y) {
    return this.slope * y + this.base;
}

编辑:

由于高度沿左右边缘也会变化，因此您需要一个稍微复杂的解决方案，其中 border.top 被替换为对如下函数的调用:

function getTopBoundAt(x) {
    var segment = this.topSegmentAt(x);
    return segment.origin.y + segment.slope * (x - segment.origin.x);
}