javascript - 单击按钮几次使游戏运行得越来越快 - javascript

Question

作为我研究的一部分，我使用 canvas 在 JavaScript 中构建了游戏“Space Invaders”。在游戏开始之前，主页面已加载并等待单击新游戏按钮。当我点击这个按钮时，游戏开始正常运行，没有任何问题。 (游戏通过调用函数 update() 和 render() 的递归函数运行 - 请参阅代码 - ...)当游戏运行期间我再次按下此按钮时，问题就出现了。发生的情况是游戏运行得更快，当我点击它几次时，游戏运行得越来越快......

我现在不知道是否是因为间隔循环本身不清楚，或者可能是因为 run() 函数再次调用自身并导致循环到递归函数中。

非常感谢。

//----------------------------------------------------////当我按下newGame按钮时调用这个函数

    function startGame()
    {   
        clearInterval(timeInterval);
        run();
        // run function - run the recursive function below
        timeInterval = setInterval(randEnemyShots,frequencyShot);
        // randEnemyShots function - choose one enemey from all enemies to shot 
        // frequencyShot variable - this is the frequqncy of shots 
    }

//----------------------------------------------------//

    function run()
    {
        var loop=function(){
            if(gameRuning)
            {
                update(); 
                // update function - all the logic of game
                render();
                // render function - drawing the game 
                window.requestAnimationFrame(loop,canvas);
            }
        };
        window.requestAnimationFrame(loop,canvas);
    }

//-------------------------------------------------------- -------------------------------------------------- ------------------------//

Answer 1

问题是，当您单击“开始”按钮时，您将再次调用 run() 函数，这实际上使游戏速度加倍。

run() 函数应该在游戏初始化时只调用一次，以便游戏循环可以无限期地运行。

function gameInit(){
    //Initialisation code here
    run(); //Start the game loop only once
}

function startGame() {   
    //Handle 'Start' button click
    clearInterval(timeInterval);
    timeInterval = setInterval(randEnemyShots,frequencyShot);
}

如果设置为 false，则可以使用 gameRuning 值“暂停”循环。