分类: ai-development

标签: CodeArts, AI编程, 泡泡龙, Bubble Shooter, Canvas, 消除游戏

难度: 初级

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

1. 开篇钩子

我在码道 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:$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. 自主技术选型：六边形奇偶行交错网格，用 BFS 查找同色连通簇（≥3 消除）和悬空泡泡，坐标用 row * r * √3 计算蜂窝间距
3. 工程细节到位：瞄准辅助线支持墙壁反弹预测落点；findNearestEmpty 把飞行中的泡泡吸附到最近的空格；每 6 次发射顶部新增一行下压增加难度
4. 自检与收尾：生成后主动做语法检查验证文件完整性，再汇报功能清单

4. 任务描述

我想要一个「泡泡龙」经典消除网页游戏（Bubble Shooter），具体要求：

1. 彩色泡泡从顶部棋盘网格排列，底部有瞄准器发射同色泡泡，三个及以上同色泡泡连在一起时消除，悬空的泡泡也会掉落
2. 用 Canvas 渲染泡泡网格，圆形渐变泡泡带高光，深色背景
3. 发射前显示瞄准辅助线，支持鼠标移动瞄准、点击发射
4. 显示当前分数、剩余发射次数，全部泡泡消除过关，泡泡压到发射线则游戏结束
5. 提供重新开局按钮
6. 深色主题界面美观，包含操作提示
7. 双击 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. 能力总结

1. 一次生成完整可用：从需求到可双击运行的单文件泡泡龙，全程约 8 分钟，无需手工补代码
2. 算法方案专业：六边形蜂窝网格坐标、BFS 同色连通簇判定、悬空泡泡检测、墙壁反弹瞄准预测，方案完整可靠
3. 交互细节到位：瞄准辅助线、发射吸附、逐行下压难度曲线、粒子特效与音效、HUD 实时更新，体验闭环完整
4. 工程习惯良好：网格/搜索/渲染/游戏循环/音效函数拆分清晰，生成后主动做语法检查，代码可读性好

9. 总结

用码道开发泡泡龙这类网页游戏，最大的感受是「需求即产品」：把玩法要点说清楚，码道就能给出包含六边形网格算法、BFS 连通判定与视觉特效的成品。对想了解蜂窝网格坐标、BFS 图搜索在游戏里的应用，或者刚学前端想看看「消除游戏是怎么从零写出来的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。