提问人：Jask 提问时间：8/11/2023 最后编辑：Jask 更新时间：8/11/2023 访问量：69
使用 JavaScript 制作暂停按钮
making a pause button using JavaScript
问：
我一直在制作乒乓球比赛观看教程，最后决定通过添加暂停按钮来增强一点，我添加了，一切正常，但是当我重新启动游戏时，它仍然被暂停。然后我决定我需要添加一个暂停的检查变量，并且由于某种原因状态是相同的，请帮助我！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>
我期望在用户按下重启按钮时恢复游戏。
答：
0赞
Jask
8/11/2023
#1
问题解决了，我实际上不需要另一个变量，例如暂停， 我所需要的只是将运行添加到 true，如下所示，感谢您的关注
function resetGame(){
running = true;
};
0赞
Chris Barr
8/11/2023
#2
您不需要 a 和 variable。它们本质上是一回事。只需使用，因为您已经可以使用它。runningpausedrunning
由于您正在使用运行游戏，因此您需要使用 when to clear 它，而不是 .如果你正在使用，那就是你想用它来清除它的时候。setTimeoutclearTimeoutclearIntervalsetTintervalclearInterval
在下面的代码中，我已将您的超时量更改为 只是为了更容易看到控制台中发生的事情，它在 .不过，您可能应该在游戏中保留它1001010
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>评论
1赞
Jask
8/11/2023
谢谢哈哈，我们一次发布了相同的解决方案，但谢谢
评论
nextTickrunningfalserunning// some codegameStart()runningpausedclearTimeoutclearIntervalsetTimeout