Filosofi Filosofi di balik "LUMBO PERAU" sejatinya melampaui sekadar adu kecepatan; ia adalah manifestasi nyata dari nilai persatuan dan harmoni. Sebagaimana perahu yang hanya akan melaju kencang jika puluhan pendayungnya bergerak dalam satu irama yang serentak, demikian pula kehidupan beragama menuntut adanya Ukhuwah (persaudaraan) dan Nizam (kedisiplinan) yang kokoh. Game ini menanamkan pesan mendalam kepada siswa bahwa kemenangan sejati tidak diraih seorang diri, melainkan melalui sinergi, kekompakan, dan keselarasan gerak dalam mencapai tujuan bersama yang mulia.

Link Media : LUMBO PERAU

Salah satu cara yang dapat dilakukan guru adalah dengan memanfaatkan game edukasi sederhana yang dibuat sendiri dan disesuaikan dengan materi pembelajaran.

A. Gambaran Umum Game Panjat Pinang Edukatif

• Siswa menjawab soal pilihan ganda

• Setiap jawaban benar membuat karakter naik memanjat tiang pinang

• Jika karakter mencapai puncak, siswa dinyatakan menang

Game ini dapat digunakan sebagai:

• Evaluasi formatif

• Ice breaking pembelajaran

• Media pembelajaran berbasis gamifikasi

B. Alat dan Bahan yang Dibutuhkan

Untuk membuat game ini, guru hanya membutuhkan:

1. Laptop atau komputer

2. Browser (Google Chrome, Edge, atau Firefox)

3. Aplikasi editor teks (disarankan: Visual Studio Code)

4. File gambar (background, tiang pinang, karakter)

5. Satu file bernama index.html

C. Konsep Dasar Pembuatan Game

Game Panjat Pinang dibuat menggunakan satu file HTML yang di dalamnya berisi:

• HTML → struktur tampilan

• CSS → desain dan posisi objek

• JavaScript → logika soal dan gerakan karakter

D. Struktur Dasar File HTML

  <h1>Game Panjat Pinang Edukatif</h1>

  <button onclick="keMenuKelas()">Mulai</button>

</div>

Tombol Mulai nantinya akan mengarahkan pemain ke tahap berikutnya.

F. Membuat Arena Panjat Pinang

Arena merupakan bagian utama tempat karakter memanjat tiang pinang.

Contoh struktur arena game:

<div id="arena" style="display:none">

  <img src="pinang.png" alt="Tiang Pinang">

  <img id="pemain" src="anak.png"

       style="position:absolute; bottom:0%">

</div>

Penjelasan:

• Gambar pinang.png sebagai tiang

• Gambar anak.png sebagai karakter

• Posisi karakter diatur menggunakan nilai bottom

G. Membuat Bank Soal

Bank soal adalah inti dari game edukasi.
Soal disimpan dalam bentuk daftar (array) menggunakan JavaScript.

Contoh bank soal:

const soal = [

  {

    pertanyaan: "Nabi yang terkenal sangat sabar adalah...",

    pilihan: ["Nabi Musa", "Nabi Ayub", "Nabi Yusuf", "Nabi Ibrahim"],

    jawaban: 1

  },

  {

    pertanyaan: "Zakat fitrah dibayarkan pada bulan...",

    pilihan: ["Rajab", "Syaban", "Ramadan", "Muharram"],

    jawaban: 2

  }

];

Keterangan:

• pertanyaan → teks soal

• pilihan → jawaban pilihan ganda

• jawaban → nomor jawaban benar (dimulai dari 0)

 H. Logika Jawaban dan Gerakan Memanjat

Bagian ini berfungsi untuk:

• Mengecek jawaban siswa

• Menggerakkan karakter naik ke atas

Contoh logika sederhananya:

let nomorSoal = 0;

let posisi = 0;

function jawab(pilihan) {

  if (pilihan === soal[nomorSoal].jawaban) {

    posisi += 20;

    document.getElementById("pemain").style.bottom = posisi + "%";

    alert("Jawaban Benar!");

  } else {

    alert("Jawaban Salah!");

  }

  nomorSoal++;

  if (nomorSoal === soal.length) {

    alert("Selamat! Anda berhasil mencapai puncak!");

  }

}

Semakin banyak jawaban benar, semakin tinggi posisi karakter.

HALAMAN 1 – PENDAHULUAN

A. Tujuan Modul

Modul ini dibuat untuk membantu teman-teman agar dapat:

• Membuat game edukasi sederhana
• Digunakan untuk pembelajaran PAI dan Budi Pekerti
• Dijalankan di laptop, proyektor, dan Interaktif Flat Panel

Game yang dibuat adalah Game Tarik Tambang PAI, di mana siswa menjawab soal untuk memenangkan permainan.

📌 Codingnya bisa menggunakan apa saja, chatgpt, canva, gemini dll

HALAMAN 2 – ALAT YANG DIBUTUHKAN

A. Perangkat

• Laptop / PC (Windows)
• Mouse

B. Aplikasi (Gratis)

1. Google Chrome
2. Visual Studio Code (VS Code)

HALAMAN 3 – MEMBUAT FOLDER GAME

Langkah-langkah:

1. Klik kanan di Desktop
2. Pilih New → Folder
3. Beri nama folder:

4.  GAME-TARTAM-PAI (File asset dapat di download di sini : File Asset Game

HALAMAN 4 – STRUKTUR FOLDER

Masuk ke folder GAME-TARTAM-PAI, lalu buat:

1. Folder baru bernama:

2.  assets

3. Di luar folder assets, buat file:

4.  index.html

HALAMAN 5 – MEMASUKKAN FILE GAMBAR DAN AUDIO

Masukkan ke folder assets:

• backsound.mp3
• gambar latar
• gambar anak
• gambar tambang

HALAMAN 6 – MEMBUKA VS CODE

1. Buka VS Code
2. Klik File → Open Folder
3. Pilih folder GAME-TARTAM-PAI

HALAMAN 7 – MENULIS SCRIPT GAME

1. Klik file index.html
2. Salin script game lengkap (yang sudah dibuat)
3. Tempel ke dalam file
4. Tekan Ctrl + S untuk menyimpan

HALAMAN 8 – MENJALANKAN GAME

Cara Termudah:

1. Klik kanan index.html
2. Pilih Open with Live Server

Game otomatis terbuka di browser.

HALAMAN 9 – CARA MENGGANTI SOAL

Cari bagian:

const bankSoal = {

Cara menambah soal:

• Tambahkan baris soal baru
• Urutan jawaban bebas (acak otomatis)

HALAMAN 10 – CARA MENGGANTI BACKSOUND

1. Masukkan file MP3 ke folder assets
2. Pastikan nama file sama
3. Volume diatur agar tidak terlalu keras

HALAMAN 11 – CARA MENGGUNAKAN DI KELAS

• Gunakan proyektor / IFP
• Siswa bermain bergantian
• Diskusi setelah soal dijawab

Game ini mendorong:

• Kerja sama
• Berpikir cepat
• Pembelajaran menyenangkan

HALAMAN 12 – PENUTUP

Selamat 🎉

Anda telah berhasil:

• Membuat game edukasi sendiri
• Menggunakan teknologi untuk PAI
• Menjadi guru inovatif