打气球大作战：限时连击爆炸，手速眼力双重挑战

本案例用华为云 CodeArts 码道 WebUI 作为开发入口：在浏览器里打开码道对话窗口，用自然语言描述需求，
码道直接生成一个 677 行的单文件 index.html 打气球游戏，内置部署自动给公网地址。
不用装 CLI、不用配 AK/SK，全程浏览器搞定，公网链接还能直接分享给朋友试玩。
源码和截图全部开源在文末 Demo Park。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

浏览器打开 https://developer.huaweicloud.com/devspace/
弹窗「请选择要进入的版本」→ 点击 体验版
首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
弹窗「临时凭据自动配置」→ 点击同意，沙箱自动创建

进入 AI 开发者空间主界面后，左侧菜单栏找到 CodeArts，点击它右侧的浏览器图标，弹出码道 WebUI 对话窗口：

打开后码道 WebUI 初始界面，底部输入框提示「尽管吩咐，我来帮你搞定」：

小贴士：体验版沙箱 3 小时后自动重置，关键内容记得及时保存。

码道能做什么

码道是华为云 CodeArts 的 AI 编程助手，WebUI 版直接在浏览器对话窗口里工作：

输入自然语言需求，码道自动拆解任务、创建项目、编写代码，不需要手动搭框架。
生成过程实时显示 shell 命令、思考过程和文件输出，进度一目了然。
自带部署能力：完成后自动启动 HTTP 服务给出内部预览链接；
再要一句「用 DevBridge 生成公网分享链接」，码道会安装 devbridge CLI 并配置公网映射，
得到一个 8 小时有效的公网地址，手机、同事都能直接打开。
支持继续对话修改，比如「把气球改成水果造型」「加个炸弹气球」。

这个游戏玩什么

一个限时打气球的纯前端休闲游戏：

屏幕上不断飘起 8 种颜色的气球，从底部生成向上飘浮，左右摇摆，越小越快分越高。
点击气球打爆得分，限时 60 秒内得分越高越好，倒计时最后 10 秒变红跳动。
连击加倍：每 5 连击提升一档倍数（1x→1.5x→2x→2.5x→3x…封顶 4x），Miss 清零。
爆炸时有粒子碎片 + 星星 + 闪光环动画，带重力下落和淡出效果。
天空渐变背景（蓝→粉橙日落）+ 飘动云朵，毛玻璃 HUD 卡片，自定义准星光标。
最终弹出得分弹窗：总分、打爆数、最高连击、命中率、等级徽章，一键重新开始。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

开发一个打气球大作战网页小游戏：屏幕上不断飘起各种颜色的气球，点击打爆气球得分，限时60秒内得分越高越好，要有连击计数（连续打爆不miss加倍）、爆炸粒子动画效果、倒计时显示、最终得分弹窗、重新开始按钮，背景天空渐变，界面美观可爱，单个网页即跑即玩。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

开发过程

需求发出后，左侧「任务」计数 +1，右上出现停止生成按钮，码道开始工作。

整个过程约 5 分钟，码道自动完成：

创建项目目录 /workspace/balloon-game
生成单文件 index.html（677 行），包含气球渲染、点击命中检测、连击倍数、爆炸粒子、倒计时、得分弹窗、天空渐变背景等完整逻辑
启动 python3 -m http.server 8080 部署服务
curl 自检确认页面可访问

完成后码道输出任务摘要，包含访问地址和功能清单。接着在对话框继续输入：

请用 DevBridge 生成一个公网可访问的分享链接

码道执行 devbridge create → devbridge port create → devbridge host，探测各 region 公网 URL，最终确认 cn-north-4 返回 200：

打开公网链接即可试玩游戏，首次访问经过华为云安全确认页，点击继续进入。

关键代码解读

源码是单文件 index.html，全部逻辑在 <script> 里。看几个关键实现。

1. 气球绘制

气球用 Canvas 椭圆绘制，径向渐变模拟立体感，绳子用二次贝塞尔曲线带摇摆：

