🐍 贪吃蛇游戏

一个使用原生 HTML5 + CSS3 + JavaScript 开发的精美贪吃蛇网页游戏，支持桌面和移动端操作。

📋 项目简介

这是一个功能完整、界面精美的贪吃蛇游戏，具有以下特色：

• 🎨 精美界面：采用现代化设计，支持深浅色主题自适应
• 📱 响应式设计：完美适配桌面和移动端设备
• 🎮 多种操作方式：支持键盘、触摸和滑动控制
• ⚙️ 丰富设置：多种难度等级、速度调节、穿墙模式
• 🍎 特殊食物：普通食物和限时特殊食物系统
• 💾 数据持久化：自动保存最高分和个人设置
• ♿ 无障碍支持：键盘导航和屏幕阅读器兼容

🌐 在线预览

部署后请替换为你的 GitHub Pages 地址：

https://yourusername.github.io/snakegame/

🚀 本地运行

方法一：直接打开

1. 下载或克隆项目到本地
2. 直接双击 index.html 文件即可在浏览器中运行

方法二：使用本地服务器（推荐）

# 使用 Python 3
python -m http.server 8000

# 使用 Python 2
python -m SimpleHTTPServer 8000

# 使用 Node.js (需要安装 http-server)
npx http-server

# 使用 PHP
php -S localhost:8000

然后在浏览器中访问 http://localhost:8000

📦 GitHub Pages 部署

方法一：通过 Repository Settings

1. 将项目上传到你的 GitHub 仓库
2. 进入仓库的 Settings 页面
3. 在左侧菜单中找到 Pages 选项
4. 在 Source 部分选择 Deploy from a branch
5. 选择 main 分支和 / (root) 目录
6. 点击 Save 保存设置
7. 等待几分钟，GitHub 会自动构建并提供访问链接

方法二：使用 docs 目录（可选）

如果你希望将网站文件放在 docs/ 目录中：

1. 创建 docs/ 目录
2. 将所有文件移动到 docs/ 目录中
3. 在 Pages 设置中选择 main 分支和 docs/ 目录

🎮 游戏玩法

基本规则

• 控制贪吃蛇移动，吃掉食物获得分数
• 每吃一个食物，蛇身会变长
• 避免撞到墙壁（关闭穿墙模式时）或自己的身体
• 游戏结束时会显示本局得分和历史最高分

计分系统

• 普通食物 ●：+1 分（绿色圆形）
• 特殊食物 ◆：+3 分（橙色菱形，闪烁效果，限时出现）

⌨️ 操作控制

键盘操作

按键	功能
↑ ↓ ← →	控制移动方向
W A S D	控制移动方向（备选）
Space	暂停/继续游戏
R	重新开始游戏

移动端操作

• 虚拟方向键：点击屏幕下方的方向按钮
• 滑动控制：在游戏区域滑动手指控制方向
• 按钮操作：点击开始、暂停、重开等按钮

⚙️ 游戏设置

难度等级

难度	基础速度范围	描述
简单	2-6 步/秒	适合新手，速度较慢
普通	3-8 步/秒	标准难度，平衡体验
困难	5-12 步/秒	挑战性较高
地狱	8-18 步/秒	专家级难度，极限挑战

速度调节

• 每个难度都有对应的速度范围限制
• 使用滑块在当前难度范围内微调速度
• 系统会自动限制最小步进间隔，确保游戏可玩性

穿墙模式

• 关闭（默认）：撞到边界墙壁即游戏结束
• 开启：可以从一边穿越到对边，增加游戏策略性
• 设置更改将在下一局游戏生效

🛠️ 自定义参数

如需修改游戏参数，可以编辑 main.js 文件中的 CONFIG 对象：

const CONFIG = {
  GRID_SIZE: 25,                    // 网格大小 (25x25)
  SPECIAL_FOOD_CHANCE: 0.15,        // 特殊食物出现概率 (15%)
  SPECIAL_FOOD_LIFETIME: 150,       // 特殊食物存活帧数
  SPECIAL_FOOD_SCORE: 3,            // 特殊食物分数
  NORMAL_FOOD_SCORE: 1,             // 普通食物分数
  MIN_STEP_INTERVAL: 60,            // 最小步进间隔 (ms)
  
  // 难度速度配置
  DIFFICULTY_SPEEDS: {
    easy: { min: 2, max: 6, default: 3 },
    normal: { min: 3, max: 8, default: 5 },
    hard: { min: 5, max: 12, default: 8 },
    hell: { min: 8, max: 18, default: 12 }
  },
  
  // 视觉配置
  SNAKE_HEAD_COLOR: '#4CAF50',      // 蛇头颜色
  SNAKE_BODY_COLOR: '#66BB6A',      // 蛇身颜色
  NORMAL_FOOD_COLOR: '#FF5722',     // 普通食物颜色
  SPECIAL_FOOD_COLOR: '#FF9800'     // 特殊食物颜色
};

🏗️ 项目结构

snakegame/
├── index.html          # 主页面文件
├── styles.css          # 样式文件
├── main.js             # 游戏逻辑文件
├── assets/             # 资源目录（可选）
├── README.md           # 项目说明文档
└── LICENSE             # MIT 开源协议

🔧 技术特性

渲染系统

• 使用 HTML5 Canvas 进行游戏渲染
• 支持高 DPI 屏幕优化
• 基于 requestAnimationFrame 的流畅动画循环
• 响应式 Canvas 大小调整

输入系统

• 统一的输入控制器处理键盘、触摸和滑动
• 防抖动机制避免连续反向操作
• 支持移动端触摸事件和滑动手势

状态管理

• 集中化的游戏状态管理
• 本地存储支持（最高分、设置等）
• 完整的游戏生命周期控制

性能优化

• 时间基于的游戏步进控制
• 合理的速度限制机制
• 内存友好的对象管理

🌟 浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+
• Mobile Safari iOS 11+
• Chrome for Android 60+

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 开源协议

本项目采用 MIT License 开源协议。

🎯 更新计划

• 增加音效支持
• 添加更多游戏主题
• 实现多人对战模式
• 增加成就系统
• 添加游戏录制回放功能

📞 反馈与支持

如果你在使用过程中遇到问题或有改进建议，请通过以下方式联系：

• 🐛 报告 Bug
• 💡 功能建议
• ⭐ 给项目点星

---

享受游戏时光！🎮