Fireworks · qwen3-8b

Okay, let's tackle this problem. The user wants an interactive fireworks display in a full-screen canvas using HTML, CSS, and JavaScript. All code needs to be inlined in index.html without any external assets.

First, I need to structure the HTML. The canvas should take up the entire screen. So I'll set the body's margin and padding to zero and use a full viewport height and width. The canvas element will have a style to cover the whole window.

Next, the CSS. I'll make sure the body is fullscreen and the canvas is positioned absolutely to cover everything. Maybe add some basic styling for the clear button, like positioning it at the top right.

For JavaScript, I need to handle the canvas context, manage particles, and handle user interactions. Let's think about the objects involved. Each shell will have a position, velocity, and maybe a lifespan. When a shell explodes, it creates particles that spread out radially, each with their own velocity and lifespan.

The initial demo shell on load: when the page loads, create a shell that goes up and explodes. Then, on click, create a new shell towards the clicked location.

Particles need to be affected by gravity. So each particle has a position, velocity, and maybe a color. They'll fade over time, so opacity decreases. After their lifetime, they're removed from the array.

Handling multiple shells and bursts: each shell can be an object in an array. When a shell explodes, it adds particles to another array. The draw loop will process all active particles and shells.

For the Clear button, I need to reset the arrays of shells and particles, and maybe clear the canvas. But since the canvas is redrawn every frame, perhaps just resetting the arrays is enough, and the next draw will clear the screen.

Now, the steps:

1. Set up the canvas and get the 2D context.
2. Create a function to create a shell. It starts at the bottom, moves upward, then explodes.
3. When a shell explodes, generate particles with random velocities in a radial direction, each with their own lifespan and color.
4. Handle user clicks to launch shells towards the clicked position.
5. Implement the Clear button to reset everything.
6. Ensure the display works after resizing, so maybe add a resize event listener to adjust the canvas size.

Wait, but how to handle the explosion? The shell's trajectory: when it's launched, it has an initial velocity upwards. Once it reaches the top (or a certain point), it explodes into particles. Each particle's velocity is randomized around the explosion point, with some radial component.

For the particles, each has a position, velocity, lifespan, and color. In the draw loop, update their positions, apply gravity, decrease lifespan, and remove when lifespan is up.

Let me outline the code structure:

- Variables: canvas, ctx, shells, particles, etc.
- Initialize canvas size on load and resize.
- Draw function: clears the canvas, updates and draws shells and particles.
- Shell object: position, velocity, alive status, maybe explosion time.
- Particle object: position, velocity, lifespan, color, opacity.
- On click, create a new shell with initial velocity towards the click position.
- On initial load, create a demo shell.
- Clear button resets the arrays.

Wait, but the demo shell should launch automatically. So in the init function, after setting up, create a shell that starts at the bottom and moves up.

Now, the code:

In HTML, the canvas and a button for Clear. The button's onclick calls a function to reset.

In JavaScript:

- Setup canvas and context.
- Handle resize events to adjust canvas dimensions.
- Create a demo shell on load.
- Handle click events to create new shells.
- Update and draw all elements in a loop.

For the particles, when a shell explodes, generate several particles. Each particle's velocity is calculated based on the explosion direction. For example, the explosion center is the shell's position. The particles are given a velocity vector that points outward from the center, with some randomness.

Gravity affects the particles' vertical velocity. Each frame, their velocity is updated, and their position is adjusted accordingly.

Opacity decreases over time, so each particle has a lifespan, and during drawing, their alpha is set based on remaining lifespan.

Now, implementing this in code.

Potential issues: performance with many particles, but since the user says to keep it sandboxed, maybe it's acceptable. Also, ensuring that the canvas resizes properly.

Testing the required behaviors: clicking launches a shell, which ascends and explodes into particles that fall. The Clear button removes everything. The initial demo shell is present.

Now, writing the code into index.html. All CSS and JS inline.

I'll start by writing the HTML structure, then the CSS, then the JS.

For the canvas, set width and height to window.innerWidth and innerHeight. The button is positioned absolutely, maybe with z-index to stay on top.

In the JS, the main loop uses requestAnimationFrame. Shells are objects with x, y, vx, vy, and a timer. When the shell reaches the top (or a certain y position), it explodes, creating particles.

Each particle has x, y, vx, vy, lifespan, color, and alpha. The lifespan decreases each frame, and when it hits zero, the particle is removed.

The draw function clears the canvas, updates all shells and particles, then draws them.

For the demo shell, create one at the bottom center, with an upward velocity.

Testing the click handler: when the user clicks, get the mouse coordinates, calculate the direction from the bottom to the click point, and launch the shell with that direction.

For the Clear button, reset the shells and particles arrays, and maybe clear the canvas (though the next draw will clear it anyway).

Now, putting all this together into the index.html file.

I need to make sure that the code is self-contained, no external libraries, and all styles and scripts are inline.

Also, handling resizing: adding an event listener for 'resize' that adjusts the canvas dimensions and repositions the button if needed.

Wait, but the button's position might need to be adjusted on resize. Alternatively, use fixed positioning for the button.

Once the code is written, the user can run it, click to launch shells, check the demo, and use Clear to reset.

Potential edge cases: making sure that the canvas covers the entire window, handling multiple shells, and ensuring that particles are properly removed after their lifespan.

I think that's a solid plan. Now, code time.

Okay, let's see. The user asked to build an interactive fireworks display. I generated the code and wrote it to index.html. Now I need to verify if it meets all the requirements.

First, the required behaviors: clicking the sky launches a shell upward toward the clicked location, which then explodes into particles. The demo shell should launch automatically on load. There's a Clear button to remove everything. The code uses procedural drawing with no external assets.

Looking at the code, the canvas is set to full screen, and the CSS positions the Clear button. The JavaScript handles the shell creation, explosion into particles, gravity, and fading. The initial demo shell is added when the script runs. Clicking the canvas creates a new shell towards the click position. The Clear button resets the arrays.

Testing the demo shell: when the page loads, a shell starts at the bottom center and moves up. Upon reaching the top, it explodes into particles that spread out and fall under gravity. The particles fade over time.

For the click interaction, when the user clicks anywhere on the canvas, a shell is launched from the bottom towards that point. The explosion creates particles that radiate outward.

The Clear button should empty all shells and particles, resetting the display. Resizing the window adjusts the canvas size, though the button's position might need adjustment, but the code handles resize events.

Potential issues: Maybe the demo shell isn't visible if the canvas is not properly sized. But the code sets the canvas dimensions on load and on resize. Also, the particles might be too small or the colors not vibrant enough, but the user allows freedom in visual design.

I should check if the code includes all necessary parts. The HTML structure is there, with inline CSS and JS. The JavaScript has the update and draw functions, handling shells and particles. The event listeners for clicks and resize are in place.

Now, the user wants me to verify by triggering a shell, checking its ascent, burst, and particle fall. Then test the Clear button. Since I can't run the browser here, I'll have to rely on the code's structure. The code seems to handle all these aspects. The particles are created with random directions, gravity is applied, and they fade. The Clear button resets the arrays, so the scene should be emptied.

I think the code meets all the requirements. The final step is to report what was checked and any unverified behaviors.