Fireworks · qwen3-30b-a3b

Okay, I need to create a self-contained HTML file that displays an interactive fireworks display. Let me think about how to structure this.

First, the HTML structure. I'll need a canvas element that covers the entire screen. So, I'll set the canvas to have width and height of 100% of the viewport. Then, I'll add some CSS to make sure the body and html take up the full screen and remove any margins or paddings.

Next, the JavaScript. The main components will be the Firework class and the Particle class. The Firework will handle the launch and explosion, while Particles will handle their movement, gravity, and fading.

For the canvas, I'll get the 2D context. Then, I'll set up variables to track all active fireworks and particles. The update function will handle the animation loop, updating and drawing each firework and particle.

When the user clicks, I'll create a new Firework instance with the click coordinates. The firework will move upwards, and once it reaches the top, it explodes into particles. Each particle will have a random direction, velocity, and color. They'll be affected by gravity, and their alpha (opacity) will decrease over time until they're removed.

The Clear button will reset the arrays of fireworks and particles. I'll also need to handle window resizing to adjust the canvas size.

Wait, the user mentioned that the shell should automatically launch on initial load. So, I should create a demo firework when the page loads. Maybe a random position or a specific one.

Testing the code: I need to make sure that clicking the sky launches a shell, which explodes into particles. The particles should fall, fade, and be removed. The Clear button should work. Also, the canvas should resize properly.

I should write all the code in the same HTML file, with <style> for CSS and <script> for JavaScript. No external files. Let me structure the HTML with the canvas, the button, and the scripts.

Potential issues: The canvas might not scale correctly on resize. I'll need to adjust the canvas dimensions and redraw everything. Also, ensuring that the particles are properly removed once their lifetime is up.

Let me draft the code step by step. Start with the HTML structure, then the CSS, then the JavaScript. Make sure all elements are properly enclosed and that the JavaScript is self-contained.

Wait, the user wants the file to be named index.html. So I'll use the write function to create that file with the complete code.

I should also test the code in my mind. For example, when the page loads, a firework is launched automatically. Clicking anywhere triggers another. Particles explode, fall, fade. Clear button resets everything.

I think that's the plan. Now, I'll write the code accordingly, making sure it's all inline and self-contained.

Okay, I need to check the index.html file I just created. Let me start by verifying the basic structure. The HTML has a canvas element and a clear button. The CSS makes the canvas full screen and sets a black background. The JavaScript handles the fireworks and particles.

First, when the page loads, there's an automatic firework launched from the bottom center. Clicking anywhere should create another firework. The particles should explode, fall, and fade. The Clear button should remove all elements.

I should test the auto-launch. The JavaScript creates a firework with x as width/2 and y as height, which is the bottom center. That should work. Clicking anywhere triggers a new firework. The particles are created with random angles and colors, which looks good.

The update function uses requestAnimationFrame for smooth animation. The canvas is cleared with a semi-transparent black fill to create trails. Particles have gravity applied (vy += 0.1) and fade out over time. The Clear button resets the arrays, which should work.

I should check for any syntax errors. The code uses ES6 features like class and const, which are supported in modern browsers. The canvas resizing is handled by the resize event listener. The particles' alpha is managed correctly, and they are removed when alpha drops below 0.

Potential issues: The auto-launch firework might not be visible if the initial position is at the bottom. But since the firework moves upward, it should be visible. Also, when the user clicks, the firework should go to the clicked location. The code uses the click coordinates, so that's correct.

The Clear button works by resetting the arrays. The resize handler adjusts the canvas dimensions. The CSS ensures the canvas covers the entire screen.

I think this should meet all the requirements. The user can now open index.html in a browser and see the fireworks display.