调用requestAnimationFrame会使动画运行得更快

Question

Press the start/restart button several times and you'll notice that the speed increases. It's not meant to, the speed should just reset to '5'. Can't figure out whats wrong.

http://jsfiddle.net/LQEkn/

The code for the start/reset button is at the bottom of the Fiddle:

//Start game function + button
function resetGame() {
    ball.x = board.width/2;
    ball.y = board.height/2;
    ball.xSpeed = 5;
    ball.ySpeed = 0;
    player1.score = 0;
    player1.newScore = false;
    player2.score = 0;
    player2.newScore = false;
}

startButton.onclick = function() {
    startButtonText.innerHTML = "Restart game";
    resetGame();
    renderPresentation();
    animate(step);
};

I've tried to stop the animation before calling it:

startButton.onclick = function() {
    startButtonText.innerHTML = "Restart game";
    resetGame();
    renderPresentation();
    var rid = animate(step); //animate is window.requestAnimationFrame()
    window.cancelAnimationFrame(rid);
    animate(step);
};

I've been staring at my code for too long, anyone up to take a quick look? Thanks!

Answer 1

The actual speed of your ball is fine. However, your game runs twice as fast because every click on the restart button will call animate(step) . Since animate() is just a convenience wrapper for requestAnimationFrame you will end up with more animation/update steps than you originally intended.

The easiest solution for this is to check whether the game is already running and skip the animate(step) in this case ( fiddle ):

startButton.onclick = function() {
    startButtonText.innerHTML = "Restart game";
    resetGame();
    renderPresentation();
    if(!game_is_running){
        animate(step);
        game_is_running = true;
    }
};