怎样用JavaScript实现粒子系统？

// 粒子类
class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.vx = Math.random() * 2 - 1; // 随机水平速度
        this.vy = Math.random() * 2 - 1; // 随机垂直速度
        this.radius = Math.random() * 3 + 1; // 随机半径
        this.alpha = 1; // 初始透明度
    }

    update() {
        this.x += this.vx;
        this.y += this.vy;
        this.alpha -= 0.01; // 逐渐消失
    }

    draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
        ctx.fill();
    }
}

// 粒子系统类
class ParticleSystem {
    constructor() {
        this.particles = [];
    }

    addParticle(x, y) {
        this.particles.push(new Particle(x, y));
    }

    update() {
        this.particles = this.particles.filter(p => p.alpha > 0);
        this.particles.forEach(p => p.update());
    }

    draw(ctx) {
        this.particles.forEach(p => p.draw(ctx));
    }
}

// 初始化Canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const system = new ParticleSystem();

// 动画循环
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    system.update();
    system.draw(ctx);

    // 每帧添加新粒子
    system.addParticle(Math.random() * canvas.width, Math.random() * canvas.height);

    requestAnimationFrame(animate);
}

animate();

class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.vx = Math.random() * 2 - 1;
        this.vy = Math.random() * 2 - 1;
        this.radius = Math.random() * 3 + 1;
        this.alpha = 1;
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
        this.rotation = Math.random() * Math.PI * 2; // 初始旋转
        this.rotationSpeed = Math.random() * 0.1 - 0.05; // 旋转速度
    }

    update() {
        this.x += this.vx;
        this.y += this.vy;
        this.alpha -= 0.01;
        this.rotation += this.rotationSpeed;
    }

    draw(ctx) {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.rotation);
        ctx.beginPath();
        ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${this.color}, ${this.alpha})`;
        ctx.fill();
        ctx.restore();
    }
}

class ParticleSystem {
    constructor(maxParticles = 1000) {
        this.particles = [];
        this.maxParticles = maxParticles;
    }

    addParticle(x, y) {
        if (this.particles.length < this.maxParticles) {
            this.particles.push(new Particle(x, y));
        }
    }

    update() {
        this.particles = this.particles.filter(p => p.alpha > 0);
        this.particles.forEach(p => p.update());
    }

    draw(ctx) {
        ctx.globalCompositeOperation = 'lighter'; // 叠加模式
        this.particles.forEach(p => p.draw(ctx));
    }
}

canvas.addEventListener('click', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    for (let i = 0; i < 50; i++) {
        system.addParticle(x, y);
    }
});