贪吃蛇小游戏 (Snake Game)

一个基于 uni-app 框架开发的贪吃蛇小游戏，支持摇杆控制，食物可以出现在蛇身上，增加游戏挑战性。

功能特点

• 🎮 摇杆控制 - 使用虚拟摇杆控制蛇的移动方向，松开摇杆时保持当前方向
• 🔄 穿墙功能 - 蛇可以从边界对面出现，增加游戏趣味性
• 🍎 特殊食物系统 - 食物可以出现在蛇身上，使用不同颜色区分
• 📊 计分系统 - 实时显示当前分数和最高分
• 💾 本地存储 - 自动保存最高分到本地存储
• 🎨 精美UI - 采用深色主题，视觉效果舒适
• 📱 响应式设计 - 适配不同屏幕尺寸

技术栈

• 框架: uni-app (Vue3)
• 渲染: Canvas 2D API
• 存储: uni-app 本地存储 API
• 样式: rpx 响应式单位

游戏规则

1. 点击"开始"按钮启动游戏
2. 使用屏幕下方的摇杆控制蛇的移动方向
3. 吃到食物得10分
4. 碰到自己则游戏结束
5. 蛇可以从边界对面出现（穿墙）
6. 食物可以出现在蛇身上，增加挑战性
7. 点击"暂停"可以暂停游戏
8. 点击"重新开始"可以重置游戏

项目结构

贪吃蛇xing/
├── pages/
│   └── index/
│       └── index.vue          # 游戏主页面
├── App.vue                    # 应用根组件
├── main.js                    # 应用入口
├── manifest.json              # 应用配置
├── pages.json                 # 页面配置
└── package.json               # 依赖配置

核心功能实现

摇杆控制

• 使用触摸事件监听摇杆操作
• 计算触摸点相对于摇杆中心的偏移
• 根据偏移量判断移动方向
• 松开摇杆时保持当前方向不变

穿墙功能

// 穿墙处理 - 从对面边界出现
if (head.x < 0) {
  head.x = this.tileCount - 1;
} else if (head.x >= this.tileCount) {
  head.x = 0;
}

食物生成

• 随机生成食物位置
• 允许食物出现在蛇身上
• 使用不同颜色区分普通食物和蛇身上的食物

碰撞检测

• 检测蛇头是否与蛇身碰撞
• 碰撞则游戏结束
• 穿墙功能不影响碰撞检测

运行项目

1. 安装依赖

npm install

2. 运行项目

npm run dev:mp-weixin  # 微信小程序
npm run dev:h5         # H5

3. 在对应平台打开项目

游戏截图

（待添加游戏截图）

性能优化

• 缓存摇杆基座位置，避免频繁DOM查询
• 缓存tile大小计算，减少重复计算
• 使用try-catch保护关键操作
• 合理使用setTimeout确保DOM渲染完成

待优化

• 添加音效
• 添加难度选择
• 添加排行榜功能
• 添加游戏动画效果
• 支持多平台发布

许可证

MIT License

作者

Created with ❤️ using uni-app