使用HTML5和JavaScript进行冲突检测的最佳方法？

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

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

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

我应该在每一帧中以30 FPS的速度重新检查画布上的所有障碍物，看看它是否与我的播放器发生碰撞，还是有更好更快的方法

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

1。我是否应该重新检查它以30 FPS的速度运行的每一帧？ 谁说它以每秒30帧的速度运行？我在图书馆里没有发现这样的东西。关于帧速率，最接近的说法是通过编程方式调用或新的、更受欢迎的函数

然而，回到故事。你应该尽可能多地寻找碰撞。通常，在其他平台上编写游戏时，如果你有更大的能力来测量CPU负载，那么如果CPU很难跟上的话，你可能会发现这是一件有利于缩减一些负载的事情。但是，在JavaScript中，如果您尝试实现像这样的高级解决方案，那就太不走运了

我认为这里没有捷径。如果你不亲自计算的话，计算机无法知道什么碰撞，如何碰撞，何时碰撞，在哪里碰撞。是的，这通常是，如果不是在任何时候都是，在每一个新的框架被粉刷之前

2.动态地图？ 如果“贴图”是指类似于数组的对象或将坐标映射到对象的多维数组，那么简短的回答必须是“否”。但请确实拥有场景中所有对象的数组。对象的宽度、高度和坐标应存储在对象的变量中。泄露这些东西很快就会成为一种负担；呈现复杂的代码并引入错误，请参见和

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

每当你穿过物体以确定它们的位置以及它们是否与人碰撞时。还可以查看视口边界并确定对象是否仍在场景中。例如，如果你有一个某种类型的宇宙飞船模拟器，一颗恒星刚刚从玩家的视窗的一边传到另一边，然后又从屏幕的另一边，而恒星无法返回并再次可见，那么恒星就没有理由再留在系统中了。他应该被删除和删除。他绝对不应该被存储在阵列中，而应该成为未来与玩家化身碰撞检测的一部分！这样的事情会大大降低你的比赛速度

奖励：碰撞快速提示 把屏幕分成几个部分。如果两个对象中的一个位于屏幕左侧，而另一个位于屏幕右侧，则没有理由查找它们之间的碰撞。您可以将屏幕拆分为更多的逻辑单元，而不仅仅是左和右

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

1.我是否应该重新检查它以30 FPS的速度运行的每一帧？ 谁说它以每秒30帧的速度运行？我在图书馆里没有发现这样的东西。关于帧速率，最接近的说法是通过编程方式调用或新的、更受欢迎的函数

然而，回到故事。你应该尽可能多地寻找碰撞。通常，在其他平台上编写游戏时，如果你有更大的能力来测量CPU负载，那么如果CPU很难跟上的话，你可能会发现这是一件有利于缩减一些负载的事情。但是，在JavaScript中，如果您尝试实现像这样的高级解决方案，那就太不走运了

我认为这里没有捷径。如果你不亲自计算的话，计算机无法知道什么碰撞，如何碰撞，何时碰撞，在哪里碰撞。是的，这通常是在每一个新帧之前完成的，如果不是一直都是这样的话 这幅画是画的

2.动态地图？ 如果“贴图”是指类似于数组的对象或将坐标映射到对象的多维数组，那么简短的回答必须是“否”。但请确实拥有场景中所有对象的数组。对象的宽度、高度和坐标应存储在对象的变量中。泄露这些东西很快就会成为一种负担；呈现复杂的代码并引入错误，请参见和

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

每当你穿过物体以确定它们的位置以及它们是否与人碰撞时。还可以查看视口边界并确定对象是否仍在场景中。例如，如果你有一个某种类型的宇宙飞船模拟器，一颗恒星刚刚从玩家的视窗的一边传到另一边，然后又从屏幕的另一边，而恒星无法返回并再次可见，那么恒星就没有理由再留在系统中了。他应该被删除和删除。他绝对不应该被存储在阵列中，而应该成为未来与玩家化身碰撞检测的一部分！这样的事情会大大降低你的比赛速度

奖励：碰撞快速提示 把屏幕分成几个部分。如果两个对象中的一个位于屏幕左侧，而另一个位于屏幕右侧，则没有理由查找它们之间的碰撞。您可以将屏幕拆分为更多的逻辑单元，而不仅仅是左和右

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

---

我仍然在做一些我想做很多div的东西，让它们在物理上发挥作用。我将分享一些起初对我来说并不明显的事情

首先检测数据中的冲突。我在屏幕上读x和y框，然后对照其他div进行检查。一周后，我突然意识到这是多么愚蠢。我的意思是，首先我会给div分配一个新值，然后从div读取它。访问div很昂贵。将dom视为渲染阶段。 如果可能的话，请使用webworkers。 如果可能，使用画布。 如果可能的话，让元素携带一个元素列表，它们应该被检查以防冲突。这只在某些情况下有用。 我了解到交互碰撞的成本要高得多。因为在正常的交互中，您必须检查环境中的变化，然后模拟将来将要发生的事情，因此您的动画将更流畅，cpu可用性也更高

