Question

我已经使用javascript画布制作了经典的Snake街机游戏，并且我正在尝试构建功能以减少游戏动画的运行间隔。如果您不熟悉Snake，则蛇会在屏幕上四处移动，并尝试吃掉随机出现的苹果，同时尽量不要碰到它自己或墙壁。蛇每次吃一个苹果，它的大小就会变长，游戏也会变得更加困难。我试图通过每次蛇吃一个苹果时加快游戏速度来增加游戏难度。我已经在下面的代码片段中实现了这一点：

//Animate the game
function gameLoop() {
  ctx.clearRect(0, 0, width, height);
  drawScore();
  snake.move();
  snake.draw();
  apple.draw();
  drawBorder();
  var timeoutID = setTimeout(function() {
    gameLoop();
  }, interval);
};
gameLoop(); //call the game loop

问题是我有一个gameOver()函数可以访问运行游戏的timeoutId函数的setTimeout，但是timeoutId变量未定义在gameOver()函数中。为了使事情更加混乱，gameOver函数在应有的状态下仍然可以工作，但是会在控制台中产生错误，提示：

Uncaught ReferenceError: timeoutID is not defined
    at gameOver (snake.html:68)
    at Snake.move (snake.html:157)
    at gameLoop (snake.html:253)
    at snake.html:258

并且gameOver()函数未按预期运行。它应该显示“游戏结束”并显示玩家的最后得分，并简单地显示未做出的蛇。而是，当调用gameOver()函数时，它将擦除屏幕。这是gameOver()函数：

function gameOver() {
  ctx.font = "60px monospace";
  ctx.fillStyle = "black";
  ctx.textAlign = "center";
  ctx.fillText("Game Over", width/2, height/2);
  clearTimeout(timeoutID);
};

我想知道是否有一种方法可以在发生游戏结束时停止gameLoop()功能，而不会出现错误消息且不会擦除屏幕。我尝试了几种不同的方法都没有用。谢谢。

Answer 1

您需要在timeoutID的{{1}}外部定义，以便在其他地方可见，例如gameLoop函数：

gameOver

在这种情况下，与保存timeoutID相比，您可能会发现，简单地使用外部的 boolean 来指示var timeoutID; function gameLoop() { // ... timeoutID = setTimeout( ... // ... } // ... function gameOver() { // referencing timeoutID here will now be possible是否应该运行，会更容易一些：

gameLoop

如何在多个作用域中定义timeoutId

1 个答案: