三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

华容道：曹操的 81 步出逃

发布时间：2026/8/5 20:29:06 三亩地 编程学习日记
华容道：曹操的 81 步出逃

华容道：曹操的 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 -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. 码道能力一览

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

  • 自然语言编程：一句「华容道网页游戏」被理解成完整的方案——经典初始布局、选中滑动交互、步数计时、撤销打乱、胜利结算
  • 经典布局建模：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 中贴入需求，码道先进入模型排队，随后开始拆解需求：

码道 TUI 输入需求

码道先规划棋盘网格、棋子数据结构与移动规则，再逐段生成代码：

码道开发思考中

约 5 分钟后，码道汇报完成：已生成 index.html（209 行，远低于 500 行限制），并核对初始布局、移动逻辑、胜利条件、打乱防胜局、撤销可用性等关键点：

码道开发完成

双击生成的 index.html 在浏览器中运行，深色木纹背景上 10 块棋子各就各位，HUD 显示「步数 0」「用时 00:00」，底部是撤销、重新开始、随机打乱三个按钮：

华容道运行效果

6. 代码解析

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

经典布局：10 块棋子用 x/y/w/h 坐标数组定义，曹操 2×2 居中、关羽 2×1 横置、四将 1×2 竖置、四兵 1×1，render() 按坐标铺成圆角卡片：

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(ex===p.x-1&&ey>=p.y&&ey<p.y+p.h)dx=-1;
else if(ex===p.x+p.w&&ey>=p.y&&ey<p.y+p.h)dx=1;
else if(ey===p.y-1&&ex>=p.x&&ex<p.x+p.w)dy=-1;
else if(ey===p.y+p.h&&ex>=p.x&&ex<p.x+p.w)dy=1;
else return;
const nx=p.x+dx,ny=p.y+dy;
for(let i=0;i<p.w;i++)for(let j=0;j<p.h;j++){const occ=g[ny+j][nx+i];if(occ!==null&&occ!==p.id)return;
}

胜利判定：每次移动后检查曹操是否到达底部出口（x=1、y=3），到达即停止计时并弹出结算面板：

function checkWin(){const cao=pieces.find(p=>p.id==='cao');if(cao.x===1&&cao.y===3){clearInterval(timer);document.getElementById('mSteps').textContent=steps;document.getElementById('mTime').textContent=timeEl.textContent;document.getElementById('modal').classList.add('show');}
}

随机打乱与撤销：打乱用 400 次「随机选棋子+随机方向」滑动生成局面，且检测到曹操直接站在出口就递归重打，保证不是送分局；撤销则用历史快照栈 history 弹回上一步：

for(let i=0;i<400;i++){const p=pieces[Math.floor(Math.random()*pieces.length)];const [dx,dy]=dirs[Math.floor(Math.random()*4)];const nx=p.x+dx,ny=p.y+dy;if(nx<0||ny<0||nx+p.w>COLS||ny+p.h>ROWS)continue;const g=grid();let ok=true;for(let a=0;a<p.w;a++)for(let b=0;b<p.h;b++){const occ=g[ny+b][nx+a];if(occ!==null&&occ!==p.id){ok=false;break;}}if(ok){p.x=nx;p.y=ny;}
}
const cao=pieces.find(p=>p.id==='cao');
if(cao.x===1&&cao.y===3){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，你也能收获一条属于自己的曹操出逃记。

编程学习 学习日记 实战经验
← 返回列表