网页游戏 / H5 休闲游戏-贪吃蛇网页游戏（Snake Arena）

本项目是一款基于 HTML5 Canvas
的经典贪吃蛇网页游戏，无需安装、打开即玩，支持 PC
端键盘操作和移动端触摸/滑动操作双模式。

核心功能模块：
1. 游戏核心引擎 — 基于 Canvas 的 20×20
像素网格地图，蛇身移动、吃食物增长、穿墙环绕、碰撞检测
2. 双食物系统 — 普通食物（+10分）+
每累计50分概率刷新特殊金色星形食物（+30分），增加策略性
3. 四级难度切换 — 简单/普通/困难/地狱四档，实时调整游戏帧率（12
0ms~30ms），无需重启
4. 排行榜持久化 — LocalStorage 存储历史最高分，关闭浏览器不清除
5. 暂停系统 — 空格键随时暂停/继续
6. 移动端适配 — 触摸方向按钮 + 滑动操控 +
响应式布局，手机也能流畅玩
7. 视觉特效 — 动态粒子背景、食物光晕、蛇身渐变色、蛇头圆角 +
眼睛朝向跟随方向

业务流程：用户打开页面 → 蛇出生在地图中央（3节长度）→
方向键/WASD控制移动 → 吃食物得分增长 →
难度随分数递增（可选手动切换）→ 撞到自己游戏结束 →
弹窗显示最终得分 → 点击「再来一局」重新开始。

整体采用单文件纯前端架构，无框架依赖，所有代码内联在 index.html
中，开箱即用。

技术实现：
1. 游戏循环 — setInterval 驱动主循环 tick()，每帧执行
moveSnake() → draw()，帧率由难度配置控制
2. 渲染层 — Canvas 2D API，每帧全量重绘：网格底纹 → 食物光晕 →
蛇身渐变 → 暂停遮罩，分层渲染避免闪烁
3. 状态管理 — 全局变量管理蛇身数组、食物坐标、方向向量、分数、
暂停态，简洁无冗余
4. 碰撞检测 — 蛇头坐标与蛇身数组的 O(n) 遍历比，20×20
网格下性能无压力
5. 移动端适配 — CSS @media 检测触摸设备显示方向按钮，Canvas
触控事件 + 滑动方向计算支持手势操作
6. 粒子背景 — 独立 Canvas 层 + requestAnimationFrame 驱动 40
个浮动粒子，视觉增强不卡顿
7. 数据持久化 — LocalStorage API 存取最高分，JSON 序列化

我负责的模块：全栈独立开发，从游戏逻辑引擎、Canvas
渲染管道、移动端触摸适配到 UI/UX 设计均在 1
小时内完成。最终产出单文件约 300 行代码，PC
和移动端均可流畅运行（60fps）。

遇到的难点和解决：
- 蛇反向移动穿死：玩家快速连续按键时 direction 和 nextDirection
冲突导致蛇反向自杀。方案：引入双缓冲方向变量，按键只修改
nextDirection，tick 时才 commit 到 direction，commit
前检查是否反向。
- 移动端触摸精度：小尺寸触摸按钮误触率高。方案：同时支持 Canvas
区域滑动操控，通过 touchstart/touchend 的 Δx Δy
计算滑动方向，阈值 20px 过滤误触。
- 特殊食物刷新时机不均衡：纯随机导致体验不稳。方案：绑定分数里
程碑（每 50 分触发概率检查），70%
概率刷新，特殊食物不与普通食物重叠。