让我们尝试在我们的游戏中实现游戏结束。这是第三课中的一段代码，我们在其中让球在墙壁之间弹跳。
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 变量添加一个声明。
然后，替换您最初调用 setInterval() 的位置。
with
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 的底边，我们需要检查它是否击中了挡板。如果是，那么它会像您期望的那样弹开；如果不是，那么游戏将像以前一样结束。
看看您的代码与下面的实时示例相比如何。
<canvas id="myCanvas" width="480" height="320"></canvas>
<button id="runButton">Start game</button>
canvas {
background: #eeeeee;
}
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);
document.addEventListener("keyup", keyUpHandler);
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);
}
const runButton = document.getElementById("runButton");
runButton.addEventListener("click", () => {
startGame();
runButton.disabled = true;
});
到目前为止，我们做得相当不错，现在您可以输掉比赛了，我们的游戏感觉更有趣了！但仍然缺少一些东西。让我们继续第六章——建造砖块区域——为球创建一些要摧毁的砖块。