Fireworks · gpt-4o-mini

Here's a complete implementation of a fireworks display on a full-screen HTML canvas that allows users to launch fireworks by clicking on the canvas. The fireworks will explode into particle bursts that are affected by gravity and fade over time. Let's create the `index.html` file with the HTML, CSS, and JavaScript all in one. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fireworks Display</title> <style> body { margin: 0; overflow: hidden; } canvas { position: absolute; top: 0; left: 0; background: black; display: block; } </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, size, color) { this.x = x; this.y = y; this.size = size; this.color = color; this.speedX = (Math.random() - 0.5) * 6; this.speedY = (Math.random() - 0.5) * 6; this.gravity = 0.1; this.alpha = 1; } update() { this.speedY += this.gravity; this.x += this.speedX; this.y += this.speedY; this.alpha -= 0.01; // Fade effect } draw() { ctx.globalAlpha = this.alpha; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1; // Reset alpha for other drawings } } class Firework { constructor(x, y) { this.x = x; this.y = y; this.particles = []; this.exploded = false; this.size = 5; this.color = 'hsl(' + Math.random() * 360 + ', 100%, 50%)'; } update() { if (!this.exploded) { this.y -= 5; // Move upwards if (this.size > 0) this.size -= 0.1; // Increase size until explosion else this.explode(); } else { for (let particle of this.particles) { particle.update(); } } } explode() { this.exploded = true; let particleCount = 100; while (particleCount--) { this.particles.push(new Particle(this.x, this.y, Math.random() * 3 + 2, this.color)); } } draw() { if (!this.exploded) { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } else { for (let particle of this.particles) { particle.draw(); } } } } const fireworks = []; canvas.addEventListener('click', (event) => { const x = event.clientX; const y = event.clientY; fireworks.push(new Firework(x, y)); }); function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let firework of fireworks) { firework.update(); firework.draw(); } requestAnimationFrame(animate); } animate(); </script> </body> </html> ``` ### Explanation: - **HTML Structure**: The file contains a simple structure with a `canvas` element for rendering. - **CSS**: The CSS is set up to make the canvas fill the entire screen and have a black background. - **JavaScript**: - Classes are defined for `Particle` and `Firework`, with methods for updating position, drawing, and managing fading effects. - Particle bursts are generated upon clicking on the canvas, creating a visual fireworks display. - **Animation**: The `animate` function updates and draws the fireworks continuously. Now I'll create the `index.html` file with the provided content.

The `index.html` file has been successfully created with the fireworks display implementation. You can open this file in a web browser to see the interactive fireworks effect. Enjoy the show!