粒子星空：鼠标划过漫天星辰，一键切换昼夜
粒子星空：鼠标划过漫天星辰，一键切换昼夜
输入一句需求，码道自动生成一个包含粒子轨迹、烟花爆炸和主题切换的交互式动画网页。全程零手写代码。
码道 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
一、码道是什么
码道（CodeArts） 是华为云推出的 AI 编程助手，支持通过自然语言描述需求，自动生成完整可运行的项目代码。它不仅有 IDE 插件，还提供命令行工具（CLI），让你在终端里用一句话就能完成开发任务。
码道 CLI 开通步骤：
- 访问开通链接完成开通
- 在 AK/SK 管理页面 生成访问密钥
- 在终端配置环境变量
CODEARTS_CLI_AK和CODEARTS_CLI_SK - 执行
codearts run "你的需求"即可开始开发
二、任务描述
这次我们让码道生成一个交互式粒子星空动画网页，需要满足以下需求：
- 深色背景上星星闪烁
- 鼠标移动产生彩色粒子轨迹
- 点击屏幕产生烟花爆炸效果
- 右上角按钮可切换白天/黑夜主题
- 画布自适应窗口大小
- 所有代码写在一个 HTML 文件中
在终端中输入：
codearts run "创建一个漂亮的交互式粒子星空动画网页，保存为index.html。
要求：1)鼠标移动产生彩色粒子轨迹 2)点击产生烟花爆炸效果
3)右上角有白天/黑夜主题切换按钮 4)深色背景上星星闪烁
5)粒子有渐变颜色和淡出动画 6)画布填充整个窗口"
三、开发过程
需求输入后，码道开始工作
码道收到需求后，自动分析任务，确定了技术方案：使用 HTML5 Canvas 作为渲染引擎，纯 JavaScript 实现粒子系统和动画循环。整个过程无需选择框架、无需手动搭建项目结构。
截图1：默认夜间模式，深色渐变背景上随机分布闪烁的星星
粒子轨迹跟随鼠标
鼠标在画布上移动时，码道生成的代码会在鼠标位置连续创建彩色粒子。粒子使用 HSL 颜色空间，色调根据坐标动态计算，形成彩虹渐变效果。
截图2：鼠标移动产生的彩色粒子轨迹，颜色随位置渐变的拖尾效果
点击触发烟花爆炸
点击画布任意位置，码道会以点击点为中心生成 80 个向外扩散的粒子，模拟烟花爆炸效果。烟花粒子具有重力模拟和摩擦力衰减，运动轨迹更加自然。
截图3：点击触发烟花爆炸，多个彩色粒子从中心点向外扩散
一键切换主题
右上角的主题切换按钮采用毛玻璃效果设计，点击即可在夜间星空和白天天空之间切换。切换过程有平滑的颜色过渡动画。
截图4：切换到白天模式，浅蓝色渐变天空替代深色星空
四、核心代码解析
码道生成的 index.html 共 297 行，结构清晰。我们来解析几个关键部分。
粒子系统
粒子是动画的核心。Particle 类封装了粒子的位置、速度、颜色和生命周期管理：
class Particle {
constructor(x, y, color, isFirework = false) {
this.x = x;
this.y = y;
this.size = isFirework ? Math.random() * 3 + 1 : Math.random() * 2 + 0.5;
this.speedX = (Math.random() * 2 - 1) * (isFirework ? 5 : 2);
this.speedY = (Math.random() * 2 - 1) * (isFirework ? 5 : 2);
this.color = color;
this.alpha = 1;
this.decay = isFirework ? 0.015 : 0.02;
this.gravity = isFirework ? 0.05 : 0;
this.friction = 0.97;
}
update() {
this.speedX *= this.friction;
this.speedY *= this.friction;
this.speedY += this.gravity;
this.x += this.speedX;
this.y += this.speedY;
this.alpha -= this.decay;
}
}
烟花粒子与轨迹粒子的区别通过 isFirework 参数控制：
- 烟花粒子：尺寸更大、初始速度更快、有重力、衰减稍慢
- 轨迹粒子：尺寸更小、速度更慢、无重力、快速淡出
星星闪烁
Star 类使用正弦波控制亮度，实现自然的呼吸式闪烁效果：
class Star {
update() {
this.phase += this.speed;
this.brightness = 0.5 + Math.sin(this.phase) * 0.5;
}
}
每个星星有自己的随机相位和闪烁速度，避免了同步闪烁的机械感。
颜色算法
轨迹粒子使用基于坐标的 HSL 颜色，让不同位置的粒子呈现不同颜色：
function gradientColor(x, y) {
const hue = (x + y) % 360;
return `hsl(${hue}, 100%, 65%)`;
}
烟花粒子则使用完全随机的色调，每次点击都产生不同的颜色组合。
动画循环
动画循环使用 requestAnimationFrame，通过半透明覆盖实现粒子淡出：
function animate() {
ctx.fillStyle = isNightMode
? 'rgba(12, 12, 46, 0.1)'
: 'rgba(135, 206, 235, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// ... 更新星星和粒子
requestAnimationFrame(animate);
}
这种"半透明清屏"技术避免了逐帧擦除全部内容，让粒子自然产生拖尾残影效果。
五、运行效果
将生成的 index.html 文件直接在浏览器中打开即可体验：
- 移动鼠标 → 彩色粒子轨迹跟随，颜色随位置渐变
- 点击屏幕 → 80 个粒子以点击点为中心爆炸扩散
- 点击右上角按钮 → 昼夜主题切换，含平滑过渡动画
- 缩放窗口 → 画布自动适应，星星重新分布
项目源码已开源在 GitCode：查看完整代码
六、能力总结
这次体验验证了码道的几个核心能力：
| 能力 | 表现 |
|---|---|
| 需求理解 | 准确解析 6 项需求，无遗漏 |
| 技术选型 | 纯 HTML5 Canvas + JS，零依赖，开箱即用 |
| 代码质量 | 297 行结构清晰，类封装规范，性能优化到位 |
| 视觉效果 | 粒子渐变、星星闪烁、烟花爆炸、主题切换均实现 |
| 交互体验 | 鼠标轨迹、点击烟花、主题切换均流畅运行 |
一句话需求 → 完整可运行的交互式网页，码道的端到端交付能力令人印象深刻。
七、总结
通过这次实践可以看到，码道不仅仅是一个代码补全工具，它能够从一句自然语言需求出发，自主完成技术选型、架构设计、代码生成，交付一个包含粒子系统、动画循环和主题切换的完整网页应用。
对于开发者来说，这意味着可以把精力从重复的搭建工作中解放出来，专注于创意和产品体验。下次你想快速验证一个交互式网页的想法时，不妨试试码道——一句话就够了。
开通码道：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
AK/SK 配置：https://codearts.huaweicloud.com/portal/settings/cli-auth
浙公网安备 33010602011771号