javascript游戏中的异步/变量框架

Question

这也许是一个愚蠢的/先前回答过的问题，但它已经困扰了我和我的朋友一段时间，我一直找不到一个好的答案。

现在，我让我所有的JS帆布游戏都在滴答作响。例如：

function tick(){
//calculate character position
//clear canvas
//draw sprites to canvas
if(gameOn == true)
    t = setTimeout(tick(), timeout)
}

这对于高端系统上的CPU-cheep游戏来说很好，但是当我试图画出更多的每一个滴答时，它就开始以慢动作运行。所以我的问题是，，我如何保持x，y位置和命中检测计算的全速，同时允许一个可变帧？。

附带注意:我尝试过使用requestAnimationFrame API，但老实说，它有点让人困惑(不是所有关于它的好教程)，虽然它可能会加快您的处理速度，但它并不能完全解决问题。

谢谢各位-任何帮助都是非常感谢的。

Answer 1

RequestAnimationFrame使产生了很大的差异。这可能是解决你的问题的方法。还有两件事你可以做:建立第二个滴答系统来处理模型的一面，例如命中检测。一个很好的例子就是PhysiJS是如何做到这一点的。它更进一步，使用了一些新浏览器的特性，称为worker。它允许您使用第二个CPU核心。John有一个很好的教程。但请注意，这是复杂的，没有很好的支持(因此，错误，它往往崩溃了很多)。

真的，请求动画框架非常简单，它只是几行，一旦你设置好，你就可以忘记它了。它不应该改变你现有的任何代码。理解代码所做的工作有点困难，但是您可以为示例大量剪切和替换您的setTimeout代码。如果你问我，setTimeout也一样复杂！除了setTimeout有延迟时间外，它们实际上也做了相同的事情，而requestAnimationFrame却没有--它只是在函数准备好时调用您的函数，而不是经过一段时间之后。

Answer 2

你不是真的在用滴答。令人烦恼的是，您一次又一次地调用tick()。您需要删除()，只需亲自离开setTimeout(tick,timeout);，我喜欢使用arguments.callee显式声明函数调用自己(从而消除了知道函数名称的依赖性)。

尽管如此，在实现可变帧速率时，我喜欢做的是尽可能简化底层引擎。例如，为了使一个球在墙上弹跳，我检查从球的前一个位置到下一个位置的线是否碰到了墙壁，如果是的话，是什么时候。

尽管如此，您需要小心，因为有些浏览器在打开配置菜单(或任何其他菜单)时会停止所有JavaScript执行，因此在两个“帧”之间可能会有几秒钟甚至几分钟的间隔。就我个人而言，我认为在大多数情况下，基于帧的时间安排是可行的。

Answer 3

就像科林克提到的。setTimeout看起来像个窃听器。假设它只是一个错误，而实际上不是一个bug，我会说，真正放慢代码速度的不太可能是动画本身(也就是说，DOM更新)。

多少钱多一点？我一次在屏幕上动画了数百个元素，在1.2GHzAtomnetbook上的IE7上，VMWare中的元素取得了很好的效果(我在最慢的机器上有最慢的浏览器，VMWare是因为我使用Linux)。

在我的经验中，如果没有正确地执行命中检测，那么当您正在动画的元素数量增加时，会导致最大的减速。这是因为简单的实现本质上是指数型的(它将尝试进行n^n比较)。方法是过滤掉比较，以避免不必要的比较。

在游戏引擎(不管语言如何)中，最常见的方法之一就是将你的世界地图分割成一组较大的网格。然后，您只对同一网格中的项进行命中检测(如果您想要更精确的话，则执行相邻网格)。这大大减少了您需要进行比较的次数，特别是当您有大量字符时。