如何將setInterval轉換爲requestAnimationFrame

有一個名爲Gustavo Carvalho的人的stackoverflow帖子顯示了相機/視口如何在HTML5遊戲中工作。如何將setInterval轉換爲requestAnimationFrame

除了使用setInterval代替requestAnimationFrame之外，所有的都很好。？

我試圖轉換爲requestAnimationFrame沒有成功:-(

有人可以請幫助這裏的帖子：

非常感謝

編輯：！查看答案後下面，我想出了這個解決方案：

更換以下代碼...

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

     } 



    }

來源

2013-10-11 Honey Badger

試試這個例子。 http://sathyamoorthi10.blogspot.in/2012/04/html5-requestanimationframe-example.html – user10

@dystroy，我鏈接到代碼而不是粘貼是因爲在這篇文章中有一些有用的解釋，如果我只是粘貼這裏的代碼/此外，還有很多代碼。 –

@HoneyBadger這不是你應該問的問題。請參見[this]（http://stackoverflow.com/help/on-topic）和[this]（http://sscce.org/）。 –

您可以修改代碼的以下部分：

/// 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 th e現在沒有前綴。對於舊版本和其他瀏覽器，您可能需要使用polyfill。

來源

2013-10-11 07:23:22 K3N

謝謝肯。什麼是FPS？ –

對不起，我的意思是什麼是FPS？謝謝！ –

@HoneyBadger啊.. :)對於RAF FPS是最佳的60 FPS，但不能保證這一點，因爲它取決於實際的代碼和系統（如果使用電池，你可能會得到30 FPS，如果代碼昂貴並且使用更多時間執行比一幀等）。 – K3N

對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); 
    }

來源

2013-10-11 07:39:35 Stanislav

很快的例子：http://jsfiddle.net/23PCv/2/ – Stanislav

謝謝Stanislav :-) –

如何將setInterval轉換爲requestAnimationFrame

回答

相關問題