七夕快到了，看看Trae老师怎么实现浪漫的烟花

前言

时间过得真快，又是一年七夕情人节，想不想给女朋友一个浪漫的惊喜呢？Trae老师为你打造了一个炫酷的烟花特效，让你的情人节更加浪漫！

先向Trae提问，让Trae帮我们打造一个能打动女孩子的炫酷烟花～

哦豁还有三个按钮，Trae还挺有浪漫的艺术细菌嘛，我们来看看Trae老师给我们带来啥惊喜

第一版的效果

自动随机烟花，浪漫啊，Trae老师

心形烟花，还是Trae老师会玩

玫瑰烟花效果也

Trae 核心代码解读

1. 烟花系统架构

javascript 复制代码

// 烟花系统核心类
class Fireworks {
    constructor() {
        this.canvas = document.getElementById('fireworks');
        this.ctx = this.canvas.getContext('2d');
        this.particles = [];    // 粒子数组
        this.fireworks = [];    // 烟花数组
        this.autoMode = false;  // 自动模式
    }
}

这些变量用于构建整个烟花系统：

canvas：绘制烟花的画布
particles：存储爆炸后的粒子效果
fireworks：存储上升的烟花火箭
autoMode：控制是否自动发射烟花

2. 烟花发射逻辑

javascript 复制代码

// 创建烟花火箭
createFirework(x, y) {
    const colors = [
        '#ff6b6b', '#ff8e8e', '#ffa500', '#ff69b4', 
        '#ff1493', '#ff00ff', '#da70d6', '#ee82ee'
    ];
    
    const firework = {
        x: x || Math.random() * this.canvas.width,
        y: this.canvas.height,
        targetX: x || Math.random() * this.canvas.width,
        targetY: Math.random() * this.canvas.height * 0.5,
        speed: 5 + Math.random() * 5,
        color: colors[Math.floor(Math.random() * colors.length)]
    };
    
    this.fireworks.push(firework);
}

这个函数负责创建烟花火箭：

随机选择浪漫的粉色系颜色
计算从底部到目标位置的轨迹
设置随机的上升速度
将烟花添加到待发射列表

3. 心形烟花算法

javascript 复制代码

// 心形烟花数学公式
createHeartFirework() {
    const centerX = this.canvas.width / 2;
    const centerY = this.canvas.height / 2;
    
    for (let i = 0; i < 20; i++) {
        const angle = (i / 20) * Math.PI * 2;
        // 心形参数方程
        const heartX = centerX + 16 * Math.pow(Math.sin(angle), 3) * 10;
        const heartY = centerY - (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle)) * 10;
        
        this.createSpecialFirework(heartX, heartY, '#ff1744');
    }
}

这个函数实现了浪漫的心形烟花：

使用心形参数方程计算坐标
在屏幕中央形成完美的爱心图案
延迟发射营造心跳效果

4. 粒子爆炸效果

javascript 复制代码

// 烟花爆炸生成粒子
explode(firework) {
    const particleCount = firework.special ? 50 : 30;
    
    for (let i = 0; i < particleCount; i++) {
        const angle = (Math.PI * 2 * i) / particleCount;
        const velocity = 2 + Math.random() * 3;
        
        this.particles.push({
            x: firework.x,
            y: firework.y,
            vx: Math.cos(angle) * velocity,
            vy: Math.sin(angle) * velocity,
            color: firework.color,
            alpha: 1,
            size: 2 + Math.random() * 3,
            gravity: 0.05,
            decay: 0.02
        });
    }
}

这个函数负责烟花爆炸效果：

根据角度均匀分布粒子
添加重力效果模拟真实物理
设置透明度衰减营造消失效果
粒子大小随机变化增加层次感

5. 动画循环系统

javascript 复制代码

// 主动画循环
animate() {
    this.updateFireworks();   // 更新烟花位置
    this.updateParticles();   // 更新粒子状态
    this.draw();              // 绘制当前帧
    requestAnimationFrame(() => this.animate());
}

这个循环是整个系统的核心：

使用requestAnimationFrame确保流畅动画
分离更新和绘制逻辑，提高性能
持续循环创造连续动画效果

Trae老师这次的特色功能

心形烟花

点击"心形烟花"按钮，在屏幕中央绽放一个完美的爱心，数学公式计算的心形曲线，保证每个角度都完美对称！

玫瑰烟花

使用玫瑰线方程r = cos(4θ)，创造出浪漫的玫瑰花图案，每个花瓣都精确计算，让女孩子感受到你的用心！

自动模式

开启自动模式后，烟花会持续随机绽放，营造浪漫氛围，适合表白时的背景效果！

最终效果展示

打开浏览器访问http://localhost:8083，就能看到浪漫的七夕烟花特效了！

点击屏幕，烟花绽放的瞬间，就是表白成功的开始～

总结

这个七夕情人节烟花项目，不仅展示了前端技术的魅力，更重要的是传递了浪漫的情感。Trae老师通过数学公式计算的心形和玫瑰图案，让技术也变得有温度，让她感受到浪漫的气氛吧！

无论是用来表白，还是单纯享受编程的乐趣，这个项目都能让你感受到代码与浪漫的完美结合！Trae老师太浪漫了

七夕快到了，提前祝大家七夕快乐，天下有情人终成眷属！