Hiệu ứng pháo hoa và hoa ở 4 góc trang trí Tết

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Realistic Fireworks Effect</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      background-color: black;
    }
  </style>
</head>
<body>
<img style="position:fixed;z-index:99999;top:0;left:0" src="https://lh3.googleusercontent.com/Nm43LAO21g0ua9Muu0BUELDCkQfCm4sOKIPlXTM3jScFEuuR2q89H4CBKx7bkbzyAvXA-MPb6bFlPXyRGnep6Y3IsBR171nGx3tkB2SD9zyw3qXlxj8iv7SHoP1t0YK-wSmIcg=w141-h143-no"/>
<img style="position:fixed;z-index:99999;top:0;right:0" src="https://lh3.googleusercontent.com/yfLzqRzZL5T5i20FJbhfXEjDjkUT3PshER0urEBiAq1Euy4NTMZBKnMsH8ni-R7ffM8a_mgua5IjbGnp4DWUXQDI_-mNaDfAkgcyFlNNa5u0kRqjaBtW077U47CWsJgNfhhk-g=w141-h143-no"/>
<img style="position:fixed;z-index:99999;bottom:0px;left:0px" src="https://lh3.googleusercontent.com/2U90SIgXGe2W0O2NPluq66u-98JcgCpKBmRvWDcniKdybBTjqIjB0Noq0UsRdG2oOTZlvVh26T1mU9e1nY8lTuOFrSru_saC4J6K6refpHTSJiCb_SykRe2i7MbHgj8q5ESMzg=w200-h159-no"/>
<img style="position:fixed;z-index:9999;bottom:0px;right:0px" src="https://lh3.googleusercontent.com/XH0FHlEyLBF5hzcgkDvSjKlInwSYZ5TUoBruIJoRNnXtezP4kCdi0S7_dwXhee-AbfoWL4g9osBMG32sG7u9Tc30NPOP61GpytphyxoFcZgknHoRm54BprHHO0Umd2q8PpV5Lw=w162-h167-no"/>
  <canvas id="fireworksCanvas"></canvas>

// Particle class to represent each particle in the firework
    class Particle {
      constructor(x, y, color, velocityX, velocityY, size, lifetime) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.velocityX = velocityX;
        this.velocityY = velocityY;
        this.size = size;
        this.lifetime = lifetime;
      }

// Update particle position and decrease lifetime
      update() {
        this.x += this.velocityX;
        this.y += this.velocityY;
        this.lifetime--;
        this.velocityY += 0.05; // gravity effect
      }

// Draw the particle
      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
      }
    }

// Firework class to create and manage fireworks
    class Firework {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.exploded = false;
        this.particles = [];
        this.velocityY = -3; // Chậm hơn, tốc độ di chuyển của pháo hoa
        this.velocityX = 0;
        this.createParticles();
      }

// Create particles for the firework explosion
      createParticles() {
        const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FFFF33'];
        const particleCount = 50; // Giảm số lượng hạt pháo
        for (let i = 0; i < particleCount; i++) {
          const angle = Math.random() * Math.PI * 2;
          const velocity = Math.random() * 5 + 2;
          const velocityX = Math.cos(angle) * velocity;
          const velocityY = Math.sin(angle) * velocity;
          const size = Math.random() * 3 + 1;
          const lifetime = Math.random() * 50 + 50;
          const color = colors[Math.floor(Math.random() * colors.length)];
          this.particles.push(new Particle(this.x, this.y, color, velocityX, velocityY, size, lifetime));
        }
      }

// Update and draw all particles
      update() {
        if (this.y <= canvas.height / 3 && !this.exploded) {
          this.exploded = true; // Explode when the rocket reaches the peak
          this.createParticles();
        }

if (!this.exploded) {
          this.y += this.velocityY; // Rise upwards
        }

// Update particles after explosion
        this.particles.forEach((particle, index) => {
          particle.update();
          particle.draw();
          if (particle.lifetime <= 0) {
            this.particles.splice(index, 1);
          }
        });
      }

// Draw the rocket if it hasn't exploded yet
      draw() {
        if (!this.exploded) {
          ctx.beginPath();
          ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
          ctx.fillStyle = '#FFFFFF'; // White color for the rocket
          ctx.fill();
        }
      }
    }

// Array to hold all fireworks
    const fireworks = [];

// Create a new firework at random positions
    function createFirework() {
      const x = Math.random() * canvas.width;
      const y = canvas.height;
      fireworks.push(new Firework(x, y));
    }

// Animation loop
    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      fireworks.forEach(firework => {
        firework.update();
        firework.draw();
      });
      requestAnimationFrame(animate);
    }

// Create a firework every 1000ms (1s)
    setInterval(createFirework, 1000);

// Start the animation
    animate();
  </script>
</body>
</html>

Kết quả

Mã nhúng iFrame