javascript - 不规则形状的碰撞检测

Question

我知道如何检查一个圆是否即将与一个正方形发生碰撞，我知道如何检测一个正方形是否将与一个正方形发生碰撞，但是我将如何检测一个多边形是否即将与一个正方形发生碰撞?

或者更好的是，当多边形即将与多边形碰撞时。

或者更好的是，当由不直的线组成的形状与另一个相似的形状、多边形或圆形/矩形发生碰撞时

有没有办法让一个形状可能占用的像素和另一个形状占用的像素并检查它们中的任何一个是否相同？

我希望有一些不需要大量特定形状计算的解决方案。

我正在使用 javascript 和 html5 画布来执行此操作。

Answer 1

这不是一个简单的东西。如果您对一个函数可以判断两个多边形是否正在碰撞感到满意（并且您可以回滚它们），那么解决方案并不难。您只需要检查多边形的任何两个边是否相互交叉。这可以通过一些数学来完成，并且对于大的形状或很多多边形，它可以吃掉性能。为了解决这个问题，您可以使用空间分区和边界卷。

更新： 您可以基于此计算线的交点。然后你需要检查这个点是否在两个段中。为此，您可以使用段的端点，如果段实际包含该点，则 ua 和 ub 变量将介于 0-1 之间。

Answer 2

最简单的是使用边界框，只需找到对象的最小值和最大值并从中制作一个框。要对多边形进行多边形处理，您需要一种存储多边形边缘的方法以及另一种确定哪些点或边缘与另一个对象发生碰撞的方法。然后，您可以从这里确定如何对碰撞做出反应。

边界框易于实现，但不是很准确。使用多边形本身的实际边缘更准确，但更难处理并且速度要慢得多。