Javascript HTML5画布游戏获胜'；当浏览器未处于焦点时，请不要暂停渲染

我的朋友和我正在制作一个游戏，根据一些早期的测试，requestAnimationFrame（）将确保游戏在未聚焦时暂停。在我们当前的游戏中，您可以看到，即使在不聚焦的情况下，它也会不断渲染所有内容。这是我们用来处理渲染的：

//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();

---

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

我想你找错方向了

•应用程序被勾选时，RequestAnimationFrame不会停止触发。
但“实时”时间一直在运行。因此，当浏览器恢复时，您的增量将是巨大的，很可能使您的移动/物理/。。。。化为乌有

•因此，第一件事：夹紧三角板。两方面都有。如果它在50ms以上，你必须被标记出来，所以考虑，比如说，16ms过去了。但是对于非常快的显示（比如120Hz，有些人有这种），太小的增量会让电脑的风扇发疯，所以请检查一下，比如14ms，以避免过热/风扇转动/电池耗尽。您可能希望处理一个“游戏时间”，即游戏中经过的时间

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;

    ...

var gameTime=0；
var-typicalFrame=16；
var smallestFrame=14；
var longestFrame=50；
var main=函数（）{
var now=Date.now（）；
var delta=现在-那时；
如果（delta最长帧）delta=典型帧；
游戏时间+=增量；
然后=现在；
...

•第二件事：即使上面的建议可能足够了，事实上，当你失去注意力时，你可能想适当地暂停游戏。第一个想到的例子是音乐，你可能想停下来（做吧！当你甚至不知道哪个标签在播放音乐时，这太无聊了！！）.第二个例子是一个网络游戏，服务器希望知道玩家不再玩了。

---

这并不是很难做到：只需处理window.onblur和window.onfocus事件，并在此处执行您认为合适的操作，以停止游戏时钟、音乐等。我认为您看错了方向

•应用程序被勾选时，RequestAnimationFrame不会停止触发。
但“实时”时间仍在运行。因此，当浏览器恢复运行时，您的增量将是巨大的，很可能会使您的移动/物理/…付诸东流

第一件事：三角洲被钳制。在两种情况下，如果它在50ms以上，你必须被标记出来，所以考虑，比如说，16ms过去了。但是对于非常快的显示（像120赫兹，有些人有这个）。，太小的增量将使计算机的风扇疯狂，因此请检查它，例如14ms，以避免过热/风扇转动/电池耗尽。您可能希望处理一个“游戏时间”，即游戏中经过的时间

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;

    ...

var gameTime=0；
var-typicalFrame=16；
var smallestFrame=14；
var longestFrame=50；
var main=函数（）{
var now=Date.now（）；
var delta=现在-那时；
如果（delta最长帧）delta=典型帧；
游戏时间+=增量；
然后=现在；
...

•第二件事：即使上面的建议可能足够了，事实上，当你失去注意力时，你可能想适当地暂停游戏。第一个想到的例子是音乐，你可能想停下来（做吧！当你甚至不知道哪个标签在播放音乐时，这太无聊了！！）.第二个例子是一个网络游戏，服务器希望知道玩家不再玩了。

---

这并不难做到：只需处理window.onblur和window.onfocus事件，并在此处执行您认为合适的操作，以停止游戏时钟、音乐等

当浏览器失去焦点时，是否有暂停更新的逻辑？我在此处看不到。

requestAnimationFrame（）

在选项卡失去焦点时停止。在这种情况下会停止。但是，为了防止出现相关问题，您也可以在现代浏览器中使用。window.requestAnimationFrame（）在未呈现选项卡时不会运行。window.requestAnimationFrame（）将提供~60fps，因此您不需要跟踪增量时间。只需跟踪帧计数。当选项卡未渲染窗口时。requestAnimationFrame（）未运行，因此帧计数不会增加。当选项卡再次渲染时，它将正常运行。不测试实时信任窗口。requestAnimationFrame（）会给你~60fps.frameCount/60=游戏中非实时的秒数。你有在浏览器失去焦点时暂停更新的逻辑吗？我在这里看不到。

requestAnimationFrame（）

在选项卡失去焦点时停止。在这种情况下会停止。但是，为了防止出现相关问题，您也可以在现代浏览器中使用。window.requestAnimationFrame（）在未呈现选项卡时不会运行。window.requestAnimationFrame（）将提供~60fps，因此您不需要跟踪增量时间。只需跟踪帧计数。当选项卡未渲染窗口时。requestAnimationFrame（）未运行，因此帧计数不会增加。当选项卡再次渲染时，它将正常运行。不测试实时信任窗口。requestAnimationFrame（）会给你~60fps.frameCount/60=游戏中非实时的秒数。谢谢你的信息！这将非常有用！谢谢你的信息！这将非常有用！