javascript - 如何将 setInterval 转换为 requestAnimationFrame

Question

有一个名为 Gustavo Carvalho 的人在 stackoverflow 上发布了一篇文章，展示了相机/视口在 HTML5 游戏中的工作原理。

除了使用 setInterval 代替 requestAnimationFrame 之外，一切都很好。

我尝试转换为 requestAnimationFrame 没有成功:-(

有人可以帮忙吗？这是帖子：

简单的 HTML5 游戏相机/视口

非常感谢！

编辑：查看下面的答案后，我想出了这个解决方案：

替换以下代码...

 // Game Loop
    var gameLoop = function(){                      

        update();
        draw();
    }   

    // <-- configure play/pause capabilities:



    var runningId = -1;

    Game.play = function(){

        if(runningId == -1){


                //Use setInterval instead of requestAnimationFrame for compatibility reason
            runningId = setInterval(function(){
                gameLoop();
            }, INTERVAL);



            console.log("play");

        }

    }

    Game.togglePause = function(){      
        if(runningId == -1){
            Game.play();
        }
        else
        {
            clearInterval(runningId);
            runningId = -1;
            console.log("paused");
        }
    }   

    // -->

换成这个...

// Game Loop
    var gameLoop = function(){                      

        if(gameStatus == 'play'){

            update();
                draw();

        }

        window.requestAnimationFrame(gameLoop);

    }   


    var gameStatus = 'play';

    Game.play = function() {

        gameLoop();

    }




    Game.togglePause = function() {

        if(gameStatus == 'play'){

            gameStatus = 'pause';

            console.log(gameStatus);
        }
        else if(gameStatus == 'pause'){

            gameStatus = 'play';

            console.log(gameStatus);

        }



    }

Answer 1

对 requestAnimationFrame 函数的调用必须在其第一个参数中实际提供循环，这恰好是一个函数。所以粗略地说，做这样的事情：

    function draw() {
      // some drawing on a canvas happens here
    }

    function game_loop() {
      var callback = function(t) {
        draw();
        // loop the whole thing:)
        game_loop();
      };
      window.requestAnimationFrame(callback);
    }

Answer 2

您可以将代码的以下部分修改为：

/// add a flag as condition for loop
var isPlaying = true;

// Game Loop
function gameLoop(){                      
    update();
    draw();

    /// incorporate loop here
    if (isPlaying)
        requstAnimationFrame(gameLoop);
}   

接着：

Game.play = function(){ 
    if (!isPlaying){
        isPlaying = true;    /// enable looping
        gameLoop();          /// start loop
        console.log("play");
    }
}

Game.togglePause = function(){      
    if(!isPlaying){
        Game.play();
    }
    else
    {
        isPlaying = false;   /// this will terminate loop
        console.log("paused");
    }
}

请注意，对于最新版本的 Firefox 和 Chrome，requestAnimationFrame现在没有前缀。对于较旧的浏览器和其他浏览器，您可能需要使用polyfill。