Learning Timeline
Key Insights
Kelebihan Gemini 1.5 Pro
Sebab utama kita menggunakan Gemini 1.5 Pro adalah kerana 'Context Window' yang sangat besar. Ini membolehkan AI menulis beribu baris kod dalam satu respon tanpa terhenti di tengah jalan atau kehilangan struktur kod.
Tip Troubleshooting Kod
Jika game tidak berjalan, periksa jika browser anda menyekat 'Autoplay' untuk bunyi. Klik di mana-mana kawasan pada skrin game untuk mengaktifkan audio context dan mekanik permainan.
Cara Menambah Aset Visual
Walaupun prompt ini menjana grafik menggunakan Canvas, anda boleh meminta Gemini menggunakan 'Base64 encoded strings' jika anda mahu menggunakan imej .png sebenar dalam satu fail HTML yang sama tanpa memerlukan folder imej berasingan.
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
Langkah Menjana Game 2D Platformer dalam Satu Klik
- Layari laman web Google AI Studio (aistudio.google.com) dan log masuk menggunakan akaun Google anda.
- Di bahagian sidebar kanan, cari dropdown 'Model' dan pilih 'Gemini 1.5 Pro' untuk keupayaan pemprosesan kod yang lebih kompleks.
- Pastikan 'System Instructions' dikosongkan untuk tugasan ini supaya AI fokus sepenuhnya pada prompt utama.
- Salin prompt lengkap (rujuk Prompt Card) dan tampal ke dalam ruangan 'Type something here'.
- Klik butang 'Run' di bahagian bawah untuk memulakan proses penjanaan kod.
- Tunggu sehingga Gemini selesai menjana keseluruhan kod HTML, CSS, dan JavaScript dalam satu blok kod.
- Klik ikon 'Copy' pada penjuru kanan blok kod tersebut.
- Buka aplikasi Text Editor di komputer anda (seperti Notepad atau VS Code).
- Tampal kod yang telah disalin dan simpan fail tersebut dengan nama 'game.html'. Pastikan extension fail adalah .html dan bukan .txt.
- Cari fail 'game.html' di dalam folder simpanan anda dan klik dua kali untuk membukanya menggunakan Web Browser.
