分类: ai-development

标签: CodeArts, AI编程, 推箱子, Sokoban, Canvas, 益智游戏

难度: 初级

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

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个推箱子经典益智网页游戏，单个 HTML 文件即可运行……」约 4 分钟后，一个 336 行、约 11.5 KB 的完整游戏就自动生成了：4 个关卡从易到难，用方向键或 WASD 控制角色在网格地图中移动，把箱子推到红色目标圈上即通关，箱子到目标点会变绿、全部到位自动进入下一关；不能同时推两个箱子、也不能拉箱子；状态栏实时显示当前关卡（1/4）、步数、推箱次数，支持撤回上一步（U）、重开本关（R）、上一关/下一关切换。整个地图用字符画定义（# 墙、$ 箱子、@ 玩家、. 目标），直观又好扩展。双击 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. 自主技术选型：用 ASCII 字符画定义关卡（# 墙 / $ 箱子 / @ 玩家 / . 目标），解析成坐标数组；Canvas 渲染地图与角色
3. 工程细节到位：移动前把状态快照压栈实现撤回（Undo）；推箱时同时检查目标格是否是墙或箱子，杜绝「推两个」「拉箱子」
4. 自检与收尾：生成后主动做语法检查验证文件完整性，再汇报功能清单

4. 任务描述

我想要一个「推箱子」（Sokoban）经典益智网页游戏，具体要求：

1. 玩家用方向键控制角色在网格地图中移动，把箱子推到目标点上即通关，箱子不能同时推两个也不能拉
2. 内置至少 3 个关卡，从易到难，通关后自动进入下一关
3. 用 Canvas 渲染地图（墙壁、地面、箱子、目标点、玩家、完成标记），箱子到目标点显示特殊颜色
4. 显示当前关卡、步数、推箱次数，支持撤回上一步（Undo）和重新开始本关
5. 深色主题界面美观，包含操作提示
6. 双击 HTML 文件即可在浏览器中运行

5. 开发过程及真实截图

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

码道在 Thinking 中先用字符画设计关卡，再规划解析、渲染与键盘控制的结构：

约 4 分钟后，码道汇报完成：文件已创建、输出功能清单：

双击生成的 sokoban.html 在浏览器中运行，第 1 关地图中蓝色玩家、棕色箱子与红色目标圈清晰可见，状态栏显示关卡 1/4、步数与推箱次数：

6. 代码解析

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

字符画关卡定义：每个关卡用字符串数组描述，符号含义一目了然，parseLevel 把字符解析成墙壁/箱子/目标/玩家的坐标数组：

const LEVELS = [["#######","# #","#.#","#$#","#@#","# #","#######"],// ... 更多关卡];

移动与推箱规则：目标格是墙或已有箱子则不能移动；前面是箱子时检查箱子前方，推得动才移动并累计步数与推箱次数：

function move(dx, dy) {if (locked) return;const nx = state.player.x + dx, ny = state.player.y + dy;if (isWall(nx, ny)) return;const bi = boxAt(nx, ny);if (bi >= 0) {const bx = nx + dx, by = ny + dy;if (isWall(bx, by) || boxAt(bx, by) >= 0) return;history.push(snapshot());state.boxes[bi] = {x: bx, y: by};state.player = {x: nx, y: ny};steps++; pushes++;} else {history.push(snapshot());state.player = {x: nx, y: ny};steps++;}updateUI(); render(); checkWin();}

撤回（Undo）：每次移动前把完整状态快照压入 history 栈，undo() 直接弹出恢复，实现任意步数撤回：

function undo() {if (locked || history.length === 0) return;restore(history.pop());updateUI(); render();}

通关判定：所有箱子都在目标点上即通关，最后一关显示「恭喜全部通关！」并回到第 1 关，否则 1 秒后自动进入下一关：

function checkWin() {if (!state.boxes.every(b => isTarget(b.x, b.y))) return;locked = true;const last = levelIndex + 1 >= LEVELS.length;showToast(last ? '恭喜全部通关！' : '通关！进入下一关…');setTimeout(() => {if (last) loadLevel(0);else loadLevel(levelIndex + 1);}, 1000);}

7. 真实运行效果

双击 sokoban.html 即可开始：居中画布按字符画地图渲染墙壁（灰色方块）、地面网格、棕色箱子、红色目标圈与蓝色玩家；箱子被推到目标点上会变绿并带完成标记。方向键或 WASD 控制移动，推不动时会原地不动（不会穿透墙壁、不会同时推两个、不能拉箱子）。顶部状态栏实时显示当前关卡（1/4）、步数与推箱次数；「撤回(U)」撤销上一步、「重新开始®」重置本关、「上一关/下一关」自由切换关卡。通关瞬间弹出「通关！进入下一关…」toast，全部通关后回到第 1 关。深色主题配合操作说明，新手也能快速上手。

8. 能力总结

1. 一次生成完整可用：从需求到可双击运行的单文件推箱子，全程约 4 分钟，无需手工补代码
2. 规则实现严谨：移动/推箱/阻挡判定清晰，杜绝「推两个箱子」「拉箱子」等非法操作，撤回基于状态快照栈
3. 关卡设计完整：4 个关卡由易到难，字符画定义便于扩展，通关自动跳转、全部通关回环
4. 工程习惯良好：解析/渲染/移动/撤回/判定函数拆分清晰，生成后主动做语法检查，代码可读性好

9. 总结

用码道开发推箱子这类益智网页游戏，最大的感受是「需求即产品」：把规则要点说清楚，码道就能给出包含地图解析、移动规则、撤回机制与关卡循环的成品。对想了解字符画地图解析、状态快照式撤销，或者刚学前端想看看「益智游戏是怎么从零写出来的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。