Complete AI Training

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

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

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

  1. Ask for any missing inputs, then confirm the mechanic, library and style before writing code.
  2. Build one index.html file with inline style and script, loading {{library}} from a CDN.
  3. Implement bounding-box collision against the container walls, momentum transfer between the main object and particles, and fading motion trails.
  4. Apply the requested {{visual_style}} to materials, colors and camera behavior.
  5. 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."