粒子烟花：一键绽放满屏绚烂，点亮整个夜空
粒子烟花：一键绽放满屏绚烂，点亮整个夜空
一行命令，码道帮我写出了交互式粒子烟花效果——点击 Canvas 绽放彩色烟花，粒子爆炸后拖尾渐隐，自动发射，10 种配色方案随机切换
分类: ai-development
标签: CodeArts, AI编程, 粒子烟花, Canvas, HTML
难度: 初级
读者: 前端开发者、技术爱好者
1. 开篇钩子
不用写一行 Canvas 渲染代码，不用设计粒子物理系统——我在码道 TUI 里输入了一段需求描述，30 秒后一个交互式粒子烟花效果页面就自动生成了。点击任意位置发射火箭，升空爆炸后五彩烟花绽放。
2. 码道 TUI 安装
码道 CLI 官方提供 Windows 与 macOS/Linux 两种安装方式，按自己的系统选一种即可。
Windows（仅支持在 PowerShell 执行）
# 1. 一键安装
irm https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1 | iex
# 2. 配置环境变量
$env:CODEARTS_CLI_AK="你的AK"
$env:CODEARTS_CLI_SK="你的SK"
# 3. 启动 TUI
codearts
macOS / Linux（终端）
# 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
安装成功后终端会回显码道 CLI 的版本号。如果还没用过码道，可以免费开通体验版试试：
AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth
👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
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://codearts.huaweicloud.com/portal/settings/cli-auth)
> 👉 **还没有码道？立即开通体验**：[https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz](https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz)
安装完成后，在**命令行终端窗口或 PowerShell 窗口**输入 `codearts` 回车，即可打开码道 TUI 交互界面。在 TUI 中输入你的开发需求，码道就会自动分析需求并生成完整代码。
---
## 3. 码道能力一览
这次开发中，码道展示了以下能力：
- **自然语言编程**：我说"粒子烟花效果"，码道直接理解意图并生成了完整的物理引擎、渲染循环和交互逻辑
- **自主 UI 设计**：自动选择深色背景 + 10 套彩色粒子配色方案 + 发光文字提示
- **完整交互逻辑**：实现了点击发射火箭 → 升空 → 爆炸 → 粒子扩散 → 拖尾渐隐全流程
- **响应式适配**：自动适配窗口大小变化，移动端触摸支持
---
## 4. 任务描述
我想要一个粒子烟花效果页面，具体要求：
- 黑色全屏 Canvas 背景
- 点击鼠标位置绽放彩色烟花
- 不同颜色和大小的粒子
- 粒子爆炸后拖尾下落
- 有闪烁和渐隐效果
- 响应式设计
**开发命令**：
打开码道 TUI，在输入框中输入需求
codearts
---
## 5. 开发过程
打开码道 TUI，进入交互式开发界面：
在输入框中粘贴中文需求，按回车提交给码道，码道开始思考开发方案：
几分钟后，码道开发完成，生成了完整的 `fireworks.html` 文件：
---
## 6. 代码解析
码道生成的粒子烟花效果页面包含完整的物理引擎和渲染系统，核心逻辑分为三部分：
### 粒子类（Particle）
每个粒子有独立的物理属性：速度、重力、衰减、闪烁、拖尾。
```javascript
class Particle {
constructor(x, y, color, speed, angle, size, life) {
this.x = x;
this.y = y;
this.color = color;
this.vx = Math.cos(angle) * speed;
this.vy = Math.sin(angle) * speed;
this.size = size;
this.life = life;
this.maxLife = life;
this.alpha = 1;
this.flickerSpeed = 0.02 + Math.random() * 0.08;
this.trail = [];
}
update() {
this.trail.push({ x: this.x, y: this.y, alpha: this.alpha });
if (this.trail.length > this.trailLen) this.trail.shift();
this.vx *= FRICTION;
this.vy *= FRICTION;
this.vy += GRAVITY;
this.x += this.vx;
this.y += this.vy;
this.life--;
this.alpha = Math.pow(this.life / this.maxLife, 1.5);
}
}
火箭发射器（Rocket）
点击位置触发的不是直接爆炸，而是先发射一枚火箭，升空到目标位置后才爆炸，模拟真实烟花效果：
function launchRocket(tx, ty) {
const sx = tx + (Math.random() - 0.5) * 100;
const sy = H + 20;
rockets.push(new Rocket(sx, sy, tx, ty));
}
// 还有自动发射机制，每隔 2-3 秒自动绽放一朵烟花
function autoFirework() {
autoTimer++;
if (autoTimer > 120 + Math.random() * 180) {
autoTimer = 0;
const x = W * 0.15 + Math.random() * W * 0.7;
const y = H * 0.1 + Math.random() * H * 0.4;
launchRocket(x, y);
}
}
爆炸系统（Explode）
爆炸时从 10 套配色方案中随机选取，每种爆炸有 3 种不同的粒子分布模式（均匀环、随机散射、分层环），保证每次爆炸效果不同：
const PALETTES = [
['#ff1744','#ff5252','#ff8a80','#ffcdd2','#fff'], // 红色系
['#00e5ff','#18ffff','#84ffff','#e0f7fa','#fff'], // 青色系
['#76ff03','#b2ff59','#ccff90','#f1f8e9','#fff'], // 绿色系
['#ff6d00','#ff9e00','#ffbd4d','#fff8e1','#fff'], // 橙色系
// ...共10种配色
];
function explode(x, y) {
const palette = PALETTES[Math.floor(Math.random() * PALETTES.length)];
const count = 60 + Math.floor(Math.random() * 80);
for (let i = 0; i < count; i++) {
const color = palette[Math.floor(Math.random() * palette.length)];
let angle, speed, size, life;
// 三种爆炸模式：均匀环、随机散射、分层环
// ...
particles.push(new Particle(x, y, color, speed, angle, size, life));
}
}
动画循环
使用 requestAnimationFrame 驱动渲染循环，通过半透明覆盖（rgba(0,0,0,0.15)）实现拖尾残影效果，使用 lighter 混合模式让粒子叠加发光：
function loop() {
requestAnimationFrame(loop);
// 半透明覆盖实现拖尾残影
ctx.fillStyle = `rgba(0,0,0,${TRAIL_ALPHA})`;
ctx.fillRect(0, 0, W, H);
// lighter 混合模式让粒子叠加发光
ctx.globalCompositeOperation = 'lighter';
autoFirework();
for (let i = rockets.length - 1; i >= 0; i--) {
rockets[i].update();
rockets[i].draw();
if (!rockets[i].alive) {
explode(rockets[i].x, rockets[i].y);
rockets.splice(i, 1);
}
}
for (let i = particles.length - 1; i >= 0; i--) {
particles[i].update();
particles[i].draw();
if (particles[i].dead) particles.splice(i, 1);
}
}
7. 运行效果
打开生成的 fireworks.html：
在全屏黑色 Canvas 上点击任意位置，就会看到：
- 一枚发光的火箭从屏幕底部升起，飞到点击位置后爆炸
- 五彩粒子向四周扩散，受重力影响自然下落
- 粒子带有拖尾效果，并伴有闪烁发光
- 粒子逐渐透明渐隐消失
- 每次点击的色彩组合和爆炸形态各不相同
- 不操作时系统也会每隔 2-3 秒自动绽放烟花
8. 能力总结
| 能力 | 说明 |
|---|---|
| 自然语言理解 | "粒子烟花效果"→ 完整的发射+爆炸+渲染引擎 |
| 物理模拟 | 重力、摩擦减速、粒子衰减、闪烁动画 |
| Canvas 渲染 | lighter 混合模式实现发光效果 |
| 交互设计 | 火箭发射（非直接爆炸），移动端触摸支持，自动发射 |
9. 总结
通过这次实践，可以看到码道 AI 编程助手在创意可视化领域的强大能力。输入自然语言需求，码道不仅生成了完整的烟花粒子系统，还设计出了"火箭发射→升空→爆炸→拖尾"的完整效果链，并加入了 10 套配色方案和自动发射机制，远超基本的粒子效果。
如果你还没用过码道，不妨复制上面的安装命令体验一下。
可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
浙公网安备 33010602011771号