Vibe Coding: Membuat Game Hand Tracking dengan Google AI Studio & MediaPipe

Mei 4, 2026 doavers 0 Comments

Di era AI sekarang, cara kita ngoding mulai berubah. Kita nggak lagi selalu mulai dari nol, tapi bisa “ngobrol” dengan AI untuk membangun aplikasi. Inilah yang disebut **Vibe Coding** — coding dengan alur natural, eksploratif, dan kolaboratif dengan AI.

Di artikel ini, kita akan bikin **game sederhana berbasis hand tracking** menggunakan:
– Google AI Studio (untuk bantu generate logic & ide)
– MediaPipe (untuk deteksi tangan real-time)

🚀 Apa Itu Vibe Coding?

Vibe Coding adalah pendekatan ngoding yang:
– Berbasis eksplorasi, bukan rigid planning
– Menggunakan AI sebagai pair programmer
– Fokus pada hasil cepat (rapid prototyping)
– Iteratif: coba → lihat → refine

Alih-alih mikir struktur dari awal, kamu cukup:
> “Kasih vibe” ke AI → AI bantu generate → kamu tweak → ulangi

🎮 Konsep Game: Hand Tracking Dodge Game

Game sederhana:
– Kamera menangkap tangan user
– Tangan jadi “controller”
– Hindari objek jatuh (misalnya bola)
– Skor bertambah jika berhasil menghindar

🧠 Stack yang Digunakan

– Frontend: HTML + JavaScript
– Hand Tracking: MediaPipe Hands
– AI Assistant: Google AI Studio (untuk generate kode & logic)

🎯 Logic Game Sederhana

Ambil posisi tangan → jadi posisi player
Spawn objek dari atas
Cek collision
Update score

🔥 Vibe Coding Prompt (INI YANG PALING PENTING)

Nah ini bagian kunci. Kamu bisa pakai prompt ini di Google AI Studio:

Prompt Awal

Saya ingin membuat game berbasis web menggunakan JavaScript dan HTML Canvas.

Game ini menggunakan webcam dan MediaPipe Hands untuk mendeteksi tangan user.

Konsep game:
- Tangan user mengontrol posisi karakter (gunakan ujung jari telunjuk sebagai pointer)
- Objek jatuh dari atas layar secara random
- Player harus menghindari objek tersebut
- Jika terkena, game over
- Jika berhasil menghindar, skor bertambah

Tolong buatkan:
1. Struktur HTML dasar
2. Setup MediaPipe Hands
3. Integrasi kamera webcam
4. Render canvas untuk game
5. Logic sederhana untuk:
   - Player movement berdasarkan posisi tangan
   - Spawn objek
   - Collision detection
   - Score system

Gunakan kode yang clean dan mudah dikembangkan.

Prompt Iterasi (Refinement)

Setelah dapat hasil pertama, lanjutkan:

Tambahkan fitur berikut ke game:
- Animasi smooth untuk objek jatuh
- Difficulty scaling (semakin lama semakin cepat)
- UI skor di atas layar
- Restart button setelah game over
- Tambahkan efek visual sederhana (warna atau glow)

Pastikan performa tetap ringan dan berjalan di browser biasa.

Prompt Advanced (Polish Level)

Refactor kode game sebelumnya agar:
- Modular (pisahkan logic game, rendering, dan input)
- Gunakan class atau pattern sederhana
- Tambahkan komentar pada setiap bagian penting
- Optimasi agar tidak lag di device low-end

Tambahkan juga fitur:
- Sound effect sederhana
- Particle effect saat collision