烟花js代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fireworks</title>
<style>
  canvas {
    display: block;
    background: #000;
  }
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script>
  const canvas = document.getElementById('fireworksCanvas');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.radius = Math.random() * 2 + 1;
      this.color = `hsl(${Math.random() * 360}, 50%, 50%)`;
      this.velocity = {
        x: (Math.random() - 0.5) * 10,
        y: (Math.random() - 0.5) * 10
      };
    }

    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
      ctx.fillStyle = this.color;
      ctx.fill();
    }

    update() {
      this.x += this.velocity.x;
      this.y += this.velocity.y;
      this.draw();
    }
  }

  function createFirework() {
    const x = Math.random() * canvas.width;
    const y = canvas.height;
    for (let i = 0; i < 100; i++) {
      particles.push(new Particle(x, y));
    }
  }

  let particles = [];
  setInterval(createFirework, 1000);

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach((particle, index) => {
      particle.update();
      if (particle.y < 0) {
        particles.splice(index, 1);
      }
    });
    requestAnimationFrame(animate);
  }

  animate();
</script>
</body>
</html>