讓我們嘗試在我們的遊戲中實現遊戲結束。這是第三課中的一段程式碼，我們在其中讓球在牆壁之間彈跳。
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;
});
到目前為止，我們做得相當不錯，現在您可以輸掉比賽了，我們的遊戲感覺更有趣了！但仍然缺少一些東西。讓我們繼續第六章——建造磚塊區域——為球建立一些要摧毀的磚塊。