Prompt Game Tarik Tambang Matematika

Prompt (salin semua — untuk Canva AI Code for Me)

Buatkan sebuah game web interaktifbernama "Tarik Tambang Matematika" sesuai spesifikasi berikut. Hasil akhir berupa satu file HTML/CSS/JavaScript yang responsif (desktop/tablet/ponsel, baik portrait maupun landscape) dan dapat langsung dijalankan di browser modern. Beri komentar singkat pada bagian penting kode.

UI & Tata Letak

1. Tampilan awal (Welcome modal)

Modal tengah dengan judul besar: "TARIK TAMBANG MATEMATIKA". Subteks: "Permainan ini dirancang untuk Interactive Flat Panel (IFP). Bisa digunakan di smartphone/tablet dengan view landscape/mendatar."

   Tombol hijau "Oke" untuk menutup modal.

2. Menu Pilihan Mode

Setelah welcome modal, tampilkan modal kedua (grid tombol) berjudul: "Pilih Mode Permainan".

Mode yang tersedia (masukkan ikon/teks singkat per tombol): Tambah, Kurang, Kali, Bagi, Campuran (+-×÷), Pangkat 2, Pangkat 3, Akar, Akar Pangkat 3, Kombinasi, +2 (2 digit), -2 (2 digit negatif), Tambah/Kurang (±), Kali/Bagi (×÷), Persen, FPB, KPK, Waktu, Jarak, Hitung Buah. Setiap tombol berbentuk kotak bulat agak besar (touch-friendly). Tombol terpilih menonjol (shadow/warna).

3. Layar Game Utama

Layout horizontal: dua panel pemain (kiri dan kanan) terletak di kiri dan kanan area tengah. Di tengah ada visual dua karakter kecil menarik tali (kartun) dan sebuah titik kuning di tali sebagai indikator posisi.

Di atas tiap panel: kotak soal, mis. "5 + 9 = ?" (kiri) dan "8 + 2 = ?" (kanan) — konfigurasi: satu soal ditampilkan untuk setiap tim/ pemain.

Di bawah tiap soal: keypad numerik (0–9), tombol C (clear) berwarna merah, tombol Go/Enter berwarna hijau/biru. Keypad harus besar untuk touchscreen.

Di bawah area tengah: instruksi singkat: "Jawab soal untuk menarik tali!"

Di bagian paling atas/kanan: skor untuk setiap tim, serta indikator level dan timer (opsional).

Mekanika & Interaksi

1. Aturan dasar

Pemain menekan angka lalu tombol Go untuk mengirim jawaban.

   * Jika jawaban benar, tim tersebut **menarik tali ke arah mereka** (animasi titik kuning bergerak beberapa persen ke sisi mereka). Jika salah, tali bergerak sedikit ke arah lawan atau tetap (pilih: gerak balik kecil).

   * Jika tali mencapai sisi penuh (mis. 90% ke kiri atau kanan), tim yang menarik menang pada ronde itu. Reset posisi tali ke tengah untuk ronde baru.

   * Setiap jawaban benar menambah poin tim (+1). Menang ronde menambah bonus poin dan menampilkan animasi kemenangan (konfeti kecil di sisi pemenang).

2. Soal & Level

   * Soal dihasilkan secara acak sesuai mode terpilih. Misal: mode Tambah → operand 0–20 untuk level awal; naikkan range sesuai level.

   * Mode “Campuran” memilih operator acak dari +, −, ×, ÷. Pastikan pembagian menghasilkan bilangan bulat atau pembulatan 1 atau 2 desimal.

   * Mode khusus (Pangkat, Akar, FPB/KPK, Waktu/Jarak/Hitung Buah) hasilkan soal relevan sederhana untuk SD (contoh: FPB(12,18)=6).

   * Ada pengaturan `level` yang menaikkan kesulitan setelah beberapa jawaban benar (mis. setiap 10 jawaban).

3. Animasi & Efek

   * Animasi tarik tali halus (CSS + JS) dengan easing; titik kuning di tengah bergerak secara proporsional.

   * Saat jawaban benar: angka/huruf di panel berkedip hijau singkat; suara efek singkat (opsional — gunakan WebAudio atau element audio). Saat salah: berkedip merah.

   * Efek kemenangan: konfeti sederhana atau lencana muncul di sisi pemenang.

4. Responsif & Orientasi

   * Pastikan tata letak beradaptasi: pada layar sempit (ponsel portrait) tata letak berubah ke kolom vertikal (panel kiri di atas, panel kanan bawah, animasi tali di tengah). Untuk IFP landscape tampilkan seperti gambar.

   * Gunakan unit responsif (vh/vw/rem) dan breakpoint untuk ukuran tombol keypad.

5. Aksesibilitas

   * Semua tombol punya label ARIA. Kontras warna memadai. Tombol besar untuk touch.

6. Pengaturan & Statistik

   * Sederhana: tombol `Reset`, `Pause`, `Mode` (kembali ke menu).

   * Tampilan skor live, level, dan timer (opsional). Simpan skor teratas lokal (localStorage) dengan nama pemain/kelas.

## Asset & Styling

* Palet warna: latar belakang pastel biru muda (#e9f7fc), panel putih, bayangan lembut, tombol primer hijau/ biru, tombol kesalahan merah.

* Font: gunakan Google Font yang mudah dibaca (Contoh: Poppins atau Inter).

* Gunakan ikon SVG sederhana untuk tambahan (ikon jam, penggaris, buah semangka). Jika tidak tersedia, gunakan teks + emoji sebagai fallback.

* Gaya visual: bersih, flat, sedikit neumorphism pada tombol (soft shadow) agar mirip gambar.

## Output yang Diminta

* Buat satu file HTML yang menyertakan CSS & JavaScript (inline atau internal) agar bisa langsung dicoba.

* Kode harus diberi komentar, khususnya pada bagian: pembuatan soal acak, pengecekan jawaban, update posisi tali, dan collision/penentuan pemenang.

* Sertakan contoh fungsi `generateQuestion(mode, level)` yang menghasilkan object soal `{text: "5 + 9 = ?", answer: 14}` untuk dua panel.

* Jika memungkinkan, sertakan mode demo otomatis (bot) untuk satu sisi agar bisa mencoba single-player.

## Contoh ringkas fungsional (instruksi untuk implementasi)

* `state = {ropePos: 0.5, scoreLeft:0, scoreRight:0, mode:'Tambah', level:1}` (ropePos 0..1)

* Saat jawaban benar: `ropePos += 0.05 + level*0.01` untuk kiri atau `ropePos -= ...` untuk kanan.

* Check win: jika `ropePos <= 0.1` => kanan menang; `ropePos >= 0.9` => kiri menang.

* Reset ronde: `ropePos = 0.5; updateUI()`.

## Catatan tambahan untuk Canva AI

* Tolong hasilkan **file HTML lengkap** dengan semua asset inline atau fallback; jika ada file ikon eksternal, sediakan alternatif CSS/emoji.

* Sertakan komentar singkat di bagian atas file: nama pembuat (mis. "Generated for Saiful Jamil"), tanggal, dan catatan penggunaan di IFP/tablet.