目錄
- 一、引言
- 二、實現思路
- 1. HTML 結構
- 2. CSS 樣式
- 3. JavaScript 邏輯
- 三、代碼實現
- 四、效果展示
一、引言
貪吃蛇是一款經典的小游戲，曾經風靡一時。今天，我們將使用 HTML、CSS 和 JavaScript 來實現一個簡單的貪吃蛇小游戲。通過這個項目，可以了解到如何使用 HTML5 的畫布元素（<canvas>）來繪制圖形，以及如何使用 JavaScript 來處理游戲邏輯。
二、實現思路
1. HTML 結構
我們首先創建一個基本的 HTML 結構，包含一個 <canvas> 元素用于繪制游戲畫面，以及一些必要的 <script> 和 <style> 標簽。
2. CSS 樣式
使用 CSS 對 <canvas> 元素進行簡單的樣式設置，使其具有邊框，并居中顯示。
3. JavaScript 邏輯
- 初始化游戲元素：定義蛇的初始位置、食物的初始位置、分數等。
- 處理用戶輸入：監聽鍵盤事件，根據用戶按下的方向鍵來改變蛇的移動方向。
- 繪制游戲畫面：使用
requestAnimationFrame或setInterval函數來不斷更新游戲畫面，包括蛇的移動、食物的生成和繪制、分數的顯示等。 - 處理碰撞檢測：檢測蛇是否撞到墻壁或自己的身體，如果是，則游戲結束。
- 處理食物的生成和消耗：當蛇吃到食物時，分數增加，并且生成新的食物。
三、代碼實現
上述代碼中，我們使用了 HTML5 的 <canvas> 元素來繪制游戲畫面，通過 JavaScript 來處理游戲邏輯。具體實現步驟如下：
- 初始化游戲元素：定義蛇的初始位置、食物的初始位置、分數等。
- 監聽鍵盤事件：根據用戶按下的方向鍵來改變蛇的移動方向。
- 繪制游戲畫面：使用
setInterval函數來不斷更新游戲畫面，包括蛇的移動、食物的生成和繪制、分數的顯示等。 - 處理碰撞檢測：檢測蛇是否撞到墻壁或自己的身體，如果是，則游戲結束。
- 處理食物的生成和消耗：當蛇吃到食物時，分數增加，并且生成新的食物。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/@tailwindcss/browser@4"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><title>貪吃蛇小游戲</title><style>#game-board {border: 2px solid #333;display: block;margin: 20px auto;}</style>
</head><body class="bg-gray-100 flex flex-col items-center justify-center h-screen"><h1 class="text-3xl font-bold mb-4">貪吃蛇小游戲</h1><canvas id="game-board" width="400" height="400"></canvas><script>const canvas = document.getElementById('game-board');const ctx = canvas.getContext('2d');const box = 20;let snake = [];snake[0] = {x: 9 * box,y: 10 * box};let food = {x: Math.floor(Math.random() * 19) * box,y: Math.floor(Math.random() * 19) * box};let score = 0;let d;document.addEventListener('keydown', direction);function direction(event) {if (event.keyCode === 37 && d!== 'RIGHT') {d = 'LEFT';} else if (event.keyCode === 38 && d!== 'DOWN') {d = 'UP';} else if (event.keyCode === 39 && d!== 'LEFT') {d = 'RIGHT';} else if (event.keyCode === 40 && d!== 'UP') {d = 'DOWN';}}function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < snake.length; i++) {ctx.fillStyle = (i === 0)? 'green' : 'lightgreen';ctx.fillRect(snake[i].x, snake[i].y, box, box);ctx.strokeStyle = 'darkgreen';ctx.strokeRect(snake[i].x, snake[i].y, box, box);}ctx.fillStyle = 'red';ctx.fillRect(food.x, food.y, box, box);let snakeX = snake[0].x;let snakeY = snake[0].y;if (d === 'LEFT') snakeX -= box;if (d === 'UP') snakeY -= box;if (d === 'RIGHT') snakeX += box;if (d === 'DOWN') snakeY += box;if (snakeX === food.x && snakeY === food.y) {score++;food = {x: Math.floor(Math.random() * 19) * box,y: Math.floor(Math.random() * 19) * box};} else {snake.pop();}let newHead = {x: snakeX,y: snakeY};if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height || collision(newHead, snake)) {clearInterval(game);alert(`游戲結束！你的最終得分是: ${score}`);}snake.unshift(newHead);ctx.fillStyle = 'white';ctx.font = '20px Arial';ctx.fillText('Score: '+ score, 10, 30);}function collision(head, array) {for (let i = 0; i < array.length; i++) {if (head.x === array[i].x && head.y === array[i].y) {return true;}}return false;}let game = setInterval(draw, 100);</script>
</body></html>四、效果展示
初始界面
小蛇吃到自己，死亡結算
，源碼可白嫖!)
