Fireworks

canvas { position: absolute; top: 0; left: 0; } // Fireworks effect (function() { var canvas = document.getElementById(“fireworks”); var ctx = canvas.getContext(“2d”); var fireworks = []; // Set canvas size canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Create firework particle function Particle(x, y) { this.x = x; this.y = y; this.velocityX = Math.random() * 4 – 2; this.velocityY = Math.random() * 4 – 2; this.alpha = 1; } Particle.prototype.update = function() { this.x += this.velocityX; this.y += this.velocityY; this.alpha -= 0.01; }; Particle.prototype.draw = function() { ctx.beginPath(); ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); ctx.fillStyle = “rgba(255, 255, 255, ” + this.alpha + “)”; ctx.fill(); }; // Create firework function Firework() { this.x = Math.random() * canvas.width; this.y = canvas.height; this.particles = []; for (var i = 0; i < 30; i++) { this.particles.push(new Particle(this.x, this.y)); } } Firework.prototype.update = function() { for (var i = 0; i < this.particles.length; i++) { this.particles[i].update(); if (this.particles[i].alpha <= 0) { this.particles.splice(i, 1); } } }; Firework.prototype.draw = function() { for (var i = 0; i < this.particles.length; i++) { this.particles[i].draw(); } }; // Create new fireworks function createFirework() { fireworks.push(new Firework()); } // Update fireworks function updateFireworks() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < fireworks.length; i++) { fireworks[i].update(); fireworks[i].draw(); if (fireworks[i].particles.length === 0) { fireworks.splice(i, 1); } } } // Start the fireworks animation function startAnimation() { setInterval(function() { createFirework(); }, 500); setInterval(function() { updateFireworks(); }, 30); } // Start the animation when the page loads window.onload = startAnimation; })();