游戏结束时停止javascript [重复]

Question

这个问题在这里已有答案：

• How to use setInterval and clearInterval? 5个答案

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

与player1Score == 1，“showsWinScreen”时相同。

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。

现在，当你知道游戏结束时，你需要通过调用clearInterval来停止游戏循环，其中包含之前检索到的游戏循环的ID。

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

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

Answer 2

您可以捕获驱动游戏循环的setInterval，并在您不再需要它时运行它。

// Start the game.
var gameInterval = setInterval();
// Stop the game.
clearInterval(gameInterval);