1. DOM Manipulation (Elemen <div> + CSS)

Metode ini memanfaatkan Document Object Model (DOM) browser standar. Setiap entitas game (karakter, kartu, rintangan) direpresentasikan sebagai elemen HTML (biasanya <div>, <span>, atau <img>) dan posisinya diatur melalui style CSS (transform: translate(), left, top).

• Karakteristik Teknis:
  • Retained Mode: Browser melacak struktur hierarki pohon DOM, event handler bawaan, styling, dan bounding box setiap elemen.
  • Aksesibilitas & Styling Bawaan: Mendukung CSS animations, transition, Flexbox/Grid, serta styling teks resolusi tinggi tanpa setup rumit.
  • Overhead Tinggi: Setiap pembaruan posisi memicu kalkulasi ulang gaya (recalculate style), penataan letak (reflow/layout), dan penggambaran ulang (repaint).
• Kelebihan: Sangat cepat untuk prototyping, tidak membutuhkan siklus render loop yang rumit, dan mudah menangani UI dinamis atau input sentuh/klik.
• Kelemahan: Terjadi penurunan performa drastis (frame drop) jika jumlah elemen bergerak melebihi beberapa lusin.
• Cocok Untuk: Permainan berbasis giliran (turn-based), papan catur, puzzle logika, solitaire, memori kartu, atau kuis visual interaktif.

2. HTML5 <canvas> (2D Context)

Pendekatan standar industri untuk game web 2D kasual. Elemen <canvas> menyediakan area gambar berbasis piksel tempat developer mengontrol rendering secara manual tiap frame via API CanvasRenderingContext2D (menggunakan requestAnimationFrame).

• Karakteristik Teknis:
  • Immediate Mode: Browser tidak mengingat apa yang telah digambar; setiap frame mengharuskan pembersihan kanvas (clearRect()) dan penggambaran ulang objek dari awal.
  • Rendering Ringan: Menghindari beban overhead tree DOM dan layout engine browser.
  • Kontrol Penuh: Pengembang memiliki kontrol penuh atas manipulasi piksel, transformasi matriks, sprite batching sederhana, dan pathing vektor.
• Kelebihan: Mampu menggerakkan ratusan objek secara simultan pada 60 FPS tanpa membebani browser, kontrol timing loop presisi, serta implementasi deteksi tabrakan (AABB/lingkaran) yang efisien.
• Kelemahan: Seluruh sistem interaksi, hit-testing, dan layering UI harus dibuat secara mandiri dari logika koordinat JavaScript.
• Cocok Untuk: Game aksi real-time, side-scroller/platformer, arkade klasik (Pac-Man, Space Invaders), endless runner, shoot 'em up, dan simulasi fisika ringan.

3. WebGL / Pustaka (PixiJS / Three.js)

Teknologi grafis tingkat rendah berbasis OpenGL ES yang berjalan langsung di browser dengan memanfaatkan Unit Pemroses Grafis (GPU) melalui shader pipeline (GLSL).

• Karakteristik Teknis:
  • Hardware Acceleration: Beban pemrosesan grafis dialihkan dari CPU ke GPU, memungkinkan kalkulasi matriks 3D paralel dan komputasi shader.
  • Pustaka Abstraksi:
    • PixiJS: Mengoptimalkan rendering 2D dengan auto-batching sprite dan draw calls minimal.
    • Three.js: Menyediakan pipeline 3D lengkap (mesh, geometri, material, lighting, shadow mapping, dan kamera).
• Kelebihan: Mampu merender puluhan ribu partikel, model poligon 3D kompleks, efek pencahayaan dinamis, post-processing (bloom, blur), dan efek visual modern dengan latensi sangat rendah.
• Kelemahan: Kompleksitas kode tinggi (terutama WebGL mentah), ukuran bundle aset lebih besar, dan konsumsi daya/baterai lebih tinggi pada perangkat mobile.
• Cocok Untuk: Game 3D (first-person, racing, low-poly adventure), bullet-hell shooters dengan ribuan proyektil, game strategi RTS dengan banyak unit, serta game visual novel dengan efek post-processing tingkat lanjut.

Panduan Lengkap: Tahapan Step-by-Step Membuat Game dengan HTML, CSS, dan JavaScript