跳到主要内容
Cx330xu
ZH EN

霓虹贪吃蛇 · Neon Snake

网页版贪吃蛇小游戏，集成 AI 自动驾驶、道具系统、阶段闯关与极速批量统计，AI 最高分近 2000

活跃
JavaScriptHTMLCanvas
GitHub 在线 Demo

背景 (Situation)

需要一个”不简单”的网页版贪吃蛇——既要画面上有霓虹质感、平滑动画，又要在玩法上有深度（动态障碍物、道具系统、阶段闯关）。同时，我还想测试 AI 在这种有动态障碍物的棋盘上能打到多少分。

任务 (Task)

从零构建一个功能完整的单文件网页贪吃蛇游戏，具备：

  • 平滑插值移动（蛇身在格子间丝滑滑动，不是一格一格跳）
  • 多种食物类型（普通 + 金色奖励）+ 三种限时道具（减速 / 缩短 / 双倍分）
  • 动态障碍物随等级累积，障碍物软上限 + 智能食物防死角
  • 蛇长达里程碑自动清障碍闯关，把”必死”变成”过了几关”
  • AI 自动驾驶（BFS 寻路 + 逃生检查 + 最长生存路径），支持极速批量统计

行动 (Action)

  • 渲染：Canvas 2D + requestAnimationFrame 驱动，蛇身插值渲染（手算 lerp），头部带眼睛朝向
  • AI 算法：五层逐级降级决策——① BFS 找食物最短路径 → ② 模拟走完后的蛇身 → ③ 逃生检查（强保证：能到尾；弱保证：可达空间 ≥ 蛇长）→ ④ 最长生存路径绕大圈拖延 → ⑤ 可达空间最大方向兜底
  • 游戏系统：动态障碍物（软上限 30）+ 智能食物生成（BFS 可达性验证 + 洪水填充兜底）+ 阶段闯关（蛇长每达 50/100/…清空障碍 + 奖励分）
  • 道具：三种限时道具随机生成（🐌减速 5s / −缩短 3 节 / 🔥双倍分 6s），带倒计时环与 HUD 指示
  • 批量统计：极速模式跳过渲染，setTimeout 分片不阻塞 UI，跑 N 局输出 max/avg/median/死因分布
  • 关键决策：
    • 逃生检查加”可达空间”弱判据 → 解决角落食物死循环（stall 从 50% 降至 3%）
    • 尾随从”最短到尾巴”改为”最长到尾巴” → 蛇绕大圈让布局充分变化（max 分 920→1990）
    • 障碍物软上限而非硬删 → 保留后期紧张感同时防止棋盘被填死

结果 (Result)

  • ✅ 单文件 59KB，双击 snake.html 即玩，手机端轻触/滑动 + PC 端键盘双控
  • ✅ AI 60 局极速统计：最高分近 2000，平均 1100+，已通过 2 个闯关里程碑
  • ✅ stall 死循环从 50% 降至 3.3%，obstacle 死因从 53% 降至 33%
  • ✅ 道具系统 + 无障碍模式 + 阶段闯关完整运行
  • 🔜 持续迭代：Hamilton 回路混合策略、道具 AI 自主决策、种子随机复现调试

技术文档

技术难点 为什么做这个项目？解决了什么独特问题？

核心挑战：在动态障碍物棋盘上让 AI 活下去

1. 角落食物死循环
食物随机落在死角（被蛇身+障碍物包围），AI 的 BFS 寻路能找到路径，但逃生检查判定“吃完会困死” → 放弃 → 尾随拖延 → 食物不动 → 永远循环。
解决：引入“可达空间 ≥ 蛇长”弱保判据，与“能到尾巴”强保形成双重检查。实测 stall 死因从 50% 降至 3.3%。

2. 障碍物无限累积
每升一级永久 +1 障碍物，棋盘可用空位线性缩小。蛇长到 ~90 节时 53% 的局因撞障碍而死。
解决：障碍物软上限（30 个，超出时替换最旧）+ 阶段闯关（蛇长里程碑清空全部障碍）。

