Javascript 不规则形状的碰撞检测

Javascript 不规则形状的碰撞检测,javascript,jquery,html,canvas,collision-detection,Javascript,Jquery,Html,Canvas,Collision Detection,我知道如何检查圆是否将与正方形碰撞,我知道如何检测正方形是否将与正方形碰撞,但如何检测多边形是否将与正方形碰撞 或者更好的是,当多边形即将与多边形碰撞时 或者更好的是,当由非直线组成的形状与另一个类似形状、多边形或圆/矩形碰撞时 有没有办法得到一个形状可能会占用的像素和另一个形状可能占用的像素,并检查它们是否相同 我希望有一些解决方案,不需要大量的形状计算 我正在使用javascript和html5画布来实现这一点。这不是一件简单的事情。如果您对函数能够判断两个多边形是否发生碰撞(并且您可以回滚

我知道如何检查圆是否将与正方形碰撞,我知道如何检测正方形是否将与正方形碰撞,但如何检测多边形是否将与正方形碰撞

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

或者更好的是,当由非直线组成的形状与另一个类似形状、多边形或圆/矩形碰撞时

有没有办法得到一个形状可能会占用的像素和另一个形状可能占用的像素,并检查它们是否相同

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


我正在使用javascript和html5画布来实现这一点。

这不是一件简单的事情。如果您对函数能够判断两个多边形是否发生碰撞(并且您可以回滚它们)感到满意,那么解决方案就不那么难了。您只需要检查多边形的任意两条边是否相互交叉。这可以通过一些数学运算来完成,对于大的形状或大量多边形,它会侵蚀性能。要解决此问题,可以使用空间分区和边界卷

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

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


边界框很容易实现,但不是很精确。使用多边形本身的实际边更精确,但更难处理,速度也慢得多。

可能重复@jbabey,我不确定这是否是该问题的重复——这里,OP指定了多边形到多边形的要求,而建议的重复似乎(隐式地)只涉及矩形碰撞。不过,我承认这很难判断,因为相关问题忽略了所用形状的范围;我假设它们是严格的矩形,因为提问者特别提到了
div
s。谢谢你,但是什么数学?这对我没什么帮助,因为你不可能“不做数学就做”,包括一些开始的线索,这足够了吗?我喜欢,我会投赞成票,但这并不能完全解决我的问题。我不仅需要检查一条线是否相交,还需要检查一个对象是否已经在对象内部并且需要移出对象。我还需要检查这一点来处理没有直线作为边/边界的形状。还有弯曲的任意多边形吗?有很多关于这个主题的博士论文,非常复杂。你可能想看看-但也取决于它的用途,你可能想开始考虑一些近似值,比如前面提到的边界框概念,或者你可以尝试三角化多边形,这样做,使用基本的几何边界框是一个明显且极不准确的解决方案,除非你有一个非常接近矩形的多边形。在任何情况下,具有标准形状(即六边形、五边形)的多边形将比长方体更接近圆……同意,在这种情况下,您可以在运行前决定执行什么操作或执行每边碰撞模型,或者使用圆或椭圆作为边界体积。