用码道 AI 编程助手开发迷宫生成器网页应用

分类: ai-development

标签: CodeArts, AI编程, Maze, 网页应用, Canvas

难度: 初级

读者: 前端开发者、编程学习者、技术写作者

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个迷宫生成器（Maze Generator）网页应用，单个 HTML 文件即可运行……」约 2 分 9 秒后，一个 561 行、约 16 KB 的完整迷宫生成器就自动生成了：DFS 递归回溯算法随机生成迷宫（用栈代替递归避免爆栈），Canvas 渲染网格迷宫；小 15x15 / 中 25x25 / 大 41x41 三档尺寸一键切换；点击「设起点」「设终点」可自定义起终点（默认左上→右下，禁止重合）；「自动求解」用 BFS 广度优先搜索找到最短路径并高亮动画展示，同时显示最短步数；「清除路径」一键还原；尺寸、步数、状态统计与 Toast 提示齐全。双击 HTML 就能玩。

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. 自然语言编程：我说「迷宫生成器网页应用」，码道直接理解成生成算法 + 求解算法 + 起终点交互 + 动画展示 + 统计一整套方案
2. 自主技术选型：生成用 DFS 递归回溯（迭代栈实现防爆栈），求解用 BFS 保证最短路径（前驱回溯还原路线）
3. 工程细节到位：Canvas 自适应单元格与高 DPR 适配、起终点防重合、求解动画逐格展示、Toast 提示
4. 自检与收尾：生成后主动用 PowerShell 验证文件大小，再汇报功能清单

4. 任务描述

我想要一个迷宫生成器（Maze Generator）网页应用，具体要求：

1. 单个 HTML 文件即可运行，不需要任何构建步骤
2. 用递归回溯算法（DFS）随机生成迷宫，Canvas 渲染网格迷宫
3. 提供「生成新迷宫」按钮和尺寸选择（小/中/大）
4. 支持点击设置起点和终点（默认左上角起点、右下角终点）
5. 「自动求解」按钮用 BFS 广度优先搜索找到最短路径并高亮动画展示
6. 支持一键清除路径
7. 显示迷宫尺寸与步数统计
8. 浅色主题，界面简洁，支持移动端触屏操作

5. 开发过程及真实截图

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

生成完成后，码道主动运行命令验证输出文件：

约 2 分 9 秒后，码道汇报完成，输出功能清单，并提示文件位置：

双击生成的 maze-generator.html 在浏览器中直接运行，点击「自动求解」后橙色最短路径动画展示，步数统计同步更新：

6. 代码解析

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

迷宫生成：DFS 递归回溯——维护待访问栈，随机打乱方向，打通相邻未访问格子的墙：

function generateMaze(w, h) {const walls = Array.from({ length: h }, () => Array(w).fill(true));const stack = [[0, 0]];walls[0][0] = false;while (stack.length) {const [cx, cy] = stack[stack.length - 1];const dirs = shuffle(DIRS);// 找到未访问邻居则打通墙并入栈，否则回溯}return walls;}

最短路径求解：BFS 从起点逐层扩散，用前驱数组记录路径，到达终点后回溯还原：

function bfs(start, end, walls) {const prev = {};// 前驱回溯const queue = [start];// 逐层访问邻居，记录前驱，到达终点后回溯还原路径}

渲染与交互：Canvas 按单元格绘制墙壁，点击格子在「设起点/设终点」模式下更新起终点；求解动画用定时器逐格点亮路径：

canvas.addEventListener('click', e => {const cell = cellFromEvent(e);if (mode === 'start') setStart(cell);else if (mode === 'end') setEnd(cell);});

统计与提示：求解完成后把最短步数写入统计区，操作成功/失败用 Toast 轻提示：

function solve() {const path = bfs(start, end, walls);statsEl.textContent = `最短步数: ${path.length - 1}`;animatePath(path);}

从这些代码可以看出，码道不只把功能拼出来，迭代栈防爆栈、BFS 前驱回溯、起终点防重合、动画逐格展示这些影响体验的细节也都处理得比较到位。

7. 真实运行效果

双击 maze-generator.html 即可开始游戏：页面顶部是「迷宫生成器」标题，中间是 Canvas 迷宫（黑色墙壁、白色通道），下方依次是「小/中/大」尺寸按钮、「设起点/设终点」模式按钮、「生成新迷宫」「自动求解」「清除路径」功能按钮；右侧/底部显示尺寸、最短步数与状态统计。点击「自动求解」，橙色路径从起点逐格亮起至终点，最短步数同步显示；点「设起点」后点迷宫任意格可移动起点；「清除路径」一键还原纯迷宫。默认 25x25 中等迷宫生成几乎瞬间完成，切到 41x41 大迷宫更壮观。浅色主题简洁，手机上触屏可直接操作。

8. 能力总结

1. 一次生成完整可用：从需求到可双击运行的单文件应用，全程约 2 分钟，无需手工补代码
2. 技术含量扎实：DFS 递归回溯生成、BFS 最短路径、前驱回溯还原，算法方案专业
3. 交互细节到位：起终点自定义、求解动画、一键清除、防重合校验、Toast 提示，体验闭环完整
4. 工程习惯良好：生成/求解/渲染/交互函数拆分清晰、高 DPR 适配、响应式布局，代码结构清晰可读

9. 总结

用码道开发迷宫生成器这类网页应用，最大的感受是「需求即产品」：把功能要点说清楚，码道就能给出包含完整技术方案与视觉风格的成品。对想快速玩一把迷宫算法、或者刚学前端想看看「DFS/BFS 算法 + Canvas 动画是怎么写的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。