AI 贪吃蛇：让它自己学会吃食物

AI 贪吃蛇：让它自己学会吃食物

一段需求，码道自动写出 458 行、约 12.7 KB 的单文件 AI 贪吃蛇——BFS 最短路径自动寻路、吃食物前先模拟"能否安全到达蛇尾"避免困死、追食物/避让/绕行三态实时显示、点击画布随时切回手动操作，双击 HTML 就能看 AI 自己玩贪吃蛇

分类: ai-development
标签: CodeArts, AI编程, 贪吃蛇, BFS, 寻路算法, Canvas
难度: 初级
读者: 前端开发者、编程学习者、技术写作者

---

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个 AI 自动寻路贪吃蛇（AI Snake）网页应用，单个 HTML 文件即可运行……」约 5 分钟后，一个 458 行、约 12.7 KB 的完整游戏就自动生成了：AI 用 BFS 广度优先搜索自动规划到食物的最短路径，并且在出发前先"模拟"吃完食物后自己能否到达蛇尾——如果不能，就改为跟随蛇尾避让、再不行就绕行，避免经典 AI 贪吃蛇"把自己困死"的问题；AI 状态（追食物/避让/绕行）用绿/黄/红三色实时显示在状态面板；点击画布即可切换 AI 自动与键盘手动控制，手动模式还有反向移动保护；慢/中/快三档速度、空格暂停、R 键重开一应俱全。双击 HTML 就能看 AI 自己吃食物、绕身体、越长越长。

---

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

---

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 自然语言编程：我说「AI 自动寻路贪吃蛇」，码道直接理解成寻路算法 + 安全判定 + 人机切换 + 状态面板一整套方案
• 自主技术选型：用 BFS 找最短路径，关键的是吃食物前先 simulate 模拟吃完后的蛇身，再判断能否到达蛇尾，避免 AI 吃完食物把自己困死
• 工程细节到位：手动模式做了反向移动保护（nextDir 延迟生效），快速连按方向键也不会让蛇头反向撞到自己身体
• 自检与收尾：生成后主动做 JS 语法检查验证文件完整性，再汇报功能清单

---

4. 任务描述

我想要一个 AI 自动寻路贪吃蛇（AI Snake）网页应用，具体要求：

• 贪吃蛇由 AI 自动控制，用 BFS/A* 寻路算法自动寻找食物，并能避开身体与墙壁
• 显示 AI 状态（追食物/避让/绕行）和当前分数、步数、长度
• 支持人机切换：鼠标点击切换 AI 自动与键盘方向键手动控制
• 提供重新开局、速度调节（慢/中/快）
• 深色主题界面美观，Canvas 渲染，包含操作提示
• 双击 HTML 文件即可在浏览器中运行

---

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道开始拆解需求并生成代码：

码道在 Thinking 中规划 AI 寻路方案，并针对"快速连按方向键导致蛇反向撞自己"的经典 bug 给出修复思路：

约 5 分钟后，码道汇报完成：语法检查通过、文件已创建、输出功能清单：

双击生成的 ai-snake.html 在浏览器中运行，AI 自动控制贪吃蛇追向食物，状态面板显示"AI 自动 / 追食物 / 分数 11 / 步数 200 / 长度 14"：

---

6. 代码解析

码道生成的代码是一个自包含的单页应用，核心逻辑非常清晰：

BFS 最短路径寻路：从蛇头开始广度优先搜索，把蛇身当作障碍，返回第一条到达食物的路径：

function bfs(start, goal, obstacles) {
  const queue = [{x: start.x, y: start.y, path: []}];
  const visited = new Set([key(start)]);
  let head = 0;
  while (head < queue.length) {
    const cur = queue[head++];
    if (cur.x === goal.x && cur.y === goal.y) return cur.path;
    for (const d of DIRS) {
      const nx = cur.x + d.x, ny = cur.y + d.y;
      if (nx < 0 || nx >= COLS || ny < 0 || ny >= ROWS) continue;
      const k = nx + ',' + ny;
      if (obstacles.has(k) || visited.has(k)) continue;
      visited.add(k);
      queue.push({x: nx, y: ny, path: [...cur.path, d]});
    }
  }
  return null;
}

