requestAnimationFrame() javascript

Question

我正在使用javascript创建一个fps游戏，并且在使用requestAnimationFrame()时遇到了一些问题。

因此，这是我的代码片段，我认为这很重要：

var animate=window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
            function(callback){
                window.setTimeout(callback, 1000/60);
            };

function reset (){
    allFood=[];
    animationId=[];
    init();
}

var step  = function (){
    animationId.push(animate (step));
    update ();
    render ();
}

function update (){
    if (play && !gameOver){
        for (var i=0; i<allFood.length; i++){
            allFood[i].update();
        }
        for(var i=0; i<allFood.length; i++){
            if(allFood[i].y>HEIGHT) allFood.splice(i, 1);
        }
        player.update();
        MAX_FOOD_LENGTH=player.width*0.8;
        MIN_FOOD_LENGTH = player.width * 0.05;
    }
    else if(!gameOver){
        mainMenu.update();
    }

}

function render (){
    context.clearRect(0, 0, WIDTH, HEIGHT);
    context.fillStyle = backgroundColor;
    context.fillRect(0, 0, WIDTH, HEIGHT);
    if(play || gameOver){
        for (var i=0; i<allFood.length; i++){
            allFood[i].render();
        }
        player.render();
        context.font ="40px serif";
        context.strokeText(score, WIDTH-200, 100);
    }
    else if(!gameOver){
        mainMenu.render();
    }
    animationId.shift();
}

所以问题是，当我第一次打开游戏时，它以60 fps的速度运行(我使用getTime()函数和一个计数器测试了这个功能)，但是在它的游戏结束后，我调用了重置函数，用户再次点击play，它开始以更高的fps运行(首先在110 fps，下一次是在200.)，这会破坏代码。有什么事我必须重置涉及到我的动画功能。我尝试将所有内容都放在setTimeout ()的step函数中，用户建议使用60 fps的速率来控制fps，但是它仍然没有工作，而且每次我按重播时fps都会不断增加。

Answer 1

您很可能运行多个游戏循环。解决方案是只运行一次循环，只保留一个标志，该标志确定是否应该呈现或更新任何内容。

var isAlive = true;
var step  = function (){
    animate(step);
    if(isAlive) {
        update ();
        render ();
    }
}
step();

或者，在重置时清除堆栈中的所有动画帧：

function reset (){
    allFood=[];
    for(var i = 0; i < animationId.length; i++) {
        cancelAnimationFrame(animationId[i]);
    }
    animationId = [];
    init();
}

但是，在取消元素之前，您需要跟踪元素是否是动画框架。首先，我不会将动画框架推到那个animationId数组中。一点好处都没有。相反，您可以这样做：

var rafId = 0;

var step  = function (){
    rafId = animate(step);
    update ();
    render ();
}

function reset (){
    cancelAnimationFrame(rafId);
    allFood=[];
    animationId = [];
    init();
}