Lompat & Tangkap: Game Gerak untuk Anak

Game gerak (motion-controlled) untuk anak usia sekolah dasar — tangkap buah yang jatuh dengan menggerakkan tubuh di depan kamera. Tanpa instalasi, langsung jalan di browser.

Apa Itu Project Ini?

Lompat & Tangkap adalah game edukatif berbasis gerakan tubuh (motion-controlled) yang dibuat untuk anak-anak usia sekolah dasar. Pemain menangkap buah yang jatuh dari atas layar dengan menggerakkan tubuh di depan kamera webcam — kamera mendeteksi gerakan tubuh dan menerjemahkannya menjadi gerakan keranjang di layar.

Game ini single-file HTML5 (tanpa build step, tanpa dependensi), sehingga sangat mudah dijalankan: cukup buka file di browser. Kamera bersifat opsional — jika tidak ada kamera/HTTPS, game tetap bisa dimainkan dengan tombol panah, A/D, atau klik/geser.

Coba main langsung: Menu Game

Cara Main

1. Buka browser: https://gretha.my.id/game/ (atau https://gretha.my.id/game/kiri-kanan/ langsung).
2. Klik "Mulai Bermain", izinkan akses kamera (opsional).
3. Gerakkan tubuh kiri/kanan di depan kamera untuk menggerakkan keranjang.
4. Tangkap buah baik, hindari bom (mengurangi nyawa).
5. Skor tinggi disimpan otomatis di browser (localStorage).

Kontrol alternatif:

• Tombol panah kiri/kanan atau A / D
• Klik/geser pada layar (mouse atau sentuh)
• Spasi/Enter untuk mulai, P untuk pause

Fitur Utama

• Deteksi gerakan tubuh via webcam (frame differencing) — opsional, dengan checkbox.
• Pilihan tema: Buah-buahan, Boneka Laki-laki, Boneka Perempuan, Mobil-mobilan.
• Tingkat kesulitan: Mudah / Sedang / Sulit.
• Objek jatuh dengan poin berbeda + bom (nyawa -1) + bintang bonus (+5).
• Combo multiplier, level up (popup), partikel efek.
• Nyawa 3, skor tertinggi tersimpan (localStorage).
• Musik latar + efek suara (tangkap, combo, bonus, level up, game over, bom).
• Getar (vibrate) di perangkat mobile.
• Tombol: suara, pause, selesai (🏁).
• Menang otomatis jika skor ≥ 100.
• Responsif (desktop & mobile, safe-area Android).

Tech Stack

Arsitektur Singkat

┌──────────────────────────────────────────────┐
│              Browser (Frontend)              │
│  ┌──────────┐ ┌──────────┐ ┌──────────────┐ │
│  │  Kamera  │ │  Canvas  │ │  UI Kontrol  │ │
│  │  (opt.)  │ │  Game    │ │  suara/pause │ │
│  └────┬─────┘ └────┬─────┘ └──────────────┘ │
│       │ motion      │ render                 │
│  ┌────▼─────────────▼────┐                   │
│  │  Game Loop & State     │                  │
│  │  (scoring, collision)  │                  │
│  └───────────────────────┘                   │
└──────────────────────────────────────────────┘
       │ localStorage (high score)

Kamera bersifat opsional — frame differencing hanya aktif jika diizinkan. Tanpa kamera, kontrol fallback ke keyboard/mouse/touch.

Peran OpenClaw

Project ini dibangun dengan bantuan OpenClaw + DeepSeek:

1. Desain — menentukan mekanik game (objek jatuh, combo, level), pilihan tema, dan kesulitan.
2. Coding — menulis seluruh game dalam satu file HTML (HTML + CSS + JS) dengan Canvas rendering, Web Audio, dan getUserMedia.
3. Iterasi — penyesuaian mobile (safe-area Android, tombol naik agar tidak tertutup nav bar), penambahan musik/SFX, getar.
4. Deployment — upload ke shared hosting via robotku.php (file manager API), karena tidak ada SSH.
5. Dokumentasi — README, SUMMARY, MEMORY, AGENTS.md untuk konteks agent.

Insight dari Project Ini

1. Motion Game Bisa Tanpa Library Berat

Deteksi gerakan tubuh sederhana dengan frame differencing di Canvas sudah cukup untuk game anak. Tidak perlu MediaPipe/OpenCV — cukup bandingkan frame kamera.

2. Kamera = Secure Context

getUserMedia hanya jalan di HTTPS atau localhost. Di http://IP-LAN, kamera tidak aktif — game harus punya kontrol fallback (keyboard/touch) agar tetap bisa dimainkan.

3. Single-File = Mudah Deploy

Satu file index.html yang berisi semuanya (HTML/CSS/JS) sangat mudah di-deploy ke shared hosting: cukup upload satu file. Tidak ada build step, tidak ada dependensi.

4. Audio & Haptic Meningkatkan Engagement

Musik latar, efek suara (tangkap/combo/bonus/game over), dan getar di mobile membuat game terasa hidup untuk anak-anak.

5. AI Mempercepat Iterasi

Dari ide ke game yang bisa dimainkan hanya butuh beberapa jam dengan bantuan OpenClaw — AI menulis kode, manusia review & test.

Tantangan dan Solusi

Demo Langsung

Coba game-nya di browser:

👉 Menu Game 👉 Lompat & Tangkap (langsung)

• Izinkan akses kamera (opsional) untuk kontrol gerak tubuh.
• Atau gunakan tombol panah / A-D / klik-geser.
• Skor tertinggi tersimpan di browser.

Download

Project ini open source — silakan download dan mainkan di komputer Anda sendiri!

👉 Download lompat-tangkap.zip (~10 KB)

File yang Didapat

kiri-kanan/
├── index.html              ← Game utama (single file)
├── README.md               ← Panduan pengguna
├── SUMMARY.md              ← Ringkasan project
├── MEMORY.md               ← Konteks project
├── AGENTS.md               ← Panduan agent
└── lompat-tangkap.zip      ← Arsip siap deploy

Tutorial Instalasi (Lokal)

1. Download lompat-tangkap.zip atau index.html.
2. Extract ke folder web server (XAMPP/Laragon) atau buka langsung di browser.
3. Buka http://localhost/kiri-kanan/ (atau double-click index.html).
4. Untuk kamera aktif, jalankan via HTTPS atau localhost (bukan IP LAN).

Penutup

Lompat & Tangkap adalah contoh bagaimana game edukatif berbasis gerakan tubuh bisa dibangun sederhana, ringan, dan mudah di-deploy — bahkan di shared hosting. Cocok untuk anak-anak belajar koordinasi motorik sambil bermain, dan bisa jadi inspirasi untuk project serupa (game edukasi, rehabilitasi, atau hiburan keluarga).

Mau mencoba atau berkontribusi? Kunjungi Menu Game dan mainkan langsung di browser Anda.