如何暂停用js和html5制作的简单画布游戏？

在遵循 YouTube 上的一些简单教程后，我创建了一个简单的贪吃蛇游戏。

问题是游戏没有暂停功能（例如，当按 P 时，游戏应该暂停/恢复），并且当蛇碰到画布边界时，游戏会自行重新启动（但这是另一个问题）。

这是我拥有的游戏的完整代码：https://pastebin.com/URaDxSvF https://pastebin.com/URaDxSvF

我创建的与暂停相关的函数：

function gamePaused{ /**i need help on this**/ }

function keyDown(e) {
  if (e.keyCode == 80) pauseGame();
}

function pauseGame() {
  if (!gamePaused) {
    game = clearTimeout(game);
    gamePaused = true;
  } else if (gamePaused) {
    game = setTimeout(loop, 1000 / 30);
    gamePaused = false;
  }
}

创建一个名为“paused”的布尔变量，并在玩家按下 p 时将其设置为 true，然后在运行游戏的循环周围放置一个 if 语句。并说 if (!paused){runloop}

您可以为按下 p 时创建切换暂停功能。

function togglePause()
{
    if (!paused)
    {
        paused = true;
    } else if (paused)
    {
       paused= false;
    }

}

您还需要为按下 p 时创建一个事件侦听器 像这样

window.addEventListener('keydown', function (e) {
var key = e.keyCode;
if (key === 80)// p key
{
    togglePause();
}
});

在顶部放置 Game 对象和常量，并在循环函数中执行此操作

 draw(); 
if(!paused)
{ 
update(); 
}