如何使用 HTML、CSS 和 JavaScript 製作貪吃蛇遊戲
貪吃蛇遊戲是一種經典的編程練習，可用於提高編程和解決問題的技能。您可以使用 HTML、CSS 和 JavaScript 在 Web 瀏覽器中創建遊戲。
在遊戲中，您控制一條繞著棋盤移動的蛇。當您收集食物時，蛇會變大。如果您與自己的尾巴或任何牆壁相撞，遊戲將結束。
如何為畫布創建 UI
使用 HTML 和 CSS 添加畫布讓蛇四處移動。如果您需要修改任何基本概念，您可以練習許多其他 HTML 和 CSS 項目。
您可以參考該項目的 GitHub 存儲庫以獲取完整的源代碼。
- 創建一個名為“index.html”的新文件。
- 使用任何文本編輯器（如 Visual Code 或 Atom）打開文件。添加基本的 HTML 代碼結構：
<!doctype html>
<html lang="en-US">
<head>
<title>Snake Game</title>
</head>
<body>
</body>
</html> - 在 body 標籤內，添加一個畫布來代表蛇的遊戲板。
<h2>Snake Game</h2>
<div id="game">
<canvas id="snake"></canvas>
</div> - 在與 HTML 文件相同的文件夾中，創建一個名為“styles.css”的新文件。
- 在內部，為整個網頁添加一些 CSS。您還可以使用其他基本的 CSS 提示和技巧來設計您的網站。
#game {
width:400px;
height:400px;
margin:0 auto;
background-color:#eee;
}
h2 {
text-align:center;
font-family:Arial;
font-size:36px;
} - 在您的 HTML 文件中，在 head 標記中添加指向 CSS 的鏈接：
<link rel="stylesheet" type="text/css" href="styles.css"> - 要查看畫布，請在網絡瀏覽器中打開“index.html”文件。
如何畫蛇
在下面的示例中，黑線代表蛇：
多個正方形或“段”組成了蛇。隨著蛇的增長，方塊的數量也會增加。遊戲開始時，蛇的長度是一條。
- 在您的 HTML 文件中，在 body 標籤底部鏈接到一個新的 JavaScript 文件：
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - 創建 script.js 並從獲取畫布的 DOM 元素開始：
var canvas = document.getElementById("snake"); - 設置畫布 HTML 元素的上下文。在這種情況下，您希望遊戲渲染 2d 畫布。這將允許您在 HTML 元素上繪製多個形狀或圖像。
var canvas2d = canvas.getContext("2d"); - 設置其他遊戲內變量，例如游戲是否結束，畫布的高度和寬度：
var gameEnded = false;
canvas.width = 400;
canvas.height = 400; - 聲明一個名為“snakeSegments”的變量。這將保存蛇將佔據的“方塊”的數量。您還可以創建一個變量來跟踪蛇的長度：
var snakeSegments = [];
var snakeLength = 1; - 聲明蛇的初始 X 和 Y 位置：
var snakeX = 0;
var snakeY = 0; - 創建一個新函數。在內部，將開始的蛇片添加到 snakeSegments 數組，及其開始的 X 和 Y 坐標：
function moveSnake() {
snakeSegments.unshift({ x: snakeX, y: snakeY });
} - 創建一個新函數。在內部，將填充樣式設置為黑色。這是它將用來繪製蛇的顏色：
function drawSnake() {
canvas2d.fillStyle = "black";
} - 對於構成蛇大小的每一段，繪製一個寬度和高度均為 10 像素的正方形：
for (var i = 0; i < snakeSegments.length; i++) {
canvas2d.fillRect(snakeSegments[i].x, snakeSegments[i].y, 10, 10);
} - 創建一個每 100 毫秒運行一次的遊戲循環。這將導致遊戲在新位置不斷繪製蛇，這在蛇開始移動時非常重要：
function gameLoop() {
moveSnake();
drawSnake(); - 在網絡瀏覽器中打開“index.html”文件，可以看到蛇在其起始位置的最小尺寸。
如何讓蛇移動
添加一些邏輯以根據玩家在鍵盤上按下的按鈕向不同方向移動蛇。
- 在文件的頂部，聲明蛇的初始方向：
var directionX = 10;
var directionY = 0; - 添加一個當玩家按下某個鍵時觸發的事件處理程序：
document.onkeydown = function(event) {
}; - 在事件處理程序中，根據按下的鍵更改蛇移動的方向：
switch (event.keyCode) {
case 37: // Left arrow
directionX = -10;
directionY = 0;
break;
case 38: // Up arrow
directionX = 0;
directionY = -10;
break;
case 39: // Right arrow
directionX = 10;
directionY = 0;
break;
case 40: // Down arrow
directionX = 0;
directionY = 10;
break;
} - 在 moveSnake() 函數中，使用方向來更新蛇的 X 和 Y 坐標。例如，如果蛇需要向左移動，則 X 方向將為“-10”。這將更新 X 坐標，為遊戲的每一幀移除 10 個像素：
function moveSnake() {
snakeSegments.unshift({ x: snakeX, y: snakeY });
snakeX += directionX;
snakeY += directionY;
} - 遊戲目前不會在蛇移動時刪除之前的片段。這將使蛇看起來像這樣：
要解決此問題，請在 drawSnake() 函數的開頭在每一幀中繪製新蛇之前清除畫布： canvas2d.clearRect(0, 0, canvas.width, canvas.height);- 您還需要在 moveSnake() 函數內刪除 snakeSegments 數組的最後一個元素：
while (snakeSegments.length > snakeLength) {
snakeSegments.pop();
} - 打開“index.html”文件，按左、右、上、下鍵移動蛇。
如何在畫布上添加食物
在棋盤遊戲中添加點來代表蛇的食物。
- 在文件頂部聲明一個新變量來存儲一組食物：
var dots = []; - 創建一個新函數。在內部，為點生成隨機 X 和 Y 坐標。您還可以確保任何時候棋盤上只有 10 個點：
function spawnDots() {
if(dots.length < 10) {
var dotX = Math.floor(Math.random() * canvas.width);
var dotY = Math.floor(Math.random() * canvas.height);
dots.push({ x: dotX, y: dotY });
}
} - 為食物生成 X 和 Y 坐標後，使用紅色將它們繪製到畫布上：
for (var i = 0; i < dots.length; i++) {
canvas2d.fillStyle = "red";
canvas2d.fillRect(dots[i].x, dots[i].y, 10, 10);
} - 在遊戲循環中調用新的 spawnDots() 函數：
function gameLoop() {
moveSnake();
drawSnake();
spawnDots();
if(!gameEnded) {
setTimeout(gameLoop, 100);
}
} - 打開“index.html”文件，查看棋盤上的食物。
如何讓蛇長大
當蛇與食物點碰撞時，您可以通過增加其長度來使蛇變長。
- 創建一個新函數。在其中，遍歷點數組中的每個元素：
function checkCollision() {
for (var i = 0; i < dots.length; i++) {
}
} - 如果蛇的位置與任何點的坐標匹配，則增加蛇的長度，並刪除點：
if (snakeX < dots[i].x + 10 &&
snakeX + 10 > dots[i].x &&
snakeY < dots[i].y + 10 &&
snakeY + 10 > dots[i].y) {
snakeLength++;
dots.splice(i, 1);
} - 在遊戲循環中調用新的 checkCollision() 函數：
function gameLoop() {
moveSnake();
drawSnake();
spawnDots();
checkCollision();
if(!gameEnded) {
setTimeout(gameLoop, 100);
}
} - 在網絡瀏覽器中打開“index.html”文件。使用鍵盤移動蛇來收集食物碎片並培育蛇。
如何結束遊戲
要結束遊戲，請檢查蛇是否與自己的尾巴或任何牆壁相撞。
- 創建一個新函數來打印“遊戲結束”警報。
function gameOver() {
setTimeout(function() {
alert("Game over!");
}, 500);
gameEnded = true
} - 在 checkCollision() 函數中，檢查蛇是否撞到了畫布的任何牆壁。如果是，調用 gameOver() 函數：
if (snakeX < -10 ||
snakeY < -10 ||
snakeX > canvas.width+10 ||
snakeY > canvas.height+10) {
gameOver();
} - 要檢查蛇的頭部是否與任何尾部碰撞，請循環遍歷蛇的每一部分：
for (var i = 1; i < snakeSegments.length; i++) {
} - 在 for 循環內，檢查蛇頭的位置是否與任何尾部相匹配。如果是這樣，這意味著頭部與尾巴相撞，所以結束遊戲：
if (snakeX === snakeSegments[i].x && snakeY === snakeSegments[i].y) {
gameOver();
} - 在網絡瀏覽器中打開“index.html”文件。嘗試撞牆或自己的尾巴來結束遊戲。
通過遊戲學習 JavaScript 概念
創建遊戲可以是讓您的學習體驗更愉快的好方法。繼續製作更多遊戲以繼續提高您的 JavaScript 知識。
發佈留言