JavaScript Canvas 复杂形状碰撞答案

【问题标题】：JavaScript Canvas Complex Shape CollisionJavaScript Canvas 复杂形状碰撞
【发布时间】：2017-06-27 21:44:39
【问题描述】：

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

【问题讨论】：

除非您向我们展示您的代码，否则我们无法为您提供帮助。
@ScottMarcus 为什么需要我的代码？
因为每个问题都有很多方法。查看您正在使用的代码可以让我们给出更好的答案。
@ScottMarcus 我目前无法访问我的代码，但如果您愿意，我可以概述一下我的程序。
如果复杂的形状是由简单的形状组成的，并且你知道如何检测简单形状中的碰撞，那么…………还有MCV。 ;)

标签： javascript html canvas collision-detection

【解决方案1】：

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

通常，对于复杂（即复合）形状，您通常会尝试作为第 1 步并“提前退出”测试。出于优化原因，您通常会尝试在流程中尽早消除误报。

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

如果边界框测试不能及早消除，您将需要使用最适合形状的算法（圆-圆、圆-矩形等）依次测试每个子形状，将最“昂贵”的测试留给最后 - 像多边形多边形。

您可能还想看看这个问题How do I determine if two convex polygons intersect?

【讨论】：

感谢您的回答。我将尝试在我的程序中实现这一点。此外，除了边界框之外，我还可以使用其他“误报”来测试吗？
另一个可能有用的优化（取决于您的应用程序）是将您的空间划分为扇区或网格。然后，您只需要测试可能重叠的候选者，即甚至在边界框测试之前就消除测试。例如，如果您将游戏世界划分为一个 10x10 的网格，那么完全包含在网格 (0, 0) 中的那些复合形状只需相互测试，而消除所有其他形状。注意注意形状跨越网格边界的极端情况
是的，这些都很好用。除非您在任何时候都有很多演员/形状处于活动状态，否则可能会过度杀伤力。见mikechambers.com/blog/2011/03/21/…
那么您在第一条评论中所指的是 QuadTree 吗？如果不是，有什么区别？
我说的是一种更简单的空间分割技术。这真的很基本 - 您不需要针对每个其他复合形状对每个可能的复合形状进行边界框测试。相反，您可以根据它们所在的网格框来决定哪些形状可能重叠。完全包含在不同框中的那些形状不能重叠。它是四叉树精简版。同样，配置完全取决于您的应用程序。