随着游戏的进行，游戏循环中的滞后答案

【问题标题】：Lag in Game Loop as the game progresses随着游戏的进行，游戏循环中的滞后
【发布时间】：2014-03-29 14:54:53
【问题描述】：

这是我使用 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);

陈述我的问题：
如何防止我在游戏进行时遇到的延迟？

【问题讨论】：

很难说滞后来自哪里以及是否只是由于循环。也就是说，我确实注意到您在每个循环中不断执行两次 $('.player') 选择器。看来你可以通过只选择播放器 1 次来获得一些效率。
您好，我想您可以通过此链接更轻松地实现您想做的事情：apps.apolinariopassos.com.br/flappygenerator/en
@XavierDelamotte 我正在做的不是 Flappy Bird 克隆。它应该是一个带着喷气背包的人。也是我尝试学习使用此游戏循环构建游戏的尝试。

标签： javascript jquery performance optimization game-loop

【解决方案1】：

延迟来自您每 16 毫秒分配一个新的点击处理程序。

在gameLoop函数之外提取以下代码：

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

您尚未发布其余代码，但请确保在 gameLoop 中仅更新游戏状态，不要重新创建保持游戏运行的机制。

【讨论】：