javascript - 使用 HTML5 和 JavaScript 进行碰撞检测的最佳方法？

Question

我正在尝试使用纯 HTML5 和 JavaScript 制作一款小型平台游戏。没有框架。

所以为了让我的 Angular 色跳到敌人和地板/墙壁等上面，它需要一些适当的碰撞检测算法。

因为我通常不喜欢这样做。我真的不知道如何解决这个问题。

我是否应该在每一帧(它以 30 FPS 的速度运行)中重新检查 Canvas 中的所有障碍物，看看它是否与我的播放器发生碰撞，还是有更好更快的方法来做到这一点？

我什至想到了制作动态 map 。因此，障碍物的宽度、高度、x 和 y 坐标存储在一个对象中。这样会不会更快地检查它是否与玩家发生碰撞？

Answer 1

1。我是否应该重新检查每一帧(以 30 FPS 运行)？

谁说它以 30 FPS 运行？我在 HTML5 specification 中没有找到这样的东西.最接近您对帧率有任何看法的是以编程方式调用 setInterval或较新的，更受欢迎，requestAnimationFrame功能。

然而，回到这个故事。您应该始终尽可能多地寻找碰撞。通常，在其他具有更强测量 CPU 负载能力的平台上编写游戏，如果 CPU 难以效仿，这可能是您可能会发现有利于缩减一些的事情之一。但是在 JavaScript 中，如果您尝试实现像这样的高级解决方案，您会很不走运。

我不认为这里有捷径。如果您不自己进行计算，计算机将无法知道碰撞的原因、方式、时间和地点。是的，这通常是在绘制每个新帧之前完成的，即使不是始终如此。

2。动态 map ？

如果您所说的“映射”是指类似数组的对象或将坐标映射到对象的多维数组，那么简短的回答必须是否。但请务必在场景中放置一组所有 对象。对象的宽度、高度和坐标应存储在对象中的变量中。泄漏这些东西很快就会成为一种负担；使代码变得复杂并引入错误(请参阅 separation of concerns 和 cohesion )。

请注意，我刚才说的是“场景中所有对象的数组”=)这句话中有一个微妙但最重要的观点:

每当您走过物体以确定它们的位置以及它们是否与某人发生碰撞时。还要查看视口(viewport)边界并确定对象是否仍在“场景中”。例如，如果你有某种 spaceship 模拟器，一颗星星刚刚从玩家的视口(viewport)从一侧经过屏幕的另一侧，然后又经过屏幕，并且星星无法返回并再次可见，那么明星没有理由再被留在系统中。他应该被删除和删除。他绝对不应该被存储在一个数组中，成为 future 与玩家 Angular 色碰撞检测的一部分!这些事情可能会大大降低您的游戏速度。

奖励:碰撞快速提示

1. 将屏幕分成几个部分。如果其中一个在屏幕左侧，另一个在屏幕右侧，则没有理由寻找两个对象之间的碰撞。您也可以将屏幕分成更多的逻辑单元，而不仅仅是左右。

2. 始终努力首先进行廉价计算。我们在上一个提示中已经这样做了。但是，即使您现在知道两个物体可能会相互碰撞，也要在您的物体周围画出两个合乎逻辑的正方形。例如，假设您有两架 2D 飞机，那么您没有理由先查看它们机翼的某些部分是否发生碰撞。在每架飞机周围画一个正方形，有效地捕获它们的最大宽度和最大高度。如果这两个方 block 不重叠，那么就像上一个提示一样，您知道它们不会相互碰撞。但是，如果您的第一阶段廉价计算暗示它们可能发生碰撞，请将这两架飞机传递给另一个更昂贵的计算，以真正深入研究这个问题。