Question

我在YouTube上关注了一些简单的教程之后创建了一个简单的蛇游戏。

问题在于游戏没有暂停功能（例如，当按下P时游戏应该暂停/恢复）并且当蛇击中画布的边界时游戏重新开始（但这是另一个问题）。

以下是我对游戏的完整代码：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;
  }
}

Answer 1

创建一个名为paused的布尔变量，如果玩家按下p，则将其设置为true，然后在运行游戏的循环周围放置一个if语句。并说if（！paused）{run loop}

您可以在按下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();
}
});

在游戏对象和常量处于paused = false的顶部，并在循环函数中执行此操作

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

Answer 2

您的游戏循环不是基于setTimeout，而是基于requestAnimationFrame。因此，设置和清除计时器不会改变任何内容。

其次，您没有将keyDown函数绑定到任何事件，因此永远不会被调用。

解决方案：

看一下你的loop函数：它会异步调用自己，它提供动画。您需要停止该循环以有效地引入暂停：

function loop() {
    if (gamePaused) return; // <--- stop looping
    update();
    draw();
    window.requestAnimationFrame(loop, canvas);
}

在页面加载时定义新变量，并将函数绑定到keyDown事件：

var gamePaused = false;
document.addEventListener('keydown', keyDown);

你的pauseGame函数看起来像这样：

function pauseGame() {
    gamePaused = !gamePaused; // toggle the gamePaused value (false <-> true)
    if (!gamePaused) loop(); // restart loop
}

Answer 3

游戏状态管理

游戏通常会有各种游戏状态。暂停，结束游戏，按键开始等等...作为运行游戏的最佳方式是通过单个主循环管理游戏状态的最简单方法是让变量保持当前状态函数并且只需分配该变量适当的功能来处理当前状态。

BTW 您应该使用requestAnimationFrame代替setTimeout或setinterval，keyCode不应使用，因为它是折旧使用{{1 （详见示例）

keyEvent.code

参考： https://developer.mozilla.org/es/docs/Web/API/KeyboardEvent

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

3 个答案:

解决方案：

游戏状态管理