前言
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解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 文件，用于实现游戏逻辑 --