javascript - 在 JavaScript 游戏中使用 setInterval 代替 requestAnimationFrame

Question

我正在构建一个静态增量/磨练游戏。我制作了一些动画(资源在清除 Lv 后掉落和弹跳、 float 文本、生命条、某些项目闪烁等)。这是游戏 -> https://krle997.github.io - 对不起， self 广告，如果违反规则，我会放下链接

今天我发现了 requestAnimationFrame 并决定尝试一下，因为每个人都说它比 setInterval 好得多。它确实看起来和感觉起来更干净，并且比 setInterval 更容易编写代码，但又让我头疼:

我的生命条无法显示，其他动画始终设置为 60FPS/144 FPS(FPS 可以在游戏设置中更改)。如果玩家在另一个选项卡上失去焦点，这将是一个特别大的问题......

setInterval 也不是最好的解决方案。当选项卡失去焦点时，它会锁定到 1 FPS 或其他东西，幸运的是我用这个 https://github.com/turuslan/HackTimer 修复了这个问题。

我应该坚持使用 HackTimer 和 setInterval，还是应该尝试转向 reqestAnimationFrame？我正在开发一款视频游戏(针对 PC)，所以我想要流畅的生命值栏和动画，以及尽可能多的帧。

当今的计算机如此强大，这些东西还重要吗？

感谢您的回复，欢迎提出意见，祝您有美好的一天

Answer 1

FPS 应该是无关紧要的。 :-) 而且您也不应该破解计时器(这很好，因为浏览器在非事件选项卡中回拨计时器处理是有原因的，尤其是在移动设备上)。

您尚未包含您的逻辑，但您似乎正在以固定增量更新您的状态，以响应每个计时器/RAF 回调。那就是你出错的地方。 :-) 相反，根据自上次更新以来实际耗时来更新您的状态。然后使用 RAF 在 DOM 中反射(reflect)更改后的状态。

现在，您不必关心更新之间的间隔是 16.6 毫秒(约 60 FPS)还是整整一秒；您只需进行相应更新即可。

以下是每次回调按固定金额更新计数器的示例:

var time = document.getElementById("time");
var counter = 10000;
setInterval(function() {
  --counter;
  time.innerHTML = String(counter);
}, 1000);

<div id="time"></div>

该计数器的速度会根据主 UI 线程上发生的其他事情、计时器是否受到限制等而有所不同。随着时间的推移，它会偏离每秒准确倒计时一次。

相反，它应该根据自上次更新以来的时间来更新计数器，以防回调受到限制:

var time = document.getElementById("time");
var counter = 10000;
var lastUpdate = Date.now();
setInterval(function() {
  var now = Date.now();
  var elapsed = now - lastUpdate;
  lastUpdate = now;
  counter -= elapsed / 1000;
  time.innerHTML = String(Math.floor(counter));
}, 1000);

<div id="time"></div>