安全判定（避免困死）：AI 决策时先 simulate 模拟按这条路径吃完食物后的蛇身，再用 BFS 判断蛇头能否到达蛇尾——能到达才去追食物，否则跟着蛇尾走（避让），实在不行才随便找个空位绕行：

function aiDecide() {
  const head = snake[0], tail = snake[snake.length - 1];
  const body = new Set();
  for (let i = 0; i < snake.length - 1; i++) body.add(key(snake[i]));

  if (food) {
    const path = bfs(head, food, body);
    if (path && path.length > 0) {
      const sim = simulate(path);
      if (canReachTail(sim)) {
        aiStatus = 'hunt';
        return path[0];
      }
    }
  }

  const pathTail = bfs(head, tail, body);
  if (pathTail && pathTail.length > 0) {
    aiStatus = 'avoid';
    return pathTail[0];
  }

  aiStatus = 'detour';
  for (const d of DIRS) {
    const nx = head.x + d.x, ny = head.y + d.y;
    if (nx < 0 || nx >= COLS || ny < 0 || ny >= ROWS) continue;
    if (!body.has(nx + ',' + ny)) return d;
  }
  return null;
}

手动模式反向保护：经典贪吃蛇里快速连按两个方向键会让蛇头"反向"撞到自己身体。码道用 nextDir 延迟生效的方式修复——按键只记录下一次方向，真正的方向切换在 step() 移动时才应用，杜绝反向：

function step() {
  if (paused || gameOver) return;

  if (aiMode) {
    const d = aiDecide();
    if (d) dir = d;
  } else if (nextDir) {
    dir = nextDir;
    nextDir = null;
  }
  // ... 移动、吃食物、加分
}

状态面板与渲染：每次移动后 updatePanel() 刷新 AI 状态（追食物/避让/绕行）、分数、步数、长度；Canvas 深色网格 + 蛇头眼睛朝向 + 食物光晕，视觉反馈清晰。

在浏览器中实际验证时，AI 在 20×15 网格上持续自动进食，运行 200 步吃到 11 分、蛇长 14 后依然稳定——"先模拟再行动"的安全判定确实有效，AI 很少把自己绕进死角。

---

7. 真实运行效果

双击 ai-snake.html 即可开始：左侧是 20×15 的深色网格画布，右侧状态面板显示控制模式（AI 自动/手动）、AI 状态、分数、步数、蛇长。AI 模式下蛇头会自动转向最近的食物，吃到后身体变长，AI 状态实时在"追食物（绿）/避让（黄）/绕行（红）"之间切换；点击画布切到手动模式，方向键控制移动，空格暂停、R 键重开；慢/中/快三档速度（180/90/45ms）随时可调，界面底部还有完整操作提示。整体 GitHub 深色主题，蛇头带眼睛朝向、食物带光晕，观感精致。

---

8. 能力总结

• 一次生成完整可用：从需求到可双击运行的单文件 AI 贪吃蛇，全程约 5 分钟，无需手工补代码
• 算法方案专业：BFS 最短路径 + 吃食前模拟 + 蛇尾可达性判定，AI 状态机（追食物→避让→绕行）层次清晰
• 交互细节到位：人机一键切换、反向移动保护、三档速度、暂停/重开、实时状态面板，体验闭环完整
• 工程习惯良好：寻路/模拟/决策/渲染/面板更新函数拆分清晰，生成后主动做语法检查，代码可读性好

---

9. 总结

用码道开发 AI 自动寻路贪吃蛇这类网页游戏，最大的感受是"需求即产品"：把功能要点说清楚，码道就能给出包含算法选型、安全策略与视觉风格的成品。对想了解 BFS 寻路、AI 游戏决策，或者刚学前端想看看"AI 是怎么一步步追食物又不作死"的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。