当前位置：首页 > news >正文

创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程

news 来源：原创 2024/9/20 9:31:39

在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解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 浏览器中可以播放音效，这通常不是问题，但是在某些环境下可能需要额外的权限或处理。