Bangunkan game pelayar web dengan Gemini 3 Pro Canvas | Alpha | PandaiTech

Bangunkan game pelayar web dengan Gemini 3 Pro Canvas

Langkah demi langkah mencipta game gaya Galaga menggunakan Canvas Gemini 3 Pro, daripada meminta prompt, menjalankan kod, hingga menambah baik ciri-ciri game.

Learning Timeline
Key Insights

Guna Thinking Models Dahulu

Jangan minta coding AI (Gemini) untuk fikirkan mekanik game dari kosong. Gunakan 'Thinking Model' dahulu untuk menjana spesifikasi fungsi yang lengkap, kemudian berikan spesifikasi itu kepada Gemini untuk dikodkan. Ini menghasilkan kod yang lebih berkualiti.

Peraturan 'Fresh Chat'

Jika kemas kini feature merosakkan UI (contohnya, 'overlays' menghalang game) dan satu prompt susulan tidak dapat membaikinya, tinggalkan chat tersebut. Memulakan chat baharu (fresh chat) dengan keperluan yang telah digabungkan selalunya lebih pantas berbanding cuba debug melalui chat.

Permintaan API Palsu (Phantom API Requests)

Gemini kadangkala mungkin 'berhalusinasi' meminta API key apabila berlaku ralat kod. Jika logik game sepatutnya tidak memerlukan data luar, ini adalah 'bug'—mulakan semula prompt daripada cuba memberikan key tersebut.
Prompts

Meta-Prompt untuk Deskripsi Game

Target: ChatGPT / Thinking Model
I want to make the classic game Galaga. Give me a prompt for that. Don't include any specific tech.
Step by Step

Menjana Kod Game

  1. Buka 'Thinking Model' AI yang berasingan (contohnya ChatGPT o1 atau yang serupa) untuk menyediakan konteks prompt anda.
  2. Masukkan permintaan untuk deskripsi bukan teknikal bagi game yang anda inginkan (rujuk kad Prompt).
  3. Salin (Copy) deskripsi terperinci yang dihasilkan oleh Thinking Model tersebut.
  4. Pergi ke antaramuka Gemini.
  5. Pastikan toggle code execution/Canvas ditetapkan kepada 'ON' (biasanya terletak berhampiran ruang input atau settings) untuk membolehkan 'interactive previews'.
  6. Tampal (Paste) deskripsi terperinci tadi ke dalam ruang prompt Gemini.
  7. Hantar prompt dan tunggu Gemini menjana kod HTML/JS.
  8. Lihat tetingkap 'interactive preview' yang muncul secara automatik untuk menguji fungsi asas (contohnya pergerakan, pemarkahan).

Menambah Baik dan Debug Feature

  1. Taip permintaan untuk feature baharu yang spesifik (contohnya, 'Add a status bar at the bottom') ke dalam chat input.
  2. Tunggu Gemini mengemas kini blok kod dan refresh paparan preview.
  3. Uji feature baharu tersebut dalam tetingkap preview.
  4. Jika UI nampak pelik atau kod merosakkan susun atur: Jangan cuba betulkan melalui prompt berulang kali.
  5. Terus buka 'New Chat'.
  6. Paste prompt asal berserta permintaan feature baharu tadi ke dalam chat baharu untuk dapatkan versi kod yang bersih.

More from Coding & Pembangunan Aplikasi AI

View All