Cara Membuat Game dengan AI Gratis dan Terhubung ke Google Sheets

Pernah kepikiran bikin game kuis sendiri tapi mentok karena nggak bisa coding? Sekarang itu bukan masalah lagi. Dengan AI app builder kayak Google AI Studio (Build), Bolt.new, atau Lovable, kamu tinggal kasih prompt, dan jadilah web game siap pakai lengkap dengan sistem skor.

Cocok banget buat kamu yang:

• Mahasiswa yang dapat tugas bikin media pembelajaran atau proyek interaktif,

• Guru yang mau bikin kuis kelas tanpa ribet,

• Atau sekadar lagi gabut dan pengen coba-coba bikin sesuatu yang seru.

Trik utamanya: soal-soalnya nggak ditulis manual di kode, tapi disimpan di Google Sheets. Jadi kalau mau ganti materi atau bikin game baru, kamu tinggal edit spreadsheet-nya, nggak perlu utak-atik aplikasi sama sekali. Aplikasi otomatis "membaca" soal dari sana lewat sebuah jembatan bernama Google Apps Script, dan setelah selesai main, skor pemain otomatis tercatat balik ke spreadsheet yang sama.

Ada dua tipe game yang paling gampang dibuat dengan cara ini. Pilih salah satu (atau coba dua-duanya) sesuai kebutuhan kamu.

Opsi 1: Story Quest — Kuis Berbalut Cerita Petualangan

Tipe game di mana setiap soal dibungkus cerita singkat, jadi pemain berasa lagi menjalani petualangan sambil belajar. Cocok buat topik apa aja — sains, sejarah, bahasa, bahkan materi kuliah yang agak berat pun bisa dibikin lebih hidup dengan format ini.

Alurnya kira-kira begini: pemain masuk, ada narasi singkat pembuka bab, muncul pertanyaan dengan 3 pilihan jawaban, kalau benar dapat poin dan lanjut ke bab berikutnya, kalau salah dikasih hint dulu sebelum coba lagi. Di akhir, skor total dan riwayat jawaban ditampilkan, terus otomatis terkirim ke Google Sheets.

Template Tabel Google Sheets — Story Quest

Tab 1 — beri nama "SoalGame"

Tab 2 — beri nama "HistorySiswa"

Langkah B: Pasang Google Apps Script (API Connector)

1. Di Google Sheets, klik menu Ekstensi > Apps Script.

2. Hapus seluruh kode default, lalu tempelkan kode berikut:

function doGet(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SoalGame");
  var data = sheet.getDataRange().getValues();
  var headers = data[0];
  var result = [];
  
  for (var i = 1; i < data.length; i++) {
    var row = {};
    for (var j = 0; j < headers.length; j++) {
      row[headers[j]] = data[i][j];
    }
    result.push(row);
  }
  
  return ContentService.createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON);
}

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("HistorySiswa");
  var params = JSON.parse(e.postData.contents);
  
  sheet.appendRow([
    new Date(),
    params.nama,
    params.kelas,
    params.skor,
    "Selesai"
  ]);
  
  return ContentService.createTextOutput(JSON.stringify({status: "success"}))
    .setMimeType(ContentService.MimeType.JSON);
}

3. Klik tombol Terapkan (Deploy) > Penerapan Baru (New Deployment).

4. Pilih jenis Aplikasi Web (Web App).

5. Pada opsi "Siapa yang memiliki akses" (Who has access), ubah menjadi "Siapa Saja" (Anyone).

6. Klik Terapkan dan salin URL Aplikasi Web yang dihasilkan.

Prompt Pembuatan Soal (Story Quest)

Anda adalah seorang [Role] yang berpengalaman menyusun materi dan soal pembelajaran sesuai kurikulum. Anda mampu membuat soal yang kontekstual, menarik, dan mendukung pembelajaran berbasis game interaktif.

Buatkan 10 soal pembelajaran untuk digunakan pada web game edukasi berbasis Story Quiz (Petualangan Interaktif).

Target peserta didik adalah [Jenjang/Kelas].