function drawBalloon(b) {
  ctx.save();
  ctx.translate(b.x, b.y);
  ctx.rotate(Math.sin(b.wobble) * 0.06);

  // 绳子（摇摆曲线）
  ctx.strokeStyle = 'rgba(120,140,170,0.7)';
  ctx.beginPath();
  ctx.moveTo(0, b.r * 1.02);
  const sway = Math.sin(b.wobble * 1.5) * 6;
  ctx.quadraticCurveTo(sway, b.r * 1.02 + 22, sway * 0.5, b.r * 1.02 + 44);
  ctx.stroke();

  // 气球主体（椭圆 + 径向渐变）
  const grad = ctx.createRadialGradient(-b.r * 0.35, -b.r * 0.4, b.r * 0.1, 0, 0, b.r * 1.1);
  grad.addColorStop(0, b.pal.light);
  grad.addColorStop(0.55, b.pal.main);
  grad.addColorStop(1, shade(b.pal.main, -25));
  ctx.fillStyle = grad;
  ctx.beginPath();
  ctx.ellipse(0, 0, b.r * 0.92, b.r * 1.05, 0, 0, Math.PI * 2);
  ctx.fill();
}

b.wobble 是随时间递增的相位，让气球左右轻摆，绳子跟着甩动。

2. 打爆与连击

点击命中后触发 popBalloon，移除气球、生成粒子、更新连击和分数：

function popBalloon(idx, px, py) {
  const b = balloons[idx];
  balloons.splice(idx, 1);
  spawnParticles(b.x, b.y, b.pal);

  combo += 1;
  if (combo > maxCombo) maxCombo = combo;

  // 倍数：每5连击 +0.5x，封顶 4x
  const mult = Math.min(1 + Math.floor(combo / 5) * 0.5, 4);
  // 基础分：越小越高，保底10
  const base = Math.max(10, Math.round(50 - b.r));
  const gain = Math.round(base * mult);
  score += gain;
}

连击每 5 次跳一档倍数，小气球基础分更高——鼓励精准打小目标。Miss（点空或气球飘走）清零连击。

3. 爆炸粒子动画

打爆瞬间生成碎片、星星和闪光环，带重力和淡出：

function spawnParticles(x, y, pal) {
  // 碎片
  for (let i = 0; i < 12; i++) {
    const a = Math.random() * Math.PI * 2;
    const sp = 2 + Math.random() * 5;
    particles.push({
      x, y, vx: Math.cos(a) * sp, vy: Math.sin(a) * sp - 2,
      size: 3 + Math.random() * 4, color: pal.main,
      life: 1, gravity: 0.15, type: 'shard'
    });
  }
  // 星星 + 闪光环
  particles.push({ x, y, vx: 0, vy: 0, size: 0, maxLife: 0.35, ring: true, color: pal.light });
}

每帧更新粒子位置（加重力下落），life 递减控制透明度，ring 类型画扩散圆环。

4. 倒计时与难度递增

60 秒倒计时，最后 10 秒变红跳动；后期气球更快更小，偶尔双发：

function update(dt) {
  timeLeft -= dt;
  if (timeLeft <= 10) {
    timerEl.classList.add('danger');  // 变红跳动
  }
  // 难度递增：时间过半后生成更快
  const elapsed = 60 - timeLeft;
  const spawnRate = elapsed > 30 ? 0.8 : 0.5;  // 秒/个
}

运行效果

实际验证：打开页面立刻开始，气球从底部飘起，点击打爆弹出粒子和分数浮字；连续打爆 5 个后倍数跳到 1.5x，连击文字闪烁；打偏一次连击清零显示 Miss；倒计时最后 10 秒变红跳动；60 秒结束弹出得分弹窗，显示总分、打爆数、最高连击、命中率和等级徽章；点重新开始立即重开。

界面天空渐变 + 云朵飘动，毛玻璃 HUD 卡片显示分数和连击，自定义准星光标，整体可爱风格。打开公网链接手机也能玩。

直接下载试玩

这个 Demo 已经完整开源（源代码、本文档、全部截图），托管在 Demo Park 仓库：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-balloon-pop

打开上面的链接，进入 codearts-balloon-pop 文件夹，把 index.html 下载到本地，浏览器打开即可运行，无需安装任何依赖。

总结

一次需求生成一个能玩的打气球游戏，从气球渲染、点击交互、连击倍数到爆炸粒子动画，全部由码道 WebUI 完成，我只需要把玩法、规则、界面说清楚。而且自带部署，公网链接直接分享给别人试玩，不需要自己搭服务。

想体验这种从自然语言直接到可运行产品的流程，免费开通码道体验版：