E. Membuat Menu Awal Game

Menu awal berfungsi sebagai halaman pembuka sebelum game dimulai.

Contoh tampilan menu awal:

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!");

  }

}