一段需求码道自动写出 561 行、约 16 KB 的单文件迷宫生成器——DFS 递归回溯随机生成、三档尺寸、点击设起点/终点、BFS 最短路径动画求解、步数统计双击 HTML 就能玩分类: 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-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)# 2. 配置环境变量exportPATH~/.codeartsdoer/installers:$PATHexportCODEARTS_CLI_AK你的AKexportCODEARTS_CLI_SK你的SK# 3. 启动 TUIcodeartsAK/SK 获取https://codearts.huaweicloud.com/portal/settings/cli-auth还没有码道立即开通体验https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz安装完成后在命令行或 PowerShell 中输入codearts回车即可打开码道 TUI。把开发需求贴进输入框码道会自动分析并生成完整代码。3. 码道能力一览这次开发中码道展示了以下能力自然语言编程我说「迷宫生成器网页应用」码道直接理解成生成算法 求解算法 起终点交互 动画展示 统计一整套方案自主技术选型生成用 DFS 递归回溯迭代栈实现防爆栈求解用 BFS 保证最短路径前驱回溯还原路线工程细节到位Canvas 自适应单元格与高 DPR 适配、起终点防重合、求解动画逐格展示、Toast 提示自检与收尾生成后主动用 PowerShell 验证文件大小再汇报功能清单4. 任务描述我想要一个迷宫生成器Maze Generator网页应用具体要求单个 HTML 文件即可运行不需要任何构建步骤用递归回溯算法DFS随机生成迷宫Canvas 渲染网格迷宫提供「生成新迷宫」按钮和尺寸选择小/中/大支持点击设置起点和终点默认左上角起点、右下角终点「自动求解」按钮用 BFS 广度优先搜索找到最短路径并高亮动画展示支持一键清除路径显示迷宫尺寸与步数统计浅色主题界面简洁支持移动端触屏操作5. 开发过程及真实截图我在码道 TUI 中贴入需求后码道开始拆解需求并生成代码生成完成后码道主动运行命令验证输出文件约 2 分 9 秒后码道汇报完成输出功能清单并提示文件位置双击生成的maze-generator.html在浏览器中直接运行点击「自动求解」后橙色最短路径动画展示步数统计同步更新6. 代码解析码道生成的代码是一个自包含的单页应用核心逻辑非常清晰迷宫生成DFS 递归回溯——维护待访问栈随机打乱方向打通相邻未访问格子的墙functiongenerateMaze(w,h){constwallsArray.from({length:h},()Array(w).fill(true));conststack[[0,0]];walls[0][0]false;while(stack.length){const[cx,cy]stack[stack.length-1];constdirsshuffle(DIRS);// 找到未访问邻居则打通墙并入栈否则回溯}returnwalls;}最短路径求解BFS 从起点逐层扩散用前驱数组记录路径到达终点后回溯还原functionbfs(start,end,walls){constprev{};// 前驱回溯constqueue[start];// 逐层访问邻居记录前驱到达终点后回溯还原路径}渲染与交互Canvas 按单元格绘制墙壁点击格子在「设起点/设终点」模式下更新起终点求解动画用定时器逐格点亮路径canvas.addEventListener(click,e{constcellcellFromEvent(e);if(modestart)setStart(cell);elseif(modeend)setEnd(cell);});统计与提示求解完成后把最短步数写入统计区操作成功/失败用 Toast 轻提示functionsolve(){constpathbfs(start,end,walls);statsEl.textContent最短步数:${path.length-1};animatePath(path);}从这些代码可以看出码道不只把功能拼出来迭代栈防爆栈、BFS 前驱回溯、起终点防重合、动画逐格展示这些影响体验的细节也都处理得比较到位。7. 真实运行效果双击maze-generator.html即可开始游戏页面顶部是「迷宫生成器」标题中间是 Canvas 迷宫黑色墙壁、白色通道下方依次是「小/中/大」尺寸按钮、「设起点/设终点」模式按钮、「生成新迷宫」「自动求解」「清除路径」功能按钮右侧/底部显示尺寸、最短步数与状态统计。点击「自动求解」橙色路径从起点逐格亮起至终点最短步数同步显示点「设起点」后点迷宫任意格可移动起点「清除路径」一键还原纯迷宫。默认 25x25 中等迷宫生成几乎瞬间完成切到 41x41 大迷宫更壮观。浅色主题简洁手机上触屏可直接操作。8. 能力总结一次生成完整可用从需求到可双击运行的单文件应用全程约 2 分钟无需手工补代码技术含量扎实DFS 递归回溯生成、BFS 最短路径、前驱回溯还原算法方案专业交互细节到位起终点自定义、求解动画、一键清除、防重合校验、Toast 提示体验闭环完整工程习惯良好生成/求解/渲染/交互函数拆分清晰、高 DPR 适配、响应式布局代码结构清晰可读9. 总结用码道开发迷宫生成器这类网页应用最大的感受是「需求即产品」把功能要点说清楚码道就能给出包含完整技术方案与视觉风格的成品。对想快速玩一把迷宫算法、或者刚学前端想看看「DFS/BFS 算法 Canvas 动画是怎么写的」的同学让码道先生成一份再对照源码逐行读是很好的学习路径。下一轮我打算让码道继续挑战不同类型的网页应用继续记录真实的开发过程。