在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
准备工作
在开始之前，请确保你已经安装了一个代码编辑器（如Visual Studio Code）和一个浏览器（如Chrome或Firefox）。
第一步：创建HTML文件
首先，我们需要一个HTML文件来定义游戏的结构。在你的项目文件夹中创建一个名为index.html的文件，并添加以下代码：
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- HTML 文档的开始，指定语言为英文 -->
<head>
<!-- 文档的头部区域，包含文档的元数据和链接到外部资源的标签 -->
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8，以支持各种字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口以适应移动设备的宽度，并使用初始缩放级别 1.0 -->
<title>贪吃蛇小游戏</title>
<!-- 设置网页的标题为“贪吃蛇小游戏”，显示在浏览器标签上 -->
<style>
/* 内部 CSS 样式，用于设置网页的外观 */
canvas {
background-color: #f4f4f4;
/* 设置 canvas 元素的背景颜色为浅灰色 */
display: block;
/* 将 canvas 元素设置为块级元素，使其在页面中独占一行 */
margin: 50px auto;
/* 设置 canvas 元素的上下外边距为 50px，左右外边距自动对齐，居中显示 */
border: 1px solid black;
/* 给 canvas 元素添加 1px 宽的黑色边框 */
}
#score {
/* 设置一个 id 为 score 的元素的样式 */
}
</style>
</head>
<body>
<!-- 文档的主体区域，包含网页的内容 -->
<canvas id="gameCanvas" width="500" height="500"></canvas>
<!-- 创建一个 id 为 gameCanvas 的 canvas 元素，用于绘制游戏内容，宽度和高度均为 500px -->
<div id="score">分数: 0</div>
<!-- 创建一个 id 为 score 的 div 元素，用于显示游戏的分数 -->
<script src="game.js"></script>
<!-- 引入一个名为 game.js 的外部 JavaScript 文件，用于实现游戏逻辑 -->
</body>
</html>
text-align: center;
font-size: 24px;
}
</style>
</head>
<body>
<div id="score">分数: 0</div>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<audio id="eatSound" src="eat.mp3"></audio>
<script src="game.js"></script>
</body>
</html>
解释
<!DOCTYPE html>：声明文档的类型为 HTML5，帮助浏览器正确渲染页面。<html lang="en">：定义 HTML 文档的根元素，并指定语言为英文。<head>：包含文档的元数据和资源链接。<meta charset="UTF-8">：设置字符编码为 UTF-8，确保网页支持多语言字符。<meta name="viewport" content="width=device-width, initial-scale=1.0">：确保网页在移动设备上适应宽度，并设置初始缩放级别。<title>贪吃蛇小游戏</title>：设置网页的标题。<style>：包含内部 CSS 样式，用于设置页面的样式。canvas：设置 canvas 元素的背景颜色、显示方式、外边距和边框样式。#score：为分数显示元素预留了样式设置位置（目前为空）。
<body>：文档主体，包含页面的实际内容。<canvas id="gameCanvas" width="500" height="500"></canvas>：定义了一个用于绘制游戏的画布，大小为 500x500 像素。<div id="score">分数: 0</div>：一个显示游戏分数的 div 元素。<script src="game.js"></script>：引入外部 JavaScript 文件，用于实现游戏逻辑。
第二步：创建JavaScript文件
在你的项目文件夹中创建一个名为game.js的文件，并添加以下代码：
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
const eatSound = document.getElementById('eatSound');
const gridSize = 20;
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const gridWidth = canvasWidth / gridSize;
const gridHeight = canvasHeight / gridSize;
let snake = [{ x: 10, y: 10 }];
let food = generateFood();
let dx = 1, dy = 0;
let score = 0;
let speed = 100; // 游戏速度 (毫秒)
let gameInterval;
let isPaused = false; // 暂停状态
document.addEventListener('keydown', changeDirection);
document.addEventListener('keydown', controlGame);
startGame();
function changeDirection(e) {
switch (e.keyCode) {
case 37: // 左箭头
if (dx === 0) { dx = -1; dy = 0; }
break;
case 38: // 上箭头
if (dy === 0) { dx = 0; dy = -1; }
break;
case 39: // 右箭头
if (dx === 0) { dx = 1; dy = 0; }
break;
case 40: // 下箭头
if (dy === 0) { dx = 0; dy = 1; }
break;
}
}
function controlGame(e) {
switch (e.keyCode) {
case 80: // 'P' 键
togglePause();
break;
case 187: // '+' 键
speed = Math.max(10, speed - 10); // 增加速度
updateGameSpeed();
break;
case 189: // '-' 键
speed += 10; // 减少速度
updateGameSpeed();
break;
}
}
function startGame() {
gameInterval = setInterval(loop, speed);
}
function loop() {
if (isPaused) return;
const head = { ...snake[0] };
head.x += dx;
head.y += dy;
// 碰撞检测
if (head.x < 0 || head.x >= gridWidth || head.y < 0 || head.y >= gridHeight ||
snakeCollision(head)) {
endGame();
return;
}
snake.unshift(head);
// 检查是否吃到食物
if (snake[0].x === food.x && snake[0].y === food.y) {
score += 10; // 增加分数
scoreDisplay.textContent = `分数: ${score}`;
eatSound.play(); // 播放音效
food = generateFood(); // 生成新的食物
} else {
snake.pop();
}
drawGame();
}
function drawGame() {
ctx.fillStyle = '#f4f4f4';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = 'red';
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
ctx.fillStyle = 'green';
snake.forEach(segment => {
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
});
}
function snakeCollision(head) {
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
return true;
}
}
return false;
}
function generateFood() {
let foodPosition;
while (true) {
foodPosition = { x: Math.floor(Math.random() * gridWidth), y:
Math.floor(Math.random() * gridHeight) };
if (!snakeCollision(foodPosition)) break; // 确保食物不出现在蛇身上
}
return foodPosition;
}
function endGame() {
clearInterval(gameInterval);
alert(`游戏结束！你的得分是: ${score}`);
resetGame();
}
function resetGame() {
snake = [{ x: 10, y: 10 }];
dx = 1;
dy = 0;
score = 0;
scoreDisplay.textContent = `分数: ${score}`;
food = generateFood();
startGame();
}
function togglePause() {
isPaused = !isPaused;
if (!isPaused) {
startGame();
} else {
clearInterval(gameInterval);
}
}
function updateGameSpeed() {
clearInterval(gameInterval);
startGame();
}
解释
-
changeDirection函数用于更改蛇的移动方向。 -
controlGame函数用于控制游戏的暂停和速度调整。 -
startGame函数启动游戏循环。 -
loop函数是游戏的核心逻辑，包含移动、碰撞检测、食物生成和得分更新等功能。 -
drawGame函数用于绘制蛇和食物。 -
generateFood函数用于随机生成食物位置。 -
endGame函数在游戏结束时显示得分并重置游戏。 -
togglePause函数用于暂停和恢复游戏。 -
updateGameSpeed函数用于更新游戏速度。
第三步：功能概述
-
分数系统：
在gameloop函数中，我们增加了一个分数检测逻辑。当蛇头与食物的位置相同时，我们会增加分数。为了显示分数，我们在index.html中增加了一个新的<div>标签来显示分数。在每次吃到食物后，我们将分数增加并在scoreDisplay元素中更新这个分数。 -
游戏结束提示：
当我们检测到蛇头与蛇身任何部分发生碰撞时，我们调用endGame函数。这个函数会清除游戏循环，通过alert消息弹窗显示出一个游戏结束的提示，并且将游戏重置。游戏重置会清空蛇的数组并将它的起始位置设置为初始位置。 -
移动速度控制：
变量speed被用来控制蛇移动的速度。这个值表示游戏循环loop函数被调用的时间间隔，也就是多少毫秒后执行下一次迭代。默认情况下，speed设置为100毫秒。这个值越小，蛇移动的速度就越快。 -
增加音效：
为了增加音效，你需要准备好一个简单的音效文件，比如 .wav 或 .mp3 格式的文件。然后，你可以在吃到食物的时候使用HTMLAudioElement对象来播放这个音效。你还需要确保在 Web 浏览器中可以播放音效，这通常不是问题，但是在某些环境下可能需要额外的权限或处理。
代码中的 generateFood 函数稍微做了修改，以确保随机生成的食物位置不会落在蛇身上。这通过一个循环来完成，这个循环一直运行，直到找到一个蛇不存在的位置。
还有一点是，为了在 HTML 文件中显示分数，我们使用了 textContent 属性来更新 scoreDisplay 元素的内容。
这些基本功能的加入大大提升了游戏的可玩性和用户体验。通过以上步骤，你可以实现一个更加完善和有趣的小游戏。
第四步：添加音效
为了让游戏更有趣，我们可以在吃到食物时播放音效。请确保在项目目录中有一个名为eat.mp3的音频文件。你可以从网上下载一个合适的音效文件。
第五步：其他功能添加建议
1. 多级别/难度模式
- 描述：添加多个难度级别，随着游戏进展，蛇的速度逐渐加快。
- 实现：设置不同的速度级别，并根据游戏时间或分数调整速度。
2. 墙壁或障碍物
- 描述：在游戏区域内随机生成墙壁或障碍物，增加游戏的挑战性。
- 实现：在画布上绘制静态障碍物，并在碰撞检测中考虑这些障碍物。
3. 更多种类的食物
- 描述：除了普通食物外，添加不同类型的食物，提供不同的分数或特殊效果（如加速、减速）。
- 实现：使用不同的颜色或图案表示不同类型的食物，并在生成食物时考虑随机性。
4. 音效和背景音乐
- 描述：为游戏添加音效，如吃到食物时的声音、游戏结束时的音效，以及背景音乐。
- 实现：使用
HTMLAudioElement或第三方库来播放音效，并在合适的时机触发播放。
5. 游戏排行榜
- 描述：记录并显示玩家的历史高分或全局排行榜。
- 实现：使用浏览器的本地存储（
localStorage）或后端服务器来保存和检索高分记录。
6. 自定义蛇的外观
- 描述：允许玩家选择或自定义蛇的颜色或样式。
- 实现：提供一个设置界面，让玩家选择或输入颜色，并在绘制蛇时应用这些设置。
7. 增强的控制方式
- 描述：除了键盘控制，还可以添加触摸屏或鼠标控制功能。
- 实现：使用触摸事件或鼠标事件来控制蛇的移动方向。
8. 暂停和重新开始功能
- 描述：允许玩家在游戏中暂停和重新开始。
- 实现：添加暂停按钮，并在暂停时停止游戏循环；重新开始时恢复游戏状态。
9. 游戏关卡系统
- 描述：通过完成一定的任务或达到一定的分数，解锁新关卡或新场景。
- 实现：定义不同的关卡和场景，并在游戏逻辑中处理关卡切换。
10. 游戏教程
- 描述：为新手玩家提供游戏操作和规则的教程。
- 实现：在游戏开始时显示教程或提示，指导玩家如何操作游戏。
11. 游戏主题和皮肤
- 描述：提供不同的游戏主题或皮肤，使游戏界面更加多样化。
- 实现：允许玩家选择或解锁不同的主题和皮肤，并在游戏中应用这些设置。
12. 社交分享功能
- 描述：允许玩家将他们的分数或游戏截图分享到社交媒体。
- 实现：集成社交分享 API 或使用浏览器的分享功能来实现这一点。
13. 挑战模式
- 描述：添加时间限制或其他挑战模式，玩家需要在规定时间内完成任务。
- 实现：设置倒计时器或任务目标，并在达到目标时给予奖励或结束游戏。
14. 动画效果
- 描述：在游戏中加入动画效果，如蛇的移动更加流畅，食物出现时有动画效果。
- 实现：使用动画框架或手动实现帧动画来提升游戏的视觉效果。
这些功能和改进可以根据你的兴趣和项目的需求逐步实现。通过不断添加新功能，你可以使游戏变得更加有趣和丰富，同时提升自己的编程技能和开发经验。
总结
通过这个教程，你学会了如何使用HTML、CSS和JavaScript构建一个简单的贪吃蛇游戏。这个项目不仅帮助你巩固了编程基础，还提供了很多可以扩展和改进的空间。例如，你可以尝试增加障碍物、设计关卡、添加不同种类的食物等。
希望你在这个项目中学到了新的知识，并且享受了编程的乐趣。如果有任何问题或建议，请随时在评论区留言！
