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から:

コールバック メソッドには、1 つの引数 DOMHighResTimeStamp が渡されます。この引数は、再描画がスケジュールされている時間をミリ秒単位で示しますが、最小精度は 10 マイクロ秒です。

上記のタイムスタンプは、必要なものだけで、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 に答える