华容道曹操的 81 步出逃一段需求码道自动写出 209 行、约 8.5 KB 的单文件华容道——曹操 2×2 红金大块头居中压阵张飞赵云马超黄忠四将竖守两侧关羽横刀拦路10 块棋子 4×5 棋盘上辗转腾挪把曹操从底部出口送出去就赢。双击index.html就能开玩步数、计时、撤销、打乱一应俱全。分类: ai-development标签: CodeArts, AI编程, 华容道, 益智游戏, 滑动拼图, JavaScript难度: 初级读者: 前端开发者、编程学习者、技术写作者1. 开篇钩子华容道可能是国人最熟悉的滑动拼图曹操 2×2 居中四将 1×2 竖守两侧关羽 2×1 横刀拦路四个小兵填空目标是把曹操从棋盘底部的出口送出去。在码道 TUI 里贴了一段需求「做一个华容道网页游戏鼠标点击选中棋子、点击相邻空位移动带步数计时、撤销、随机打乱……」排队等了一会儿约 5 分钟后就自动生成了一个 209 行、约 8.5 KB 的完整游戏深色木纹背景上 10 块圆角棋子各就各位点一下选中棋子金色描边高亮再点相邻空格就能滑动HUD 实时跳动步数和用时走错一步点「撤销」回退棋盘不满意点「随机打乱」重来曹操滑到底部出口立刻弹出胜利结算面板。双击index.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. 码道能力一览这次开发中码道展示了以下能力自然语言编程一句「华容道网页游戏」被理解成完整的方案——经典初始布局、选中滑动交互、步数计时、撤销打乱、胜利结算经典布局建模10 块棋子用坐标数组精确描述曹操 2×2、关羽 2×1 横置、四将 1×2 竖置、四兵 1×1棋盘用 4×5 网格占位检测交互细节到位点击选中金色描边高亮、只允许滑向相邻空格、撤步记录用历史快照栈实现、打乱 400 次随机滑动且保证不直接生成胜利局面自检与收尾生成后主动核对初始布局、移动规则、胜利条件、打乱防胜局、撤销可用性等关键点再汇报实现清单4. 任务描述我想要一个「华容道」滑动拼图网页游戏具体要求经典华容道初始布局曹操 2×2 居中偏上、关羽 2×1 横置、张飞/赵云/马超/黄忠 1×2 竖置、4 个小兵 1×1鼠标点击选中棋子再点击相邻空位移动棋子只能滑向相邻空格左上角实时显示步数与用时支持撤销上一步、重新开始、随机打乱棋子用圆角矩形卡片显示人物名字并用不同颜色区分曹操金色最大置于顶部中央通关条件曹操从底部出口移出弹出胜利结算面板显示步数与用时并支持再来一局深色木纹背景整体现代卡片风格输出单个index.html文件代码控制在 500 行以内5. 开发过程及真实截图我在码道 TUI 中贴入需求码道先进入模型排队随后开始拆解需求码道先规划棋盘网格、棋子数据结构与移动规则再逐段生成代码约 5 分钟后码道汇报完成已生成index.html209 行远低于 500 行限制并核对初始布局、移动逻辑、胜利条件、打乱防胜局、撤销可用性等关键点双击生成的index.html在浏览器中运行深色木纹背景上 10 块棋子各就各位HUD 显示「步数 0」「用时 00:00」底部是撤销、重新开始、随机打乱三个按钮6. 代码解析码道生成的代码是一个自包含的单页应用核心逻辑非常清晰经典布局10 块棋子用x/y/w/h坐标数组定义曹操 2×2 居中、关羽 2×1 横置、四将 1×2 竖置、四兵 1×1render()按坐标铺成圆角卡片pieces[{id:zf,name:张飞,x:0,y:0,w:1,h:2,cls:g},{id:cao,name:曹操,x:1,y:0,w:2,h:2,cls:cao},{id:zy,name:赵云,x:3,y:0,w:1,h:2,cls:g},{id:mc,name:马超,x:0,y:2,w:1,h:2,cls:g},{id:gy,name:关羽,x:1,y:2,w:2,h:1,cls:gy},{id:hz,name:黄忠,x:3,y:2,w:1,h:2,cls:g},{id:b1,name:兵,x:1,y:3,w:1,h:1,cls:b},{id:b2,name:兵,x:2,y:3,w:1,h:1,cls:b},{id:b3,name:兵,x:0,y:4,w:1,h:1,cls:b},{id:b4,name:兵,x:3,y:4,w:1,h:1,cls:b}];移动判定点击空格时先算目标格子相对棋子的方位只有贴着棋子边缘的空格才会触发移动目标区域全部为空才算合法杜绝「跳格」if(exp.x-1eyp.yeyp.yp.h)dx-1;elseif(exp.xp.weyp.yeyp.yp.h)dx1;elseif(eyp.y-1exp.xexp.xp.w)dy-1;elseif(eyp.yp.hexp.xexp.xp.w)dy1;elsereturn;constnxp.xdx,nyp.ydy;for(leti0;ip.w;i)for(letj0;jp.h;j){constoccg[nyj][nxi];if(occ!nullocc!p.id)return;}胜利判定每次移动后检查曹操是否到达底部出口x1、y3到达即停止计时并弹出结算面板functioncheckWin(){constcaopieces.find(pp.idcao);if(cao.x1cao.y3){clearInterval(timer);document.getElementById(mSteps).textContentsteps;document.getElementById(mTime).textContenttimeEl.textContent;document.getElementById(modal).classList.add(show);}}随机打乱与撤销打乱用 400 次「随机选棋子随机方向」滑动生成局面且检测到曹操直接站在出口就递归重打保证不是送分局撤销则用历史快照栈history弹回上一步for(leti0;i400;i){constppieces[Math.floor(Math.random()*pieces.length)];const[dx,dy]dirs[Math.floor(Math.random()*4)];constnxp.xdx,nyp.ydy;if(nx0||ny0||nxp.wCOLS||nyp.hROWS)continue;constggrid();letoktrue;for(leta0;ap.w;a)for(letb0;bp.h;b){constoccg[nyb][nxa];if(occ!nullocc!p.id){okfalse;break;}}if(ok){p.xnx;p.yny;}}constcaopieces.find(pp.idcao);if(cao.x1cao.y3){shuffle();return;}7. 真实运行效果打开index.html深色木纹渐变背景上一块 4×5 棋盘10 块圆角棋子按经典布局排列曹操红金 2×2 居中四将蓝色竖列两侧关羽金黄横刀中路小兵绿色填空。点曹操金色描边高亮再点右侧空档整块棋子带着 0.18 秒缓动滑过去步数 1、计时开始。移动过程很顺棋子只认相邻空格点远的地方没反应规则边界清晰走错一步点「撤销」立刻回退棋面太乱点「随机打乱」生成新局。把曹操一路挪到底部出口结算面板弹出步数和用时定格点「再来一局」满血重开。整局体验紧凑从开局布局到通关结算一气呵成。8. 能力总结单文件交付209 行 HTML/CSS/JS 全部在一个index.html里双击即玩零依赖规则建模干净棋子用x/y/w/h描述占位网格统一做碰撞检测移动/打乱/撤销共用一套数据细节品控到位打乱自动避开胜利局面、撤销用快照栈、选中高亮与缓动动画提升手感扩展空间清晰想加难度分级、步数排行榜、皮肤切换在pieces数据与render()上扩展都很方便9. 总结从一句自然语言到可玩的益智游戏码道只用了约 5 分钟。华容道这类「规则经典、实现有讲究」的滑动拼图正好是验证 AI 编程助手从需求理解、布局建模到交互细节全链路能力的试金石。想亲手试试把上面的需求复制进码道 TUI你也能收获一条属于自己的曹操出逃记。