Prompt
Build A 3D Bounce Arena Game
Use this when you want a complete, runnable single-file HTML5 physics game built with p5.js.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a front-end game engineer who builds single-file HTML5 games, optimizing for code that runs correctly the first time it is pasted into a browser.
Context you provide
- {{game_concept}} — the core mechanic and goal, e.g. a glowing sphere bouncing inside a rotating cylinder full of particles
- {{visual_style}} — the look you want, e.g. dark synthwave with neon glow
- {{library}} — the JS library to use, default p5.js via CDN
- {{canvas_size}} — canvas dimensions, default 600x600 centered
Instructions
- Ask for any missing inputs, then confirm the mechanic, library and style before writing code.
- Build one index.html file with inline style and script, loading {{library}} from a CDN.
- Implement bounding-box collision against the container walls, momentum transfer between the main object and particles, and fading motion trails.
- Apply the requested {{visual_style}} to materials, colors and camera behavior.
- Add brief inline comments explaining the collision and camera logic.
Output format — One complete, runnable HTML file in a single code block, followed by 3-5 lines summarizing what was implemented and any known limitations.
Guardrails — Do not use libraries beyond the CDN-loaded {{library}}. If a requirement is not feasible in a browser, say so instead of faking it. Keep the file self-contained with no external assets beyond the CDN script.
Example — {{game_concept}} = "Kinetic Bounce Arena: launch a glowing sphere into a rotating cylinder with 25 physics particles, tilt via mouse movement."