企业官网建设流程全解析

一段需求，码道自动写出 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-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"# 2. 配置环境变量exportPATH=~/.codeartsdoer/installers:$PATHexportCODEARTS_CLI_AK=你的AKexportCODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

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 中贴入需求后，码道开始拆解需求并生成代码：

码道在 Thinking 中规划六边形网格坐标与碰撞吸附逻辑（getBubblePos/findNearestEmpty）：

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

双击生成的bubble_shooter.html在浏览器中运行，瞄准辅助线对准泡泡堆，发射后同色泡泡连消、剩余发射次数实时更新：

6. 代码解析

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

六边形网格坐标：奇偶行交错排列，奇数行偏移半个泡泡半径，纵坐标用√3保证蜂窝间距：

functiongetPos(row,col){constr=config.radius;constx=col*2*r+r+(row%2===1?r:0);consty=row*r*Math.sqrt(3)+r;return{x,y};}

BFS 同色连通簇：从落点开始广度优先搜索，收集所有同色相邻泡泡，数量 ≥ 3 就整体消除：

functionfindCluster(row,col){constcolor=state.grid[row][col];if(color===null)return[];constvisited=newSet(),cluster=[],queue=[[row,col]];visited.add(row+','+col);while(queue.length){const[r,c]=queue.shift();cluster.push([r,c]);for(const[nr,nc]ofgetNeighbors(r,c)){constkey=nr+','+nc;if(!visited.has(key)&&state.grid[nr][nc]===color){visited.add(key);queue.push([nr,nc]);}}}returncluster;}

悬空泡泡检测：从顶部第一行所有泡泡出发做 BFS，凡是不与顶部连通的泡泡都被视为悬空、统一掉落：

functionfindFloating(){constconnected=newSet(),queue=[];for(letc=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]ofgetNeighbors(r,c)){constkey=nr+','+nc;if(!connected.has(key)&&state.grid[nr][nc]!==null){connected.add(key);queue.push([nr,nc]);}}}constfloating=[];for(letr=0;r<ROWS;r++)for(letc=0;c<COLS;c++)if(state.grid[r][c]!==null&&!connected.has(r+','+c))floating.push([r,c]);returnfloating;}

瞄准辅助线：drawAimLine从炮口向鼠标方向画线，遇到左右墙壁时按反射角继续预测，让玩家能提前看清反弹后的落点；发射后泡泡沿该方向飞行，撞到已有泡泡或顶部时用findNearestEmpty吸附到最近的空格。

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

7. 真实运行效果

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

8. 能力总结

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

9. 总结

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