Mata pelajaran:
[Mata Pelajaran]

Topik materi:
[Topik Materi]

Tujuan pembelajaran:
[Tujuan Pembelajaran]

Gunakan bahasa yang sesuai dengan tingkat pemahaman peserta didik.

Setiap soal harus memiliki tingkat kesulitan bertahap dari mudah menuju sedang.

Awali setiap soal dengan sebuah cerita singkat yang relevan dengan materi sehingga siswa merasa sedang mengikuti sebuah petualangan belajar.

Pertanyaan harus dapat dijawab menggunakan informasi atau konteks dari materi pembelajaran.

Buat tiga pilihan jawaban (A, B, C) yang semuanya masuk akal, tetapi hanya satu yang benar.

Berikan petunjuk (hint) yang membantu siswa memahami konsep tanpa langsung membocorkan jawaban.

# OUTPUT

Hasilkan tepat 10 data dalam format tabel Markdown dengan kolom berikut:

| Bab | Cerita | Pertanyaan | A | B | C | Kunci | Petunjuk |

Ketentuan:

- Setiap baris mewakili satu bab permainan.
- Cerita terdiri dari 1–3 kalimat yang menarik dan berkaitan dengan materi pembelajaran.
- Cerita pada setiap bab harus berbeda agar membangun alur petualangan.
- Pertanyaan harus berkaitan langsung dengan cerita atau materi.
- Pilihan A, B, dan C harus memiliki panjang yang relatif seimbang.
- Kolom Kunci hanya berisi jawaban yang benar (teks jawaban, bukan huruf A/B/C).
- Kolom Petunjuk berupa kalimat singkat yang membantu siswa menemukan jawaban.
- Jangan menambahkan penjelasan, nomor, atau teks lain di luar tabel Markdown.

Master Prompt Build Mode (Story Quest)

Anda adalah seorang [Role] yang berpengalaman dalam membuat media pembelajaran interaktif berbasis web.

Buatkan aplikasi web game interaktif edukatif bernama "[Nama Aplikasi]" untuk [Target Pengguna] dengan tampilan modern, rapi, [Karakter UI], dan responsif.

Aplikasi ini digunakan untuk pembelajaran [Mata Pelajaran] dengan materi [Topik Materi] pada [Jenjang/Kelas]. Soal dikelola melalui Google Sheets menggunakan Google Apps Script.

Gunakan URL Google Apps Script berikut sebagai endpoint API dan simpan sebagai konstanta JavaScript (misalnya `const APPS_SCRIPT_URL = "..."`). Jangan tampilkan input URL Apps Script pada antarmuka aplikasi karena URL merupakan konfigurasi internal.

[URL Google Apps Script]

FITUR & STRUKTUR APLIKASI:

1. HALAMAN FORM SETUP (INPUT AWAL):
   - Input teks "Nama Siswa".
   - Input teks "Kelas".
   - Tombol "Mulai Petualangan".
   - Mekanisme Interaksi Tombol:
     * Jangan melakukan submit form HTML.
     * Jangan me-refresh halaman atau memanggil `location.reload()`.
     * Jangan mengubah halaman sebelum data JSON soal berhasil diperoleh dari HTTP GET ke URL Apps Script.
     * Gunakan JavaScript Event Listener dengan `event.preventDefault()` atau gunakan elemen ``.
     * Setelah tombol ditekan, langsung tampilkan loading indicator dengan teks "Mengambil soal..." (Apps Script membutuhkan waktu sekitar 2–5 detik).
     * Selama loading berlangsung: nonaktifkan tombol (disabled), tampilkan spinner, dan cegah klik berulang.
     * Jika permintaan gagal (network error atau response bukan JSON valid), tampilkan pesan error yang ramah dan tombol "Coba Lagi", jangan biarkan halaman blank atau macet di loading.

