2

我正在使用 JavaScript 开发游戏，并且我有一个游戏循环设置requestAnimationFrame：

loop: function () {

    game.updateSomething();

    if (game.running) {
        game.tick++;
        requestAnimationFrame(game.loop);
    }
},

我的游戏有一个工作循环，我可以移动物体，这很好，但是如果我想将这个循环内的动作限制为每秒，我该如何实现呢？我是否必须用 记下每个刻度的时间new Date()，然后将其与我在上一个循环生成中计算的时间进行比较，并测试差异？像这样：

latest: null,

loop: function () {

    var last = this.latest;
    this.latest = new Date().getTime();
    var every = 200;

    if (Math.floor(last/every) != Math.floor(this.latest/every)) {
        console.log('do something');
        game.updateSomething();
    };

    if (game.running) {
        game.tick++;
        requestAnimationFrame(game.loop);
    }
},

这看起来真的很乱，即使我将它包装在一个函数中，当该滴答的地板时间不同时返回true，它只是感觉不对......我尝试谷歌搜索，但我找不到任何解决这个问题的方法具体来说。

其他 JavaScript 游戏如何处理需要定期发生的事情，这些事情也存在于主游戏循环中？

4

1 回答 1

0

来自MDN：

回调方法被传递一个参数，一个 DOMHighResTimeStamp，它指示时间，以毫秒为单位，但最小精度为 10 µs，重新绘制计划发生的时间。

上述时间戳可用于测量 raf 调用之间的时间，这正是您所需要的：

var last = sec = dev = 0,
    every = 1000;

var cycle = function (stamp) {
    if (stamp - last >= every - dev) {
        last = stamp;
        sec++;
        dev = last - sec * every;
        console.log(sec+" sec, deviation: " + dev);
    }
    requestAnimationFrame(cycle);
};

requestAnimationFrame(cycle);

控制台输出：

[13:09:55.790] "1 sec, deviation: 14"
[13:09:56.786] "2 sec, deviation: 12"
[13:09:57.782] "3 sec, deviation: 10"
[13:09:58.779] "4 sec, deviation: 9.000000000000455"
[13:09:59.777] "5 sec, deviation: 7"
[13:10:00.776] "6 sec, deviation: 6"
[13:10:01.773] "7 sec, deviation: 4"
[13:10:02.773] "8 sec, deviation: 3"
[13:10:03.773] "9 sec, deviation: 1"
[13:10:04.787] "10 sec, deviation: 15"
[13:10:05.786] "11 sec, deviation: 13"

示例小提琴。

于 2013-11-04T05:30:38.297 回答