javascript - 仅在帧速率允许时在 html5 canvas 中渲染特效

Question

我按如下方式设置我的游戏循环:

    window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame   ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    (function gameLoop() {
        var time                =   new Date().getTime();
        var dt                  =   (time - prevFTime) / 1000.0;
        prevFTime               =   time;

        state.effectsOn         =   dt > 1 / 60.0 ? true : false;
        state.effectsOn         =   false;

        //game rendering logic goes here

        window.requestAnimFrame(gameLoop);
    })();

现在我想做的是如果 effectsOn变量被设置为良好的帧率，然后我将在我的游戏中渲染一些特殊效果。如果没有，我将跳过渲染这些特殊效果。

但我明显的问题是，如果 dt>1/60 effectsOn 设置为 true。我将渲染特殊效果，这会导致渲染时间增加，因此有可能制作 dt < 1/60从而使 effectsOn 变为 false。

有什么好的替代方法可以实现我想要做的事情吗？

在最坏的情况下，我可以在主菜单中设置一个复选框之类的东西，让用户决定是否渲染特效...

Answer 1

最初只保留特殊效果。

如果在前 n 帧之后平均渲染时间太长，请将其关闭并保持关闭状态。