游戏结束

这是 Gamedev Canvas 教程的 10 个步骤中的**第 5 步**。你可以在 Gamedev-Canvas-workshop/lesson5.html 中找到完成本课后代码应有的样子。

看着球在墙上弹跳并能够四处移动球拍很有趣，但除此之外，游戏没有任何作用，也没有任何进展或最终目标。从游戏性的角度来看，能够输掉游戏会更好。在打砖块游戏中，输掉游戏的逻辑是，如果你用球拍错过了球，让它到达屏幕的底部边缘，那么游戏就结束了。

实现游戏结束

让我们尝试在游戏中实现游戏结束。这是我们在第三课中让球弹离墙壁的代码片段

if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
  dx = -dx;
}

if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
  dy = -dy;
}

不要让球从所有四面墙弹回，现在只允许从三面弹回——左、上和右。碰到底部的墙将结束游戏。我们将编辑第二个 if 块，使其成为一个 if else 块，当球与画布的底部边缘碰撞时触发我们的“游戏结束”状态。现在，我们将显示一个警报消息，并通过重新加载页面重新启动游戏。

首先，在任何函数之前，在顶层添加 interval 变量的声明

let interval = 0;

然后，替换最初调用 setInterval() 的位置

setInterval(draw, 10);

与

interval = setInterval(draw, 10);

然后将第二个 if 语句替换为以下内容

if (y + dy < ballRadius) {
  dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
  alert("GAME OVER");
  document.location.reload();
  clearInterval(interval); // Needed for Chrome to end game
}

让球拍击中球

在本课中要做的最后一件事是在球和球拍之间创建某种碰撞检测，以便它可以弹回并回到游戏区域。最简单的方法是检查球的中心是否在球拍的左右边缘之间。再次更新你修改的最后一段代码，如下所示

if (y + dy < ballRadius) {
  dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
  if (x > paddleX && x < paddleX + paddleWidth) {
    dy = -dy;
  } else {
    alert("GAME OVER");
    document.location.reload();
    clearInterval(interval);
  }
}

如果球碰到画布的底部边缘，我们需要检查它是否碰到球拍。如果是，那么它会像预期的那样弹回；如果不是，那么游戏就结束了，如前所述。

比较你的代码

请参阅你的代码与以下实时示例的比较

<canvas id="myCanvas" width="480" height="320"></canvas>
<button id="runButton">Start game</button>

canvas {
  background: #eee;
}
button {
  display: block;
}

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const ballRadius = 10;

let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;

const paddleHeight = 10;
const paddleWidth = 75;

let paddleX = (canvas.width - paddleWidth) / 2;
let rightPressed = false;
let leftPressed = false;

let interval = 0;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
  if (e.key == "Right" || e.key == "ArrowRight") {
    rightPressed = true;
  } else if (e.key == "Left" || e.key == "ArrowLeft") {
    leftPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.key == "Right" || e.key == "ArrowRight") {
    rightPressed = false;
  } else if (e.key == "Left" || e.key == "ArrowLeft") {
    leftPressed = false;
  }
}

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}
function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  drawPaddle();

  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
    dx = -dx;
  }
  if (y + dy < ballRadius) {
    dy = -dy;
  } else if (y + dy > canvas.height - ballRadius) {
    if (x > paddleX && x < paddleX + paddleWidth) {
      dy = -dy;
    } else {
      alert("GAME OVER");
      document.location.reload();
      clearInterval(interval); // Needed for Chrome to end game
    }
  }

  if (rightPressed && paddleX < canvas.width - paddleWidth) {
    paddleX += 7;
  } else if (leftPressed && paddleX > 0) {
    paddleX -= 7;
  }

  x += dx;
  y += dy;
}

function startGame() {
  interval = setInterval(draw, 10);
}

document.getElementById("runButton").addEventListener("click", function () {
  startGame();
  this.disabled = true;
});

注意：尝试在球碰到球拍时让它移动得更快。

后续步骤

到目前为止，我们做得非常好，我们的游戏开始感觉更有价值了，因为现在你可能会输！但它仍然缺少一些东西。让我们继续第六章——构建砖块区域——并为球创建一些要摧毁的砖块。