JavaScript画布复杂形状碰撞

Question

我正在尝试使用HTML canvas和JavaScript制作一个非常简单的游戏。 我发现了许多有关检测画布上基本形状（例如矩形和圆形）的碰撞的教程和问题。 但是我想知道是否有可能检测复杂形状（由许多基本形状组成的形状）是否与另一个形状发生碰撞，或者是否两个复杂形状发生碰撞。 如果是这样，怎么办？ 提前致谢！

Answer 1

一种通用的算法不会比专门基于每种形状类型的知识提供更好的解决方案。

通常，对于复杂的形状（即复合形状），通常应按照步骤1进行测试并“提前退出”测试。 出于优化的原因，您通常尝试在过程中尽早消除误报。

简单的步骤1是测试每种复合形状的“边界框”上的碰撞。 如果边界框未重叠，则您可以提早退出并假设不会发生碰撞，因为复合形状不会发生碰撞（请参阅https://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-定理--gamedev-169 ）

如果边界框测试无法尽早消除，则需要依次使用最适合该形状的算法（圆形-圆形，圆形-矩形等）依次测试每个子形状，从而使最昂贵的测试持续到最后-多边形-多边形。

您可能还想看看这个问题， 如何确定两个凸多边形是否相交？