Javascript 如何检测与曲线的碰撞

我正在制作一个HTML5和Javascript平台游戏。此时，地图的所有块都被处理为正方形。当块不是精确的正方形/矩形时，此方法“难看”

查看我制作的这张图片，以便更好地理解我的观点：

案例一：底部保险杠接触包围挡块的正方形，因此运动停止

案例二：如果我使用与上述相同的方法，当玩家跳跃时，移动将在“顶部保险杠”甚至触及挡块之前停止

我应该如何处理案例二？我知道我必须检查“上保险杠”是否碰撞，或者是否在曲线和其他两条边之间的区域内

这条曲线会是怎样的？如何根据块坐标（x、y）和尺寸（宽度、高度）为其生成函数

---

注意：我希望避免在曲线的每个点检查碰撞，因为这对CPU来说非常昂贵

有许多可能性，这取决于您希望碰撞的“完美”程度，以及您希望技术的便携性和劳动强度。这绝不是全面的，这些只是我个人评估的。我个人使用了前两个

使用线段来近似曲线。沿曲线创建“顶点”，并用每对顶点制作线段。您已经知道如何对轴对齐的正方形进行测试，现在开始测试您的角色点是否在碰撞器线段的“后面”（类似于检查点是否在平面的“后面”）并不是一个很大的飞跃。您可以获得令人惊讶的精确和高性能的结果（取决于生成线段的粒度），最难的部分是首先生成碰撞贴图。我选择手动定义片段，我认为这是一个错误。如果我再做一次，我可能会尝试找到一种方法来生成线段，给出一些关于我想要它们的粒度的设置

计算曲线的轮廓，并为曲线的每个像素创建1px×1px的碰撞器。这是你的碰撞图。为角色的碰撞网格使用圆或省略号，并检查碰撞器和角色之间的距离。这大大简化了计算，尽管我们讨论了很多可能的计算（每像素一次检查），但通过积极地对世界进行空间分区（bin、bsp等），可以实现很多优化。这是一种相对简单的图像边缘检测方法，所以最终的解决方案几乎是下降的。我在一个间谍猎人的模仿作品中使用了这个，艺术家非常欣赏这种只做艺术而不担心碰撞的能力

像素差异。我从来没有这样做过，但我见过关于 “pdiffing”，其中字符精灵和平铺精灵重叠 在内存中，以及不透明区域之间是否有任何重叠 无论哪种情况，它都表示发生了碰撞。取决于您的手机大小 雪碧，这可能会变得非常昂贵。它也会 可能只适用于基于平铺的游戏

---

我喜欢这个问题。如何生成曲线（和其他边界）？它们是图像还是由数学函数创建的？您希望使用多少种不同的积木？@ChadMcGrath嘿，谢谢您的回复。我想使用10-15个不同的块，它们不是完美的正方形/矩形。我使用的是PNG图像，但我也有这个图像的矢量版本（SVG），我没有使用。有一些代码用于检测与贝塞尔曲线的冲突，这是SVG用来生成它们的。本质上，它看起来像是从函数的导数中找到最小/最大值。不知道是否有javascript库，但是如果您的SVG路径没有太多的部分，我认为这是非常可行的，这取决于屏幕上有多少曲线（您的一个图像看起来只有一条曲线）。对于锯齿状的，我们只能检测线段。我们也可以通过只寻找与边界框发生碰撞的对象来作弊。Bezier曲线的一个很好的资源是第24节和第25节描述相交方法。如果只检查四个Bumber，基于像素的方法可能是最快和最简单的方法。