---

我很早就做了一些东西，只是为了好玩：

我还在做一些我想做很多div的东西，让它们在物理上发挥作用。我将分享一些起初对我来说并不明显的事情

首先检测数据中的冲突。我在屏幕上读x和y框，然后对照其他div进行检查。一周后，我突然意识到这是多么愚蠢。我的意思是，首先我会给div分配一个新值，然后从div读取它。访问div很昂贵。将dom视为渲染阶段。 如果可能的话，请使用webworkers。 如果可能，使用画布。 如果可能的话，让元素携带一个元素列表，它们应该被检查以防冲突。这只在某些情况下有用。 我了解到交互碰撞的成本要高得多。因为在正常的交互中，您必须检查环境中的变化，然后模拟将来将要发生的事情，因此您的动画将更流畅，cpu可用性也更高

---

我很早就做了一件事，只是为了好玩：

穆罕默德，很抱歉对你的答案投了反对票。真的。但我别无选择。最重要的是，你所写的与这个问题无关。卡尔船长已经选择了画布API。他不是在一页纸上处理div。我必须说，你的清单第4项，可能与这个问题有关，是一个糟糕的设计。这不仅对游戏不利，而且对所有类型的应用程序都不利。你正在跨域泄漏信息，这就像自找麻烦。遗憾的是，我无法在评论中详细阐述和解释游戏逻辑的生命周期。谢谢分享！嗯，好的。你能解释一下吗

---

how 4是个坏主意。请阅读和。知道耦合有时是一件令人向往的事情。比较链表的数据结构。每个元素都应该有一个指向下一个元素的指针。只有最后一个元素尾部必须有空指针。在您的示例中，我们讨论的是DOM元素。很明显，如果我可以这样说的话，他们不应该知道还有谁应该被检查。这完全是游戏逻辑的一部分。我忘了添加这一点，这只适用于非交互式模拟动画。就像下雨一样。用户无法采取行动的地方。让两个盒子以相同的速度朝相反的方向移动，两者都不必担心在非交互环境中相互碰撞。但若它是动态的，那个么若用户点击那个盒子，它开始以更快的速度向另一个盒子的方向移动，最终可能会发生碰撞，所以他们需要检查它。由于环境可能随时发生变化，他们需要不断检查。此外，dom元素除了js表示之外什么都不知道。驱动模拟的是什么，实际上没有人关心。目前它是自动化的，但在一周的时间内，它可能就像一个分布式游戏中的1000个用户一样。您的逻辑计算引擎或JavaScript模块有唯一的责任知道并关心哪些div与哪些其他div冲突。继续你的雨滴例句：雨滴自己一点也不了解自己的外部世界。他们甚至不应该知道重力。另一方面，他们应该知道自己的体重。重量依次被行星用来计算它们的重力。穆罕默德，我很抱歉对你的答案投了反对票。真的。但我别无选择。最重要的是，你所写的与这个问题无关。卡尔船长已经选择了画布API。他不是在一页纸上处理div。我必须说，你的清单第4项，可能与这个问题有关，是一个糟糕的设计。这不仅对游戏不利，而且对所有类型的应用程序都不利。你正在跨域泄漏信息，这就像自找麻烦。遗憾的是，我无法在评论中详细阐述和解释游戏逻辑的生命周期。谢谢分享！嗯，好的。你能解释为什么4是个坏主意吗？请阅读和。知道耦合有时是一件令人向往的事情。比较链表的数据结构。每个元素都应该有一个指向下一个元素的指针。只有最后一个元素尾部必须有空指针。在您的示例中，我们讨论的是DOM元素。很明显，如果我可以这样说的话，他们不应该知道还有谁应该被检查。这完全是游戏逻辑的一部分。我忘了添加这一点，这只适用于非交互式模拟动画。就像下雨一样。用户无法采取行动的地方。让两个盒子以相同的速度朝相反的方向移动，两者都不必担心在非交互环境中相互碰撞。但若它是动态的，那个么若用户点击那个盒子，它开始以更快的速度向另一个盒子的方向移动，最终可能会发生碰撞，所以他们需要检查它。由于环境可能随时发生变化，他们需要不断检查。此外，dom元素除了js表示之外什么都不知道。驱动模拟的是什么，实际上没有人关心。目前它是自动化的，但在一周的时间内，它可能就像一个分布式游戏中的1000个用户一样。您的逻辑计算引擎或JavaScript模块有唯一的责任知道并关心哪些div与哪些其他div冲突。继续你的雨滴例句：雨滴自己一点也不了解自己的外部世界。他们甚至不应该知道重力。另一方面，他们应该知道自己的体重。重量反过来被行星用来计算它们的重力。老实说，你的答案和我发现它的方式差不多。以这样完整的方式对其进行备份是件好事。谢谢你的评论！老实说，你的答案和我发现的差不多。以这样完整的方式对其进行备份是件好事。谢谢你的评论！