Overview
This prompt aims to guide developers in creating a simple 3D HTML game using coding techniques. Beginner programmers and game developers will benefit from the structured approach and clear instructions.
Prompt Overview
Purpose: This game aims to provide an engaging way to practice programming skills through interactive 3D design.
Audience: It targets aspiring game developers and coding enthusiasts interested in learning WebGL and three.js.
Distinctive Feature: The game features a continuous runner mechanic combined with a coin collection system for dynamic gameplay.
Outcome: Players will enhance their coding abilities while enjoying a fun, interactive 3D gaming experience.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Content & Media Creation, Creative Writing & Storytelling, Development Tools & DevOps
- Techniques: Function Calling / Tool Use, Role/Persona Prompting, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
Create a 3D HTML game where a man runs and collects coins, featuring a visible meter that shows the number of coins collected.
**Details:**
– The main character is a man who continuously runs forward.
– Coins are placed along the path that the man runs on.
– When the man collects a coin, the coin disappears, and the collected coin meter increases accordingly.
– The game should have a simple 3D visual style, utilizing HTML with suitable technologies such as WebGL, three.js, or similar.
– Provide clear visuals for:
– The character
– The coins
– The collected coin meter display
**Steps:**
1. Set up a 3D scene in HTML using three.js or a similar library.
2. Create a running man character model (can be simple geometries or a placeholder).
3. Design coins positioned along a running path.
4. Implement collision detection between the man and the coins.
5. Update the coin meter display when a coin is collected.
6. Enable continuous forward movement of the man.
**Output Format:**
– Provide complete, runnable HTML code with embedded JavaScript that renders:
– The 3D game scene
– The running man
– The coins
– The coin collection meter
– Include comments for clarity.
Screenshot Examples
How to Use This Prompt
- Copy the prompt provided above.
- Paste it into a programming environment or text editor.
- Follow the steps outlined in the prompt.
- Use three.js or similar libraries for 3D rendering.
- Test the game in a web browser to ensure functionality.
- Modify and enhance the game as desired.
Tips for Best Results
- Use Three.js: Leverage the Three.js library for creating 3D graphics in your HTML game.
- Character Model: Create a simple 3D model for the running man using basic geometries or placeholder shapes.
- Collision Detection: Implement collision detection to ensure the man collects coins when they overlap.
- Meter Display: Use a simple UI element to display the number of coins collected, updating it in real-time.
FAQ
- What technologies are suitable for creating a 3D HTML game?
Technologies like WebGL and three.js are ideal for developing 3D HTML games. - How does the coin collection mechanic work?
When the character collides with a coin, it disappears and the coin meter increases. - What is the main character's movement style?
The main character continuously runs forward along a designated path. - What should the coin meter display show?
The coin meter should visually indicate the total number of coins collected.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