2. HALAMAN GAMEPLAY (PETUALANGAN INTERAKTIF):
   - Tampilkan Judul Bab (misal: "Bab 1: Petualangan di Hutan Sains").
   - Tampilkan teks dan gambar sketsa bergaya komik/cerita dalam kotak bergaya petualangan (storyboard).
   - Tampilkan pertanyaan kuis dan 3 pilihan jawaban sesuai response JSON (PilihanA, PilihanB, PilihanC) berupa tombol interaktif yang menarik.
   - Tampilkan progress bar atau indikator "Bab x dari y" agar pemain tahu posisinya dalam permainan.
   - Mekanisme Jawaban:
     * Jika siswa menjawab BENAR: Tampilkan pop-up/efek sukses "Luar Biasa!", tambahkan skor +20, lalu otomatis lanjut ke bab berikutnya.
     * Jika siswa menjawab SALAH: Tampilkan petunjuk edukatif (hint) dan berikan kesempatan mencoba kembali, namun jika dijawab benar pada percobaan kedua skor hanya bertambah +10.
   - Tambahkan elemen audio (musik background dan sound effect) saat berinteraksi, menjawab benar, atau salah, lengkap dengan tombol mute/unmute.
   - Pastikan tombol jawaban dinonaktifkan sesaat setelah diklik untuk mencegah double-submit sebelum animasi feedback selesai.

3. HALAMAN HASIL & DOKUMENTASI (HISTORY):
   - Setelah semua bab selesai, tampilkan rangkuman skor akhir siswa dan riwayat jawaban siswa dengan ucapan selamat yang meriah (misalnya animasi confetti sederhana).
   - Secara otomatis lakukan HTTP POST ke URL Google Apps Script dengan payload JSON:
     {
       "nama": "[Nama Siswa]",
       "kelas": "[Kelas]",
       "skor": [Skor Akhir]
     }
   - Tampilkan pesan konfirmasi: "Skor kamu telah berhasil dicatat!".
   - Jika pengiriman skor gagal, tampilkan pesan yang jelas dan tombol "Kirim Ulang", jangan biarkan skor hilang begitu saja.
   - Sediakan tombol "Main Lagi" yang mengembalikan pemain ke halaman form setup tanpa perlu me-refresh browser.

DESAIN DAN UI/UX:
- Warna Utama: Hijau Edukasi Sehat (#16A34A) dan Biru Cerah (#0284C7).
- Layout: Menggunakan card yang diletakkan di tengah (centered), membulat (border-radius: 16px), dengan bayangan halus (soft shadow).
- Tipografi: Gunakan font sans-serif modern yang mudah dibaca oleh [Target Pengguna].
- Interaksi: Tambahkan animasi mikro (micro-interactions) saat tombol di-hover atau diklik.
- Pastikan tampilan tetap rapi dan mudah dipakai di layar HP (mobile-first, responsif).
- Teknologi: Gunakan HTML semantic, CSS murni, dan JavaScript vanilla — tanpa framework eksternal.

Opsi 2: Mencocokkan — Game Pasangkan Kartu/Istilah

Kalau Story Quest fokus ke narasi, tipe ini lebih ke tantangan fokus dan kecepatan: dalam satu bab, pemain harus mencocokkan beberapa pasangan sekaligus — istilah dengan fungsinya, tokoh dengan penemuannya, kata dengan artinya, dan seterusnya. Cocok buat materi yang isinya banyak istilah, rumus, kosakata, atau pasangan konsep.

Mekanismenya: setiap bab berisi beberapa pasangan (misalnya 3 pasang). Sisi kiri dan sisi kanan ditampilkan dalam dua kolom, urutan sisi kanan diacak. Pemain klik satu kartu kiri lalu satu kartu kanan untuk mencocokkan. Cocok = kartu terkunci dan poin nambah. Salah = kartu balik lagi, boleh coba lagi. Begitu semua pasangan di satu bab selesai dicocokkan, lanjut ke bab berikutnya. Di akhir permainan, skor otomatis terkirim ke Google Sheets.

Template Tabel Google Sheets — Mencocokkan

Tab 1 — beri nama "SoalGame"

Tab 2 — beri nama "HistorySiswa" (struktur sama persis seperti Story Quest, sehingga skrip Apps Script di bawah bisa langsung dipakai tanpa diubah):

Google Apps Script (Ekstensi Spreadsheet)

Buka menu Ekstensi > Apps Script di Google Sheets Anda, lalu tempelkan kode Apps Script (GAS) berikut untuk membaca data pasangan dan menyimpan hasil riwayat belajar siswa:

function doGet(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SoalGame");
  var data = sheet.getDataRange().getValues();
  var headers = data[0];
  var result = [];
  
  for (var i = 1; i < data.length; i++) {
    var row = {};
    for (var j = 0; j < headers.length; j++) {
      row[headers[j]] = data[i][j];
    }
    result.push(row);
  }
  
  return ContentService.createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON);
}

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("HistorySiswa");
  var params = JSON.parse(e.postData.contents);
  
  sheet.appendRow([
    new Date(),
    params.nama,
    params.kelas,
    params.skor,
    "Selesai"
  ]);
  
  return ContentService.createTextOutput(JSON.stringify({status: "success"}))
    .setMimeType(ContentService.MimeType.JSON);
}

