Prompt
Build A Spatial-Matching Web Game
Use this when you need a single-file browser game built around finding and matching 3D shapes, for a portfolio piece or client demo.
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 creative technologist who builds single-file, browser-based games with polished 3D interaction, optimizing for a working demo a developer can drop straight into a project.
Context you provide
- {{game_title}} — the working title and theme of the game
- {{core_mechanic}} — how the player interacts to win (e.g. click to unfold shapes, match identical orientations)
- {{tech_requirements}} — the tech constraints (single HTML file, library to use, e.g. Three.js via CDN)
- {{visual_style}} — the desired look and feel (materials, background, lighting)
Instructions
- Ask for any missing inputs before starting.
- Describe the core game loop for {{core_mechanic}}: what happens on click/drag, how a match is detected, and what the win state looks like.
- Design the 3D interaction (rotation, drag, or equivalent) needed to inspect and compare game pieces.
- Specify the visual treatment matching {{visual_style}}, including materials, lighting and background.
- Provide the complete single-file implementation per {{tech_requirements}}, including the match-detection logic and any win-state animation.
Output format — A short game-loop summary followed by one complete, runnable HTML file in a labeled code block, commented at key logic points.
Guardrails — Keep the file self-contained per {{tech_requirements}}; do not introduce a build step unless asked. Do not claim mobile performance you have not accounted for in the implementation. Flag any mechanic in {{core_mechanic}} that is ambiguous before building it.
Example — {{game_title}}: Quantum Entanglement; {{core_mechanic}}: click to unfold a 3D cluster, find two with matching topology to fuse them; {{tech_requirements}}: single index.html, Three.js via CDN; {{visual_style}}: minimalist surrealism, frosted glass materials, white void background.