遊戲循環中的滯後隨着遊戲的進展

這是我與Game Loop合作的小小嚐試。 Here is the Demo。（繼續點擊灰色區域以啓動它）。遊戲循環中的滯後隨着遊戲的進展

問題在於，點擊一段時間後，遊戲動畫變得不穩定，並且達到了一個像停止動作一樣的點，之後我需要殺死瀏覽器選項卡。

當然，我在這裏錯過了一些東西。可能像遊戲閒置時需要插入的延遲。
這裏是我一直在努力代碼：
HTML

<div class="container"> 
    <div class="player"></div> 
</div>

的JavaScript

var player = { 
    height: 0, 
    width: 0, 
    image: "", 
    score: 0, 
    highestScore: 0 
}; 
var newColor=null; 

/*Game loop starts here*/ 
var gameLoop = function() { 
    $(".container").on("click", function() { 
     $(".player").stop().animate({ 
      bottom: "+=100px" 
     }, 300, function() { 
      $(".player").animate({ 
       bottom: "0" 
      }, 800); 
     }); 
    }); 
/* some more calls to updating player properties etc etc will come here*/ 
}; 
/*Game loop ends here*/ 

/*Run the Game Loop*/ 
setInterval(gameLoop, 16);

要說明我的問題：
如何防止我在遊戲進展中遇到的延遲？

來源

2014-02-26 md1hunox

很難說遲滯是從哪裏來的，以及是否僅僅由於循環。這就是說我注意到你每次循環都要做兩次$（'。player'）選擇器。看來你可以通過只選擇一次玩家來獲得一些效率。 – sgmeyer

你好，我想你會通過這個鏈接實現你想要做的更容易：http://apps.apolinariopassos.com.br/flappygenerator/en/ –

@XavierDelamotte我正在做的不是一隻飛揚的小鳥克隆。它應該是一個有噴氣揹包的人。此外，我嘗試使用此遊戲循環學習構建遊戲。 – md1hunox

滯後來自於您每16毫秒分配一個新的點擊處理程序。

提取下面的代碼gameLoop功能之外：

$(".container").on("click", function() { 
    $(".player").stop().animate({ 
     bottom: "+=100px" 
    }, 300, function() { 
     $(".player").animate({ 
      bottom: "0" 
     }, 800); 
    }); 
});

您還沒有貼出你的代碼的其餘部分，但要確保在gameLoop你更新遊戲只和Don」的狀態重新創建讓遊戲繼續運行的機制。

來源

2014-02-26 16:27:54 Tibos

遊戲循環中的滯後隨着遊戲的進展

回答

相關問題