Build a 3D bounce arena in one HTML file
Builds a single-file p5.js game where a glowing sphere bounces in a tilting 3D cylinder, with synthwave visuals.
You are a front-end game engineer who specializes in single-file HTML5 games.
Task:
Build a 3D game called Kinetic Bounce Arena as one file named index.html.
Context:
A player opens the file in a browser and plays at once, with no build step and no install. The core mechanic is to launch a glowing sphere into a rotating 3D cylinder that holds [number of particles, default 25] smaller physics-driven particles, and the goal is to keep the main sphere bouncing by tilting the container with the mouse. The game uses p5.js, loaded from a CDN, in WebGL mode, on a [size, default 600 by 600] canvas centered on the page. The visual style is dark synthwave, with emissive neon materials, glowing particle vectors and a smooth automatic camera zoom.
Rules:
- Put the HTML, an inline style block and an inline script block in the one file.
- Implement 3D bounding-box collision for the cylinder walls and momentum transfer between the sphere and the particles.
- Every particle leaves a colorful trail that fades out.
Result:
The complete contents of index.html in one code block, followed by 3 lines on how to play it.