使用 JavaScript 制作暂停按钮

Question

我一直在制作乒乓球比赛观看教程，最后决定通过添加暂停按钮来增强一点，我添加了并且一切正常，但当我重新启动游戏时它仍然处于暂停状态。然后我决定需要添加一个暂停检查变量

paused = false;

并且由于某种原因状态是相同的，请帮助我！

const resetBtn = document.querySelector('#resetBtn');
const pauseBtn = document.querySelector('#pauseBtn');    

paused = false;
running = true;
pauseBtn.addEventListener('click', pauseGame);
resetBtn.addEventListener('click', resetGame);

gameStart();
function gameStart(){
  createBall();
  nextTick();
};
function nextTick(){
    if(running && !paused){
        intervalID = setTimeout(() => {
            // some code
            nextTick();
        }, 10)
    }
    else{
        displayPause();
    }
};
function resetGame(){
    // some code

    paused = false;

    // some code
    updateScore();
    clearInterval(intervalID);
    gameStart();
};
function pauseGame(){
    running = !running;
    paused = true;
    if(running){
        nextTick();
    }
};

<button class="buttons" id="pauseBtn">pause</button>
<button class="buttons" id="resetBtn">reset</button>

我希望当用户按下重新启动按钮时恢复游戏。

Answer 1

问题已解决，我实际上不需要另一个变量，例如暂停， 我所需要的只是将 running 添加到 true ，如下所示，感谢您的关注

function resetGame(){
running = true;

};

Answer 2

您不需要同时使用

running

和

paused

变量。它们本质上是同一件事。只需使用

running

，因为您已经可以使用它了。

由于您使用

setTimeout

来运行游戏，因此在清除它时需要使用

clearTimeout

，而不是

clearInterval

。如果您使用

setTinterval

，那么您需要使用

clearInterval

来清除它。

在下面的代码中，我将超时量更改为

100

，以便更容易查看控制台中发生的情况，

10

时间过得太快了。不过，您应该将其保留在

10

以便您的游戏

const resetBtn = document.querySelector('#resetBtn');
const pauseBtn = document.querySelector('#pauseBtn');    

running = true;
pauseBtn.addEventListener('click', pauseGame);
resetBtn.addEventListener('click', resetGame);

gameStart();
function gameStart(){
  //createBall();
  nextTick();
};
function nextTick(){
    if(running){
        intervalID = setTimeout(() => {
            console.log('game running', intervalID);
            nextTick();
        }, 100)
    }
    else{
        //displayPause();
        console.log('paused!')
    }
};
function resetGame(){
    // some code

    running = true;

    // some code
    //updateScore();
    clearTimeout(intervalID);
    console.log('reset!')
    gameStart();
};
function pauseGame(){
    running = !running;
    if(running){
        console.log('unpaused!')
        nextTick();
    }
};

<button class="buttons" id="pauseBtn">pause</button>
<button class="buttons" id="resetBtn">reset</button>