Deploy-nya sama seperti sebelumnya: Terapkan (Deploy) > Penerapan Baru, pilih jenis Aplikasi Web, akses diubah ke "Siapa Saja", lalu salin URL yang dihasilkan.

Contoh output JSON yang dihasilkan oleh doGet untuk struktur tabel Mencocokkan di atas:

[
  {
    "Bab": 1,
    "Judul": "Bagian Tumbuhan",
    "Instruksi": "Cocokkan bagian tumbuhan dengan fungsinya",
    "Kiri1": "Akar",
    "Kanan1": "Menyerap air",
    "Kiri2": "Daun",
    "Kanan2": "Fotosintesis",
    "Kiri3": "Batang",
    "Kanan3": "Menopang tumbuhan"
  }
]

Prompt Pembuatan Soal (Mencocokkan)

Anda adalah seorang instructional designer dan pengembang game edukasi yang berpengalaman dalam merancang materi pembelajaran interaktif untuk mahasiswa.

Buatkan 10 bab data untuk digunakan pada tugas pembuatan game multimedia edukasi bertipe Mencocokkan (Matching Game). Game dibuat oleh mahasiswa dan menggunakan bahasa Indonesia, dengan target pengguna akhir adalah remaja.

Konteks tugas:
Mahasiswa sedang mengembangkan sebuah game multimedia edukasi yang menggabungkan unsur teks, visual, interaksi, dan permainan. Setiap bab digunakan sebagai satu level permainan yang mengajak pemain mencocokkan dua informasi yang saling berkaitan.

Target pengguna: Remaja
Bahasa: Bahasa Indonesia
Pengembang game: Mahasiswa
Jenis game: Matching Game
Jumlah bab: 10 bab
Pasangan per bab: 3 pasangan

Topik materi: [Topik Materi]
Tujuan edukasi game: [Tujuan Edukasi]
Tema/konsep game: [Tema Game]

Gunakan bahasa yang sederhana, komunikatif, menarik, dan mudah dipahami oleh remaja. Hindari penggunaan istilah yang terlalu akademis kecuali istilah tersebut memang menjadi bagian dari materi.

Setiap bab harus memiliki:

* Judul singkat dan menarik.
* Satu kalimat instruksi yang menjelaskan apa yang harus dicocokkan.
* Tepat 3 pasangan Kiri-Kanan.
* Setiap pasangan harus memiliki hubungan yang jelas dan tidak ambigu.
* Pasangan dapat berupa istilah dengan definisi, objek dengan fungsi, tokoh dengan karya, simbol dengan arti, masalah dengan solusi, atau konsep dengan contoh.
* Tingkat kesulitan meningkat secara bertahap dari mudah pada bab awal menuju sedang pada bab akhir.
* Materi antar bab harus bervariasi dan tidak mengulang pasangan yang sama.
* Konten harus relevan untuk remaja dan dapat divisualisasikan atau dikembangkan menjadi elemen multimedia dalam game.

