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

【问题标题】：Stop javascript when the game is over [duplicate]游戏结束时停止 javascript [重复]
【发布时间】：2019-01-23 14:25:07
【问题描述】：

如何阻止游戏在后台运行。这个简单的乒乓球游戏适用于学校任务。当ballX

与当 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);
}

&lt;canvas id="gameCanvas" width="600" height="400"&gt;&lt;/canvas&gt;

【问题讨论】：

这肯定与您链接@Liam 的问题有关，但在这种情况下，我相信Jamn Nemn 对setInterval 的了解不够，无法提出这个问题。因此我不认为它是重复的。

标签： javascript game-physics

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：