Learning Timeline
Key Insights
The Advantage of Gemini 1.5 Pro
The main reason we use Gemini 1.5 Pro is its massive 'Context Window.' This allows the AI to write thousands of lines of code in a single response without cutting off mid-way or losing the code structure.
Code Troubleshooting Tip
If the game doesn't run, check if your browser is blocking 'Autoplay' for audio. Click anywhere on the game screen to activate the audio context and trigger the game mechanics.
How to Add Visual Assets
While this prompt generates graphics using Canvas, you can ask Gemini to use 'Base64 encoded strings' if you want to use actual .png images within the same single HTML file without needing a separate image folder.
Prompts
One-Shot Game Generation Prompt
Target:
Gemini 1.5 Pro
Create a complete, playable 2D platformer game similar to Super Mario in a single, standalone HTML file. The game must include:
1. HTML5 Canvas for rendering retro-style pixel art graphics for the player, platforms, and enemies.
2. Smooth player mechanics: left/right movement, gravity-based jumping, and collision detection.
3. Level design: At least 3 different platforms, collectible coins, and basic moving enemies.
4. Audio: Include synthesized sound effects (using Web Audio API) for jumping and collecting coins.
5. Game State: A scoring system, lives, and a 'Game Over' or 'You Win' screen.
6. Structure: All CSS, JavaScript, and assets must be contained within the <style> and <script> tags of this single HTML file. Use clear, commented code.
Step by Step
Steps to Generate a 2D Platformer Game in One Click
- Visit the Google AI Studio website (aistudio.google.com) and log in using your Google account.
- In the right sidebar, find the 'Model' dropdown and select 'Gemini 1.5 Pro' for more complex code processing capabilities.
- Ensure 'System Instructions' is cleared for this task so the AI focuses entirely on the main prompt.
- Copy the full prompt (refer to the Prompt Card) and paste it into the 'Type something here' section.
- Click the 'Run' button at the bottom to start the code generation process.
- Wait for Gemini to finish generating the entire HTML, CSS, and JavaScript code within a single code block.
- Click the 'Copy' icon in the top-right corner of the code block.
- Open a Text Editor application on your computer (such as Notepad or VS Code).
- Paste the copied code and save the file as 'game.html'. Ensure the file extension is .html and not .txt.
- Locate the 'game.html' file in your folder and double-click it to open it in a Web Browser.
