Beautiful Fireworks

I'll create a beautiful fireworks display with sound effects for you. Beautiful Fireworks

Sound

* { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; background-color: #000; font-family: Arial, sans-serif; } canvas { display: block; width: 100%; height: 100vh; } .controls { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; align-items: center; z-index: 100; } button { padding: 10px 20px; background: linear-gradient(45deg, #ff4081, #7c4dff); border: none; border-radius: 25px; color: white; font-size: 16px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: all 0.3s; } button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); } button:active { transform: translateY(1px); } label { color: white; font-size: 16px; display: flex; align-items: center; gap: 5px; cursor: pointer; } input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } // Canvas setup const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); const launchBtn = document.getElementById('launch'); const soundToggle = document.getElementById('sound'); // Set canvas dimensions canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Resize canvas when window is resized window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // Sound effects const explosionSounds = [ new Audio('sounds/explosion1.mp3'), new Audio('sounds/explosion2.mp3'), new Audio('sounds/explosion3.mp3') ]; const whistleSounds = [ new Audio('sounds/whistle1.mp3'), new Audio('sounds/whistle2.mp3') ]; // Preload sounds explosionSounds.forEach(sound => { sound.load(); sound.volume = 0.4; }); whistleSounds.forEach(sound => { sound.load(); sound.volume = 0.2; }); // Play a random sound from an array function playRandomSound(soundArray) { if (!soundToggle.checked) return; const sound = soundArray[Math.floor(Math.random() * soundArray.length)]; // Create a clone to allow overlapping sounds const soundClone = sound.cloneNode(); soundClone.volume = sound.volume; soundClone.play().catch(e => console.log("Sound play prevented:", e)); } // Firework class class Firework { constructor(x, y, targetX, targetY, color) { this.x = x; this.y = y; this.targetX = targetX; this.targetY = targetY; this.color = color || getRandomColor(); this.speed = 2; this.angle = Math.atan2(targetY - y, targetX - x); this.velocity = { x: Math.cos(this.angle) * this.speed, y: Math.sin(this.angle) * this.speed }; this.trail = []; this.trailLength = 10; this.exploded = false; this.particles = []; // Play launch sound playRandomSound(whistleSounds); } update() { if (!this.exploded) { // Move the firework this.x += this.velocity.x; this.y += this.velocity.y; // Add current position to trail this.trail.push({ x: this.x, y: this.y }); // Limit trail length if (this.trail.length > this.trailLength) { this.trail.shift(); } // Check if firework reached target const distanceToTarget = Math.hypot(this.targetX - this.x, this.targetY - this.y); if (distanceToTarget < 5 || this.y <= this.targetY) { this.explode(); } } else { // Update particles for (let i = this.particles.length - 1; i >= 0; i--) { this.particles[i].update(); // Remove faded particles if (this.particles[i].alpha <= 0) { this.particles.splice(i, 1); } } } } draw() { if (!this.exploded) { // Draw trail for (let i = 0; i < this.trail.length; i++) { const point = this.trail[i]; const alpha = i / this.trail.length; ctx.beginPath(); ctx.arc(point.x, point.y, 2, 0, Math.PI * 2); ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`; ctx.fill(); } // Draw firework ctx.beginPath(); ctx.arc(this.x, this.y, 3, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); } else { // Draw particles this.particles.forEach(particle => particle.draw()); } } explode() { this.exploded = true; // Play explosion sound playRandomSound(explosionSounds); // Create explosion particles const particleCount = 100 + Math.random() * 50; const particleType = Math.random() > 0.5 ? 'circle' : 'star'; const particleOptions = { x: this.x, y: this.y, color: this.color, type: particleType }; for (let i = 0; i < particleCount; i++) { this.particles.push(new Particle(particleOptions)); } } } // Particle class class Particle { constructor(options) { this.x = options.x; this.y = options.y; this.color = options.color; this.type = options.type || 'circle'; this.size = Math.random() * 3 + 1; this.speed = Math.random() * 3 + 0.5; this.angle = Math.random() * Math.PI * 2; this.friction = 0.98; this.gravity = 0.1; this.alpha = 1; this.decay = Math.random() * 0.02 + 0.01; this.velocity = { x: Math.cos(this.angle) * this.speed, y: Math.sin(this.angle) * this.speed }; // For star particles if (this.type === 'star') { this.rotationAngle = 0; this.rotationSpeed = Math.random() * 0.2 - 0.1; } } update() { // Apply friction this.velocity.x *= this.friction; this.velocity.y *= this.friction; // Apply gravity this.velocity.y += this.gravity; // Move particle this.x += this.velocity.x; this.y += this.velocity.y; // Fade out this.alpha -= this.decay; // Update rotation for stars if (this.type === 'star') { this.rotationAngle += this.rotationSpeed; } } draw() { ctx.save(); ctx.globalAlpha = this.alpha; ctx.fillStyle = this.color; if (this.type === 'circle') { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } else if (this.type === 'star') { ctx.translate(this.x, this.y); ctx.rotate(this.rotationAngle); // Draw a star ctx.beginPath(); for (let i = 0; i < 5; i++) { const angle = (i * Math.PI * 2) / 5 - Math.PI / 2; const outerX = Math.cos(angle) * this.size * 2; const outerY = Math.sin(angle) * this.size * 2; const innerAngle = angle + Math.PI / 5; const innerX = Math.cos(innerAngle) * this.size; const innerY = Math.sin(innerAngle) * this.size; if (i === 0) { ctx.moveTo(outerX, outerY); } else { ctx.lineTo(outerX, outerY); } ctx.lineTo(innerX, innerY); } ctx.closePath(); ctx.fill(); } ctx.restore(); } } // Helper functions function getRandomColor() { const colors = [ '#FF5252', // Red '#FF4081', // Pink '#E040FB', // Purple '#7C4DFF', // Deep Purple '#536DFE', // Indigo '#448AFF', // Blue '#40C4FF', // Light Blue '#18FFFF', // Cyan '#64FFDA', // Teal '#69F0AE', // Green '#B2FF59', // Light Green '#EEFF41', // Lime '#FFFF00', // Yellow '#FFD740', // Amber '#FFAB40', // Orange '#FF6E40' // Deep Orange ]; return colors[Math.floor(Math.random() * colors.length)]; } function createRandomFirework() { const startX = Math.random() * canvas.width; const startY = canvas.height; const targetX = startX + (Math.random() * 200 - 100); const targetY = canvas.height * 0.2 + Math.random() * canvas.height * 0.5; fireworks.push(new Firework(startX, startY, targetX, targetY)); } // Animation variables let fireworks = []; let lastFireworkTime = 0; const fireworkInterval = 800; // ms between auto fireworks let animationId; let autoLaunch = true; // Animation loop function animate(timestamp) { animationId = requestAnimationFrame(animate); // Clear canvas with semi-transparent black for trail effect ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Auto launch fireworks if (autoLaunch && timestamp - lastFireworkTime > fireworkInterval) { createRandomFirework(); lastFireworkTime = timestamp; } // Update and draw fireworks for (let i = fireworks.length - 1; i >= 0; i--) { fireworks[i].update(); fireworks[i].draw(); // Remove fireworks with no particles if (fireworks[i].exploded && fireworks[i].particles.length === 0) { fireworks.splice(i, 1); } } } // Start animation animate(); // Event listeners launchBtn.addEventListener('click', () => { // Launch multiple fireworks on button click for (let i = 0; i < 5; i++) { setTimeout(() => { createRandomFirework(); }, i * 200); } }); // Click on canvas to launch fireworks canvas.addEventListener('click', (e) => { const startX = Math.random() * canvas.width; const startY = canvas.height; const targetX = e.clientX; const targetY = e.clientY; fireworks.push(new Firework(startX, startY, targetX, targetY)); }); This interactive fireworks display features: - Beautiful colorful fireworks with realistic physics - Multiple particle effects (stars and circles) - Realistic trails and glow effects - Sound effects for launches and explosions - Click anywhere on the screen to launch fireworks at that location - "Launch Fireworks" button to create multiple fireworks at once - Toggle for sound on/off Note: You'll need to add actual sound files to the sounds directory for the audio to work. You can find free sound effects online from sources like Freesound.org or similar sites.