javascript - 游戏结束时停止 JavaScript

Question

这个问题已经有答案了:

How can I use setInterval and clearInterval? (6 个回答)

已关闭 4 年前。

如何停止游戏在后台运行。这个简单的乒乓球游戏适用于学校任务。当 ballX < 0 时，它显示 ShowingGameOverScreen。然后我希望游戏中断或停止。直到我可以写“点击重新启动游戏”。

与当player1Score == 1时，“showingWinScreen”相同。

var canvas;
var canvasContext;

var ballX = 300;
var ballY = 200;
var ballSpeedX = 5;
var ballSpeedY = 5;

var player1Score = 0;
const WINNING_SCORE = 1;
var showingWinScreen = false;
var showingGameoverScreen = true;

var paddle1Y = 150;
const PADDLE_THICKNESS = 10;
const PADDLE_HEIGHT = 100;

window.onload = function() {
  canvas = document.getElementById("gameCanvas");
  canvasContext = canvas.getContext("2d");

  var framesPerSecond = 30;
  setInterval(function() {
    drawEverything();
    moveEverything();
  }, 1000 / framesPerSecond);

  document.addEventListener('keydown', handleKeyDown, true, );
  //sets the function for paddle handling
  function handleKeyDown(event) {
    var keyCode = event.which || event.keyCode;

    switch (keyCode) {
      case 38:
        paddle1Y -= 5;
        break;
      case 40:
        paddle1Y += 5;
        break;
      default:
        // Avoid preventDefault() when not pressing expected keys
        return;
    }
    // Don't scroll window when pressing UP/DOWN
    event.preventDefault();
  }
}

function winningScore() {
  if (player1Score == WINNING_SCORE) {
    showingWinScreen = true;
  }
}

function ballReset() {
  //ballSpeedX = -ballSpeedX;
  ballX = canvas.width / 2;
  ballY = canvas.height / 2;
}

function moveEverything() {
  //ballX bouncing back
  ballX = ballX - ballSpeedX;
  //ball starting Y angle
  ballY = ballY + ballSpeedY;

  if (ballX < 0 /*600*/ ) {
    if (ballY > paddle1Y &&
      ballY < paddle1Y + PADDLE_HEIGHT) {
      ballSpeedX = -ballSpeedX;
    }
  }
  if (ballX > canvas.width /*600*/ ) {
    /*ballSpeedX=5;*/
    ballSpeedX = -ballSpeedX;
    player1Score += 1;
    winningScore();
    this.removeEventListener(event.type, moveEverything);
  }

  if (ballY < 0 /*600*/ ) {
    /*ballSpeedX=5;*/
    ballSpeedY = -ballSpeedY;

  }

  if (ballY > canvas.height /*400*/ ) {
    /*ballSpeedX=5;*/
    ballSpeedY = -ballSpeedY;
  }
}

//draws all on the gameCanvas wich is black.
function drawEverything() {
  //Next line blanks the screen with black
  colorRect(0, 0, canvas.width, canvas.height, "black");

  if (ballX < 0) {
    canvasContext.fillStyle = "white";
    canvasContext.fillText("GameOver", canvas.width / 2, 200);
    return;
  }

  if (showingWinScreen) {
    canvasContext.fillStyle = "white";
    if (player1Score == WINNING_SCORE) {
      canvasContext.fillText("You Won!", canvas.width / 2, 200);
    }
    return;
  }

  //next line draw left paddle
  colorRect(0, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT, "white");
  //next line draws ball from the function
  colorCircle(ballX, ballY, 10, "white");
  canvasContext.fillText(player1Score, 100, 100);
}

// summerize the ball information
function colorCircle(centerX, centerY, radius, drawColor) {
  canvasContext.fillStyle = drawColor;
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
  canvasContext.fill();
}

//summerize the canvas info, like; Color and width/height
function colorRect(leftX, topY, width, height, drawColor) {
  canvasContext.fillStyle = drawColor;
  canvasContext.fillRect(leftX, topY, width, height);
}

<canvas id="gameCanvas" width="600" height="400"></canvas>

Answer 1

当您通过调用 setInterval 来调用游戏循环时，您需要检索它返回的间隔的 ID。

现在，当您知道游戏结束时，您需要使用之前检索到的游戏循环的 ID 调用 clearInterval 来停止该游戏循环。

var gameLoopInterval = setInterval(function() {
    drawEverything();
    moveEverything();
  }, 1000/framesPerSecond);

// Later on, when the game is over
clearInterval(gameLoopInterval);