用码道 AI 编程助手开发泡泡龙消除网页游戏

华为云开发者联盟

墨衍会员 · AI 创作全网分发码龄10年

关注

原创 2026-08-05 17:16:00 287 阅读 AI 写同款· GEO 优化 ›

一段需求，码道自动写出 560 行、约 17.9 KB 的单文件泡泡龙——六边形蜂窝网格、BFS 查找同色连通簇、瞄准辅助线带墙壁反弹预测、消除粒子爆裂 + Web Audio 音效，双击 HTML 就能发射泡泡、连消过关

分类: 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:$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. 码道能力一览

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

自然语言编程：我说「泡泡龙消除网页游戏」，码道直接理解成蜂窝网格 + 连通消除 + 悬空掉落 + 发射机制 + 过关判定的完整方案
自主技术选型：六边形奇偶行交错网格，用 BFS 查找同色连通簇（≥3 消除）和悬空泡泡，坐标用 row * r * √3 计算蜂窝间距
工程细节到位：瞄准辅助线支持墙壁反弹预测落点；findNearestEmpty 把飞行中的泡泡吸附到最近的空格；每 6 次发射顶部新增一行下压增加难度
自检与收尾：生成后主动做语法检查验证文件完整性，再汇报功能清单

4. 任务描述

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

彩色泡泡从顶部棋盘网格排列，底部有瞄准器发射同色泡泡，三个及以上同色泡泡连在一起时消除，悬空的泡泡也会掉落
用 Canvas 渲染泡泡网格，圆形渐变泡泡带高光，深色背景
发射前显示瞄准辅助线，支持鼠标移动瞄准、点击发射
显示当前分数、剩余发射次数，全部泡泡消除过关，泡泡压到发射线则游戏结束
提供重新开局按钮
深色主题界面美观，包含操作提示
双击 HTML 文件即可在浏览器中运行

5. 开发过程及真实截图

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

码道 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 吸附到最近的空格。

在浏览器中实际验证时，发射 3 个泡泡后瞄准辅助线清晰可见，泡泡准确吸附到网格，同色三连瞬间消除并弹出粒子爆裂效果——蜂窝坐标与 BFS 消除逻辑配合得很好。

7. 真实运行效果

双击 bubble_shooter.html 即可开始：顶部是 6 色渐变泡泡组成的蜂窝网格，底部炮台显示当前要发射的泡泡，鼠标移动时出现瞄准辅助线（碰到左右墙会反弹预测），点击左键发射。发射后泡泡沿轨迹飞行、撞到泡泡堆或顶部时吸附到最近的网格位置；三个及以上同色泡泡连通即消除并加分，悬空的泡泡自动掉落；右侧面板实时显示分数与剩余发射次数（初始 30 次），每 6 次发射顶部新增一行下压，清空全部泡泡过关，泡泡压到红线或次数用完则失败，「重新开局」一键重来。消除时有粒子爆裂与闪光特效，还带 Web Audio 合成音效。

8. 能力总结

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

9. 总结

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