javascript - 当浏览器未处于焦点时，HTML5 Canvas 游戏不会暂停渲染

Question

我和我的 friend 正在制作一个游戏，从一些早期的测试来看，requestAnimationFrame() 将确保游戏在未聚焦时暂停。在我们当前的游戏中，here ，您可以看到即使不在焦点上，它也会不断渲染所有内容。这是我们用来处理渲染的:

//main game loop, updates and renders the game
var main = function(){
        var now = Date.now();
        var delta = now - then;

        update(delta / 1000);
        render();

        then = now;

        requestAnimationFrame(main);
};

//updates the positions of the target and enemy
var update = function(delta){
        target.update(delta, gamecanvas);
        planet.update(delta);

        enemies.forEach(function(enemy){
                enemy.update(delta, gamecanvas)
        });
        defenders.forEach(function(enemy){
                enemy.update(delta, gamecanvas)
        });
};

//clears the screen
var clearScreen = function(){
        gamectx.clearRect(0,0,gamecanvas.width, gamecanvas.height);
};

//clears the screen, and redraws the objects
var render = function(){
        clearScreen();

        planet.draw(gamectx);
        enemies.forEach(function(enemy){
                enemy.draw(gamectx)
        });
        defenders.forEach(function(enemy){
                enemy.draw(gamectx)
        }); 
        target.draw(gamectx);
};

//updates the time, runs the main loop
var then = Date.now();
main();

有人知道出了什么问题吗？

Answer 1

我认为你看错了方向。

• 当您的应用程序退出时，RequestAnimationFrame 确实停止触发。
但“真实”时间仍在继续。因此，当浏览器恢复时，您的增量将是巨大的，很可能使您的 Action /物理/....化为 Ember 。

• 所以第一件事:钳制三 Angular 洲。在这两个方面。假设如果超过 50 毫秒，则您一定已被锁定，因此请考虑，比如说，已经过去了 16 毫秒。但对于非常快的显示(例如 120Hz，有些人有这个)，太小的增量会使计算机的风扇疯狂，因此请检查它，例如 14 毫秒，以避免过热/风扇转动/电池耗尽。您可能想要处理“游戏时间”，即游戏中耗时。

var gameTime = 0;

var typicalFrame  = 16;
var smallestFrame = 14;
var longestFrame  = 50;

var main = function(){
    var now = Date.now();
    var delta = now - then;
    if (delta<smallestFrame) return;
    if (delta>longestFrame) delta = typicalFrame;
    gameTime += delta;
    then = now;

    ...

• 第二件事:即使上面的建议可能已经足够，但事实上，当您失去焦点时，您可能希望正确暂停游戏。我想到的第一个例子是音乐，您可能想停止它(这样做!当您甚至不知道哪个选项卡正在播放音乐时，这太无聊了!!)。第二个示例是网络游戏，服务器希望知道玩家不再玩游戏。
这并不难做到:只需处理 window.onblur 和 window.onfocus 事件并执行您认为适当的操作来停止您的游戏时钟、音乐......