贪吃蛇游戏 (Snake Game)

一个经典的贪吃蛇游戏，使用纯JavaScript、HTML和CSS实现。

🎮 游戏特性

• 自动开始移动：游戏启动后蛇会自动向右开始移动，无需等待用户输入
• 流畅控制：使用方向键控制蛇的移动方向
• 难度选择：提供简单、中等、困难三种难度级别
• 实时计分：显示当前得分和最高分
• 游戏状态管理：支持开始、暂停、重置功能
• 碰撞检测：包含墙壁碰撞和自身碰撞检测

🚀 快速开始

在线体验

直接打开 index.html 文件即可在浏览器中开始游戏。

本地运行

1. 克隆项目：

   git clone https://github.com/billkes/Generate-Snake-Game.git

2. 进入项目目录：

   cd Generate-Snake-Game

3. 打开 index.html 文件：

   # 在浏览器中打开 index.html
   # 或者使用本地服务器
   python -m http.server 8000
   # 然后访问 http://localhost:8000

🎯 游戏玩法

1. 开始游戏：点击"开始游戏"按钮
2. 控制蛇的移动：
   • ↑ 方向键：向上移动
   • ↓ 方向键：向下移动
   • ← 方向键：向左移动
   • → 方向键：向右移动
3. 游戏目标：控制蛇吃到食物，每吃一个食物得10分
4. 避免碰撞：不要撞到墙壁或蛇的身体

游戏控制

• 开始游戏：点击"开始游戏"按钮
• 暂停/继续：点击"暂停游戏"按钮
• 重置游戏：点击"重置游戏"按钮

难度设置

• 简单：蛇移动速度较慢
• 中等：蛇移动速度适中（默认）
• 困难：蛇移动速度较快

🔧 技术实现

项目结构

Generate-Snake-Game/
├── index.html              # 游戏主页面
├── style.css              # 游戏样式
├── src/                   # 源代码目录
│   ├── main.js           # 游戏入口文件
│   ├── gameController.js  # 游戏控制器
│   ├── stateManager.js    # 游戏状态管理
│   ├── renderer.js        # 游戏渲染器
│   └── constants.js       # 游戏常量配置
├── game-bg.svg           # 游戏背景图片
├── game-over.svg         # 游戏结束图片
├── snake-icon.svg        # 蛇图标
├── victory.svg           # 胜利图片
└── readme.md             # 项目说明文档

核心功能

自动移动机制

游戏启动后蛇会自动向右开始移动，这是通过以下实现：

• 在 StateManager 类的 reset() 方法中设置初始方向为向右 { x: 1, y: 0 }
• 移除了方向为零向量的阻塞条件，确保蛇能够持续移动
• 游戏循环会持续更新蛇的位置，无需等待用户输入

游戏状态管理

• StateManager：管理游戏的核心状态，包括蛇的位置、食物位置、分数、游戏速度等
• GameController：控制游戏的生命周期，处理用户输入和游戏循环
• Renderer：负责游戏的视觉渲染，包括蛇、食物、障碍物等

碰撞检测

• 墙壁碰撞：检测蛇头是否超出游戏边界
• 自身碰撞：检测蛇头是否与蛇身其他部分碰撞
• 食物碰撞：检测蛇头是否与食物碰撞

🐛 已修复的问题

蛇不移动问题

问题描述：游戏启动后蛇处于静止状态，需要用户输入方向键后才开始移动。

解决方案：

1. 在 StateManager.reset() 方法中设置初始移动方向为向右
2. 移除了 moveSnake() 方法中检查方向为零向量的阻塞条件
3. 清理了不必要的 hasUserInput 标记和相关代码

修复效果：游戏启动后蛇会自动向右开始移动，提供更好的用户体验。

📝 更新日志

v1.1.0 (2025-08-18)

• ✅ 修复了游戏启动后蛇不移动的问题
• ✅ 蛇现在会在游戏启动后自动开始移动
• ✅ 优化了游戏状态管理逻辑
• ✅ 更新了项目文档

v1.0.0

• 🎉 初始版本发布
• 🐍 基础贪吃蛇游戏功能
• 🎮 游戏控制界面
• 🏆 计分系统

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

📄 许可证

本项目采用 MIT 许可证。详情请参阅 LICENSE 文件。

🎨 设计说明

游戏采用简洁的设计风格，使用SVG图形提供清晰的视觉效果。游戏界面包含：

• 400x400像素的游戏画布
• 直观的控制按钮
• 实时分数显示
• 难度选择器

---

享受游戏！ 🐍🎮