用码道 AI 编程助手开发 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:$PATHexport CODEARTS_CLI_AK=你的AKexport CODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

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

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

3. 码道能力一览

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

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

4. 任务描述

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

1. 贪吃蛇由 AI 自动控制，用 BFS/A* 寻路算法自动寻找食物，并能避开身体与墙壁
2. 显示 AI 状态（追食物/避让/绕行）和当前分数、步数、长度
3. 支持人机切换：鼠标点击切换 AI 自动与键盘方向键手动控制
4. 提供重新开局、速度调节（慢/中/快）
5. 深色主题界面美观，Canvas 渲染，包含操作提示
6. 双击 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 深色网格 + 蛇头眼睛朝向 + 食物光晕，视觉反馈清晰。

7. 真实运行效果

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

8. 能力总结

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

9. 总结

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