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

Question

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

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

因为我通常不会这样做。我真的不知道如何处理这个问题。

我应该对画布中的所有障碍物进行每一帧（它以30 FPS运行）的重新检查，看看它是否与我的播放器发生碰撞，还是有更好更快的方法呢？

我甚至想过制作动态地图。因此，障碍物的宽度，高度，x和y坐标存储在对象中。这样可以更快地检查它是否与玩家发生冲突吗？

Answer 1

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

谁说它以30 FPS运行？我在HTML5 specification中找不到这样的东西。最接近您可以对帧速率进行任何说法，以编程方式调用setInterval或新的，更首选的requestAnimationFrame函数。

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

我认为这里没有捷径。如果你不自己进行计算，计算机无法知道碰撞的内容，方式，时间和地点。是的，这通常是，如果不是在所有时候，甚至在每个新帧被绘制之前完成。

2。动态地图？

如果“map”是指类似于数组的对象或将坐标映射到对象的多维数组，那么简短的答案必须是否。但请在场景中有一系列所有对象。对象的宽度，高度和坐标应存储在对象中的变量中。泄漏这些东西很快就会成为负担;渲染代码复杂并引入错误（请参阅separation of concerns和cohesion ）。

请注意我刚刚说过“场景中所有对象的数组”=）这句话中有一个微妙但最重要的一点：

每当你走过物体来确定它们的位置以及它们是否与某人相撞时。还要查看视口边界并确定对象是否仍处于“现场”状态。例如，如果你有一个某种类型的太空飞行器模拟器，一个星星只是将玩家的视口从一侧传递到另一侧然后再从屏幕传递，并且星星无法返回并再次可见，那么没有理由让这位明星不再留在系统中。他应该被删除并删除。绝对不应该存储在阵列中，并成为未来与玩家头像碰撞检测的一部分！这样的事情可能会大大减慢你的游戏速度。

奖励：碰撞快速提示

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

2. 始终努力首先进行廉价计算。我们在最后一个提示中已经做到了。但即使您现在知道两个对象可能彼此碰撞，也要在对象周围绘制两个逻辑方块。例如，假设你有两架2D飞机，那么你没有理由先看看它们的某些部分是否会发生碰撞。在每架飞机周围画一个正方形，有效地捕捉它们最大的宽度和最大的高度。如果这两个方格没有重叠，那么就像在最后一个提示中一样，你知道它们不会相互碰撞。但是，如果你的第一阶段廉价计算暗示它们可能处于碰撞状态，那么将这两架飞机传递给另一个更昂贵的计算机，以便更加深入地研究这个问题。

Answer 2

我仍在研究一些我想制作大量div并让它们按照物理学行事的东西。我将首先分享一些对我来说并不明显的事情。

1. 首先检测数据中的冲突。我正在屏幕上阅读x和y框，然后检查其他div。一个星期后，我发现这是多么愚蠢。我的意思是首先我会为div分配一个新值，然后从div读取它。访问div很昂贵。将dom视为渲染阶段。
2. 尽可能轻松使用网络工作者。
3. 如果可能，请使用画布。
4. 如果可能的话，make元素会带有一个元素列表，应该针对它们进行检查。（这在某些情况下会有所帮助。）

我了解到交互式碰撞更加昂贵。因为你必须在正常的交互中检查环境的变化，你可以模拟将来会发生什么，因此你的动画会更流畅，更有可用的cpu。

为了好玩，我做了一件非常早期的事情：http://www.lastnoob.com/