先分享一个有趣的体验。在码道 TUI 中输入了一段需求，大意是“制作一个泡泡龙经典消除网页游戏，单个 HTML 文件即可运行”。大约 8 分钟后，一个 560 行、约 17.9 KB 的完整游戏就自动生成了。
打开一试，效果令人惊喜：彩色泡泡按六边形蜂窝网格排列在顶部，底部炮台瞄准发射同色泡泡，三个及以上同色泡泡连通即消除、悬空的泡泡自动掉落；发射前有瞄准辅助线，支持墙壁反弹预测落点；30 次发射限制、每 6 次顶部新增一行下压、清空全部泡泡过关、压到红线失败；消除瞬间有粒子爆裂特效和 Web Audio 音效。深色玻璃拟态面板、霓虹标题、脉动底线，视觉效果精致。直接双击 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
安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。将开发需求粘贴到输入框，码道会自动分析并生成完整代码。
3. 码道能力一览
此次开发中，码道展示了几个值得关注的能力：
- 自然语言编程：我说“泡泡龙消除网页游戏”，码道直接理解成蜂窝网格 + 连通消除 + 悬空掉落 + 发射机制 + 过关判定的完整方案。
- 自主技术选型：六边形奇偶行交错网格，用 BFS 查找同色连通簇（≥3 消除）和悬空泡泡，坐标用
row * r * √3计算蜂窝间距。 - 工程细节到位：瞄准辅助线支持墙壁反弹预测落点；
findNearestEmpty把飞行中的泡泡吸附到最近的空格；每 6 次发射顶部新增一行下压增加难度。 - 自检与收尾：生成后主动做语法检查验证文件完整性，再汇报功能清单。
4. 任务描述
具体需求如下：
- 彩色泡泡从顶部棋盘网格排列，底部有瞄准器发射同色泡泡，三个及以上同色泡泡连在一起时消除，悬空的泡泡也会掉落。
- 用 Canvas 渲染泡泡网格，圆形渐变泡泡带高光，深色背景。
- 发射前显示瞄准辅助线，支持鼠标移动瞄准、点击发射。
- 显示当前分数、剩余发射次数，全部泡泡消除过关，泡泡压到发射线则游戏结束。
- 提供重新开局按钮。
- 深色主题界面美观，包含操作提示。
- 双击 HTML 文件即可在浏览器中运行。
5. 开发过程及真实截图
在码道 TUI 中粘贴需求后，码道开始拆解需求并生成代码：
码道在 Thinking 中规划六边形网格坐标与碰撞吸附逻辑（getBubblePos / findNearestEmpty）：
大约 8 分钟后，码道汇报完成：文件已创建、输出功能清单：
双击生成的 bubble_shooter.html 在浏览器中运行，瞄准辅助线对准泡泡堆，发射后同色泡泡连消、剩余发射次数实时更新：
6. 代码解析
码道生成的代码是一个自包含的单页应用，核心逻辑十分清晰：
六边形网格坐标：奇偶行交错排列，奇数行偏移半个泡泡半径，纵坐标用 √3 保证蜂窝间距：
function getPos(row, col) {
const r = config.radius;
const x = col * 2 * r + r + (row % 2 === 1 ? r : 0);
const y = row * r * Math.sqrt(3) + r;
return { x, y };
}
BFS 同色连通簇：从落点开始广度优先搜索，收集所有同色相邻泡泡，数量 ≥ 3 就整体消除：
function findCluster(row, col) {
const color = state.grid[row][col];
if (color === null) return [];
const visited = new Set(), cluster = [], queue = [[row, col]];
visited.add(row + ',' + col);
while (queue.length) {
const [r, c] = queue.shift();
cluster.push([r, c]);
for (const [nr, nc] of getNeighbors(r, c)) {
const key = nr + ',' + nc;
if (!visited.has(key) && state.grid[nr][nc] === color) {
visited.add(key);
queue.push([nr, nc]);
}
}
}
return cluster;
}
悬空泡泡检测：从顶部第一行所有泡泡出发做 BFS，凡是不与顶部连通的泡泡都被视为悬空、统一掉落：
function findFloating() {
const connected = new Set(), queue = [];
for (let c = 0; c < COLS; c++) {
if (state.grid[0][c] !== null) { queue.push([0, c]); connected.add('0,' + c); }
}
while (queue.length) {
const [r, c] = queue.shift();
for (const [nr, nc] of getNeighbors(r, c)) {
const key = nr + ',' + nc;
if (!connected.has(key) && state.grid[nr][nc] !== null) {
connected.add(key);
queue.push([nr, nc]);
}
}
}
const floating = [];
for (let r = 0; r < ROWS; r++)
for (let c = 0; c < COLS; c++)
if (state.grid[r][c] !== null && !connected.has(r + ',' + c))
floating.push([r, c]);
return floating;
}
瞄准辅助线：drawAimLine 从炮口向鼠标方向画线，遇到左右墙壁时按反射角继续预测，让玩家能提前看清反弹后的落点；发射后泡泡沿该方向飞行，撞到已有泡泡或顶部时用 findNearestEmpty 吸附到最近的空格。
7. 真实运行效果
双击 bubble_shooter.html 即可开始：顶部是 6 色渐变泡泡组成的蜂窝网格，底部炮台显示当前要发射的泡泡，鼠标移动时出现瞄准辅助线（碰到左右墙会反弹预测），点击左键发射。发射后泡泡沿轨迹飞行、撞到泡泡堆或顶部时吸附到最近的网格位置；三个及以上同色泡泡连通即消除并加分，悬空的泡泡自动掉落；右侧面板实时显示分数与剩余发射次数（初始 30 次），每 6 次发射顶部新增一行下压，清空全部泡泡过关，泡泡压到红线或次数用完则失败，“重新开局”一键重来。消除时有粒子爆裂与闪光特效，还带 Web Audio 合成音效。
8. 能力总结
- 一次生成完整可用：从需求到可双击运行的单文件泡泡龙，全程约 8 分钟，无需手工补代码。
- 算法方案专业：六边形蜂窝网格坐标、BFS 同色连通簇判定、悬空泡泡检测、墙壁反弹瞄准预测，方案完整可靠。
- 交互细节到位：瞄准辅助线、发射吸附、逐行下压难度曲线、粒子特效与音效、HUD 实时更新，体验闭环完整。
- 工程习惯良好：网格/搜索/渲染/游戏循环/音效函数拆分清晰，生成后主动做语法检查，代码可读性好。
9. 总结
使用码道开发泡泡龙这类网页游戏，最大的感受是“需求即产品”：把玩法要点说清楚，码道就能给出包含六边形网格算法、BFS 连通判定与视觉特效的成品。对想了解蜂窝网格坐标、BFS 图搜索在游戏里的应用，或者刚学前端想看看“消除游戏是怎么从零写出来的”的同学，让码道先生成一份，再对照源码逐行解读，是非常好的学习路径。