问如何检测HTML5画布中任何形状的碰撞？

EN

正确的方法是使用物理引擎。就像：

https://brm.io/matter-js/

然而，对于一个简单的游戏来说，这可能是太过分了。以下是碰撞检测的基础知识。

1. 您知道所有您控制的对象的坐标和大小。
2. 在每次移动之后，获取每个对象的周长坐标。每个对象都将有一个点数组，将其perimeter.
3. Compare标记为数组，并查看两个数组中是否存在相同的坐标。

这是最基本的。对于一个实用的游戏，您需要对此代码进行大量的增强。但你可以在这一步之后找出答案。

取决于个人喜好。其中之一就是距离探测。

检查两个对象(或所述对象的和弦)之间的距离，如果足够接近，将其计算为命中。您也可以这样检查重叠，这是一个明确的命中。那就用你想申请的物理吧。

HTML画布只负责通过web浏览器显示您的“游戏”。您需要利用一些编程逻辑来决定要在画布中呈现什么。就冲突实现而言，它将取决于您希望创建什么。

我们假设这是一个二维平面，物体向四面八方运动。在此假设下，一种实现可能是将位置坐标附加到游戏中的每个对象，并以“全局”游戏状态始终跟踪每个对象坐标。您可以对每个对象的位置执行计算，并触发满足特定阈值的对象之间的冲突。

实现可能因您希望构建的内容而异，但是this链接可能很有用。希望这能有所帮助！