# OUTPUT

Hasilkan tepat 10 data (bab) dalam format tabel Markdown dengan kolom berikut:

| Bab | Judul | Instruksi | Kiri1 | Kanan1 | Kiri2 | Kanan2 | Kiri3 | Kanan3 |

Ketentuan:

* Setiap baris mewakili satu bab permainan.
* Judul terdiri dari 2-4 kata dan dibuat menarik untuk remaja.
* Instruksi terdiri dari satu kalimat singkat, jelas, dan menggunakan gaya bahasa yang konsisten.
* Kiri1/Kiri2/Kiri3 dan Kanan1/Kanan2/Kanan3 harus benar-benar berpasangan sesuai materi.
* Jangan membuat pasangan yang memiliki lebih dari satu kemungkinan jawaban.
* Panjang teks Kiri dan Kanan usahakan relatif seimbang dalam satu bab.
* Gunakan bahasa Indonesia yang natural dan sesuai untuk remaja.
* Hindari konten yang terlalu sulit, terlalu teknis, atau membutuhkan pengetahuan di luar topik.
* Jangan menambahkan penjelasan, nomor, atau teks lain di luar tabel Markdown.

Master Prompt Build Mode (Mencocokkan)

Anda adalah seorang instructional designer dan pengembang game edukasi multimedia yang berpengalaman dalam membuat media pembelajaran interaktif berbasis web untuk mahasiswa.

Buatkan aplikasi web game interaktif edukatif bertipe Matching Game bernama "[Nama Aplikasi]" untuk remaja dengan tampilan modern, rapi, menarik, dan responsif.

Aplikasi ini digunakan sebagai tugas mahasiswa dalam pembuatan game multimedia edukasi dengan target pengguna akhir remaja. Pembelajaran menggunakan [Mata Pelajaran] dengan materi [Topik Materi] pada konteks pengembangan media pembelajaran oleh mahasiswa.

Data pasangan dikelola melalui Google Sheets menggunakan Google Apps Script.

Gunakan URL Google Apps Script berikut sebagai endpoint API dan simpan sebagai konstanta JavaScript (misalnya `const APPS_SCRIPT_URL = "..."`). Jangan tampilkan input URL Apps Script pada antarmuka aplikasi karena URL merupakan konfigurasi internal.

[URL Google Apps Script]

Setiap objek pada response JSON memiliki struktur berikut (satu objek = satu bab berisi 3 pasangan):

{
  "Bab": 1,
  "Judul": "Bagian Tumbuhan",
  "Instruksi": "Cocokkan bagian tumbuhan dengan fungsinya",
  "Kiri1": "Akar", "Kanan1": "Menyerap air",
  "Kiri2": "Daun", "Kanan2": "Fotosintesis",
  "Kiri3": "Batang", "Kanan3": "Menopang tumbuhan"
}

FITUR & STRUKTUR APLIKASI:

1. HALAMAN FORM SETUP (INPUT AWAL):

   - Input teks "Nama Siswa".
   - Input teks "Kelas".
   - Tombol "Mulai Permainan".

   - Mekanisme Interaksi Tombol:
     * Jangan melakukan submit form HTML.
     * Jangan me-refresh halaman atau memanggil `location.reload()`.
     * Jangan mengubah halaman sebelum data JSON bab berhasil diperoleh dari HTTP GET ke URL Apps Script.
     * Gunakan JavaScript Event Listener dengan `event.preventDefault()` atau gunakan elemen ``.
     * Setelah tombol ditekan, langsung tampilkan loading indicator dengan teks "Menyiapkan kartu..." (Apps Script membutuhkan waktu sekitar 2–5 detik).
     * Selama loading berlangsung: nonaktifkan tombol (disabled), tampilkan spinner, dan cegah klik berulang.
     * Jika permintaan gagal, tampilkan pesan error yang ramah dan tombol "Coba Lagi".