3. 批量统计不阻塞 UI
极速模式下每局 2000+ 步同步 BFS 循环，连续跑 200 局会卡死页面。
解决：每局后 await setTimeout(0) 让出主线程，onProgress 回调实时更新进度条。turbo 下跳过渲染、粒子、DOM 写和音效，单局从 10 秒降至 0.3 秒。

4. 单文件架构的状态边界
游戏、AI、UI 三层全在一个 IIFE 闭包内，批量统计需同时只跑逻辑不跑渲染。
解决：window.__game 暴露只读状态 + 诊断 API，ai.turbo 标志控制 loop 分支（正常 rAF + render vs 同步 while 循环），muted 标志静音叠加层。

方案对比与决策 关键技术选型的权衡与理由

关键选型与权衡

1. 逃生检查：单判据 vs 双判据
选项 A：仅 BFS 到尾（强保证）→ 对角落食物永远 False，死循环。
选项 B：仅可达空间 ≥ 蛇长（弱保证）→ 偶尔误判但能活。
选择：双判据 OR 组合：强保证优先，弱保证兜底。既保留强保证的可靠性，又覆盖死角场景。实测验证：stall 50% → 3%。

2. 尾随策略：最短 vs 最长到尾巴路径
最短路径：BFS 头→尾第一步，绕小圈，蛇身布局重复，食物路径安全性不变 → 卡死。
最长路径：从尾 flood 距离图，头每步选离尾最远的合法方向，绕大圈，布局充分变化 → 食物安全窗口打开。
选择：改为最长生存路径。max 分从 920 → 1990（+116%）。

3. 障碍物处理：无限累积 vs 硬删除 vs 软上限
无限累积：终局必然被填死。
硬删除（清空）：后期突然变简单，玩家体验断裂。
软上限（30 个，FIFO 替换）：保留紧张感，但上限可控。
选择：软上限 + 阶段闯关（蛇长每 +50 节清空一次）。紧张与爽感交替。

4. 道具 AI：纳入目标 vs 路过吃
纳入目标：AI 会绕路抢道具，增加计算量。
路过吃：道具随机生成，AI 自然行进中吃到，零额外计算。
选择：默认“路过吃”，保留 chaseBonus 开关扩展金色奖励决策。

架构设计 系统架构、数据流与核心设计模式

单文件三层架构 + 极速双模

┌─────────────────────────────────────────────┐
│                  snake.html                  │
├─────────────────┬───────────────────────────┤
│  渲染层          │  rAF loop → Canvas 2D      │
│  (visual)        │  蛇身 lerp 插值 / 粒子 /    │
│                  │  进度环 / HUD DOM 更新      │
├─────────────────┼───────────────────────────┤
│  游戏逻辑层       │  step() / reset() / spawn  │
│  (game logic)    │  碰撞 / 食物 / 道具 / 障碍  │
│                  │  闯关 / 等级 / 双倍分        │
├─────────────────┼───────────────────────────┤
│  AI 决策层       │  aiDecide() 五层降级        │
│  (ai core)       │  ①→②→③→④→⑤             │
│                  │  BFS / 模拟 / 逃生 / 最长路径│
├─────────────────┴───────────────────────────┤
│  window.__game 暴露接口                       │
│  极速模式：skip render → 同步 while → 批量统计 │
│  可见模式：rAF + render → 可视化 AI 决策      │
└─────────────────────────────────────────────┘

数据流（每逻辑步）
aiDecide() → applyAiDir() → dir 更新 → step() 碰撞/吃东西/闯关 → updateHUD() → 下一帧

极速模式状态切换
正常：state=playing + ai.turbo=false → rAF loop 每帧推进 1 步 + render
极速：batchRun() → 设置 ai.turbo=true + muted=true → runOneGame() 内同步 while(state==playing) turboStep() → 单局 0.3s 完成 → await setTimeout(0) 让出主线程

💡 提示：点击每个面板展开详细内容。此组件采用 HTML5 <details> 元素，无需 JavaScript。

评论