--- title: 'Lompat & Tangkap: Game Gerak untuk Anak (Motion-Controlled) dengan Kamera Webcam' url: 'https://gretha.my.id/site/blog/lompat-dan-tangkap' markdown: 'https://gretha.my.id/site/blog/lompat-dan-tangkap.md' date: '2026-10-31' description: '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 …' --- # 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](https://gretha.my.id/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 | Komponen | Teknologi | Fungsi | |---|---|---| | Rendering | HTML5 Canvas | Game loop, sprite, partikel | | Logika | Vanilla JavaScript | State, collision, scoring | | Audio | Web Audio API | Musik latar & SFX | | Kamera | getUserMedia | Deteksi gerakan tubuh | | Storage | localStorage | High score | | Deployment | Shared Hosting | Akses via web | | AI Assistant | OpenClaw + DeepSeek | Coding, debugging, deployment | --- ## 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 | Tantangan | Solusi | |---|---| | Kamera butuh HTTPS | Kontrol fallback (keyboard/touch), game tetap playable | | Mobile nav bar menutupi tombol | Safe-area + tombol dinaikkan ~140px | | Shared hosting tanpa SSH | Deploy via robotku.php (file manager API) | | Audio autoplay diblokir browser | Mulai audio setelah interaksi user (klik Mulai) | | Performa Canvas di device lemah | Batasi partikel, optimasi render | --- ## Demo Langsung Coba game-nya di browser: **👉 [Menu Game](https://gretha.my.id/game/)****👉 [Lompat & Tangkap (langsung)](https://gretha.my.id/game/kiri-kanan/)** - 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](https://gretha.my.id/game/kiri-kanan/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](https://gretha.my.id/game/)** dan mainkan langsung di browser Anda. --- ## Navigation - Parent: [Blog](https://gretha.my.id/site/blog.md) - Next: [TOTP: Cara Kerja Autentikator 2FA dan Membangunnya Sendiri (Gratis, Murni PHP)](https://gretha.my.id/site/blog/totp.md)