2. HALAMAN GAMEPLAY (MENCOCOKKAN):

   - Tampilkan Judul Bab dan Instruksi dari field "Judul" dan "Instruksi".
   - Susun ketiga kartu Kiri (Kiri1, Kiri2, Kiri3) di kolom kiri, dan ketiga kartu Kanan (Kanan1, Kanan2, Kanan3) di kolom kanan dengan urutan tampil diacak.
   - Tampilkan progress bar atau indikator "Bab x dari y" agar pemain tahu posisinya dalam permainan.
   - Pemain klik satu kartu di kolom kiri, lalu satu kartu di kolom kanan untuk mencoba mencocokkan.
   - Tampilkan timer berjalan di pojok layar sebagai tantangan tambahan (opsional, boleh ditampilkan/disembunyikan lewat toggle).

   - Mekanisme Jawaban:
     * Jika pasangan BENAR: kedua kartu tampil dengan efek highlight sukses, lalu terkunci/menghilang dari papan, tambahkan skor +10.
     * Jika pasangan SALAH: kartu berkedip warna merah sebentar lalu kembali ke kondisi semula (tidak terkunci), skor tidak berkurang, pemain boleh mencoba kombinasi lain.

   - Bab dianggap selesai ketika ketiga pasangan pada bab tersebut sudah berhasil dicocokkan, lalu otomatis lanjut ke bab berikutnya.
   - Tambahkan elemen audio (musik background dan sound effect) saat kartu dipilih, cocok, atau salah, lengkap dengan tombol mute/unmute.
   - Nonaktifkan sementara klik pada kartu yang sedang dalam animasi cek kecocokan, untuk mencegah klik ganda yang membingungkan logika permainan.

3. HALAMAN HASIL & DOKUMENTASI (HISTORY):

   - Setelah semua bab selesai, tampilkan rangkuman skor akhir dan (jika timer aktif) waktu total penyelesaian, dengan ucapan selamat yang meriah.

   - Secara otomatis lakukan HTTP POST ke URL Google Apps Script dengan payload JSON:

     {
       "nama": "[Nama Siswa]",
       "kelas": "[Kelas]",
       "skor": [Skor Akhir]
     }

   - Tampilkan pesan konfirmasi: "Skor kamu telah berhasil dicatat!".
   - Jika pengiriman skor gagal, tampilkan pesan yang jelas dan tombol "Kirim Ulang".
   - Sediakan tombol "Main Lagi" yang mengembalikan pemain ke halaman form setup tanpa perlu me-refresh browser.

DESAIN DAN UI/UX:

- Warna Utama: Hijau Edukasi Sehat (#16A34A) dan Biru Cerah (#0284C7).
- Layout: Menggunakan card/papan permainan yang diletakkan di tengah (centered), membulat (border-radius: 16px), dengan bayangan halus (soft shadow).
- Tipografi: Gunakan font sans-serif modern yang mudah dibaca oleh remaja.
- Interaksi: Tambahkan animasi mikro (micro-interactions) saat kartu di-hover, dipilih, cocok, atau salah.
- Pastikan tampilan grid kartu tetap rapi dan mudah disentuh di layar HP (mobile-first, responsif, ukuran kartu cukup besar untuk jari).
- Teknologi: Gunakan HTML semantic, CSS murni, dan JavaScript vanilla — tanpa framework eksternal.

Mana yang Harus Dipilih?

Kalau materinya punya alur cerita atau konsep yang perlu dijelaskan bertahap (misal proses ilmiah, sejarah, studi kasus), Story Quest lebih pas karena bisa membangun konteks lewat narasi. Kalau materinya lebih ke hafalan istilah, fungsi, atau pasangan konsep, Mencocokkan lebih cepat dimainkan dan lebih menantang secara refleks.

Enaknya, skrip Apps Script yang sama bisa dipakai untuk kedua tipe game tanpa diubah — dia otomatis membaca kolom apa pun yang ada di sheet. Tinggal ganti isi Google Sheets dan prompt-nya, game baru bisa langsung jadi dalam hitungan menit. Tinggal eksperimen aja sesuai kebutuhan tugas, kelas, atau proyek iseng kamu.