Question

按几次启动/重启按钮，您会发现速度增加。这并不意味着，速度应该重置为'5'。无法弄清楚什么是错的。

启动/重置按钮的代码位于小提琴的底部：

//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);
};

我试图在调用它之前停止动画：

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

我一直盯着我的代码太久了，有人快点看看吗？谢谢！

Answer 1

你的球的实际速度很好。但是，您的游戏运行速度是原因的两倍，因为每次点击重启按钮都会调用animate(step)。由于animate()只是requestAnimationFrame的便利包装，因此您最终会获得比原先预期更多的动画/更新步骤。

最简单的解决方法是检查游戏是否已在运行，并在这种情况下跳过animate(step)（fiddle）：

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

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

1 个答案: