Asisten pemrograman AI telah berkembang dari pelengkapan otomatis sederhana menjadi agen otonom yang dapat menyusun rencana, mengedit banyak file, menjalankan pengujian, dan membuat pull request. Tutorial ini membahas tiga alat utama: Claude Code, Cursor, dan GitHub Copilot.

1) Apa yang membuat sebuah alat disebut "agentik"?

Pelengkapan kode AI tradisional menyarankan beberapa baris berikutnya. Alat agentik melangkah lebih jauh:

Alat agentik dapat memahami seluruh struktur proyek Anda, merencanakan perubahan di banyak file, menjalankan perubahan tersebut, melakukan pengujian, dan mengulang proses hingga tugas selesai.

2) Perbandingan singkat: Claude Code vs Cursor vs Copilot

3) Dasar-dasar Claude Code

Claude Code berjalan dengan Opus 4.8 (model default-nya saat ini) dan jendela konteks besar. Instal dan lakukan autentikasi:

# Instal Claude Code (penginstal native, direkomendasikan)
curl -fsSL https://claude.ai/install.sh | bash

# Atau melalui npm (memerlukan Node 18+)
npm install -g @anthropic-ai/claude-code

# Autentikasi: jalankan claude dan ikuti perintah di browser
claude

# Mulai di proyek Anda
cd your-project
claude

Perintah dasar

# Tanyakan tentang basis kode Anda
claude "How is authentication implemented here?"

# Hasilkan kode
claude "Add a rate limiter middleware"

# Refaktor banyak file
claude "Rename UserService to AuthService across the codebase"

# Buat PR
claude "Create a PR that adds input validation to all API endpoints"

Konfigurasi proyek

Tempatkan konteks proyek dalam file CLAUDE.md di root repositori Anda. Claude Code membacanya secara otomatis pada awal setiap sesi:

# Catatan proyek

- Bahasa: TypeScript, diformat dengan Prettier
- Pengujian: Vitest, di tests/
- Jangan ubah node_modules/ atau dist/

Pengaturan yang dapat dibaca mesin (izin alat, variabel lingkungan, hook) ditempatkan di .claude/settings.json. Misalnya, untuk mewajibkan persetujuan sebelum alat destruktif dijalankan, konfigurasikan izin di sana.

Memori dan konteks

Konteks proyek persisten disimpan dalam file CLAUDE.md yang dimuat Claude Code pada awal setiap sesi, ditambah penyimpanan memori otomatis yang diperbarui Claude berdasarkan koreksi dan preferensi Anda. Untuk memberinya konteks permanen, edit CLAUDE.md alih-alih memberikan prompt "Remember:" sekali pakai:

# CLAUDE.md
Ini adalah monorepo. Kode bersama berada di packages/.

Gunakan perintah /clear di dalam sesi untuk mereset konteks kerja.

4) Fitur agentik IDE Cursor

Cursor dibangun di seputar alur kerja agentik. Fitur utamanya:

Mode Agent

Tekan Cmd+Shift+I (Mac) atau Ctrl+Shift+I (Windows/Linux) untuk membuka Composer dalam mode Agent:

Alur kerja mode Agent:
1. Jelaskan tugas Anda
2. Agen membuat rencana
3. Anda menyetujui atau mengubahnya
4. Agen menjalankan perubahan
5. Tinjau dan ulangi

Mode Plan

Untuk tugas kompleks, gunakan mode Plan secara eksplisit:

@plan Tambahkan autentikasi pengguna dengan:
- Token JWT
- Rotasi refresh token
- Hashing kata sandi dengan bcrypt
- Pembatasan laju pada upaya login

Agen akan:

1. Mempelajari kode Anda yang sudah ada
2. Membuat rencana implementasi terperinci
3. Menunggu persetujuan Anda
4. Menjalankannya langkah demi langkah

Penyisipan konteks

Gunakan @ untuk menambahkan konteks tertentu:

@file src/api/auth.ts
@folder src/middleware
@docs https://jwt.io/introduction

Implementasikan middleware verifikasi JWT dengan mengikuti pola-pola ini

Agen paralel

Jalankan beberapa agen secara bersamaan di cabang yang berbeda:

# Di Cursor:
1. Buka Command Palette
2. "Cursor: New Agent in Worktree"
3. Setiap agen bekerja secara terisolasi
4. Bandingkan hasil secara berdampingan

Cursor 3 menambahkan Agents Window (buka dengan Cmd+Shift+P lalu "Agents Window") yang menjalankan beberapa agen secara paralel di checkout lokal, git worktree, dan lingkungan cloud. Perintah /worktree menempatkan setiap agen dalam git worktree terisolasinya sendiri, sedangkan /best-of-n menjalankan tugas yang sama pada beberapa model agar Anda dapat membandingkan hasil secara berdampingan.

Aturan untuk konsistensi

Buat .cursor/rules/project.mdc:

# Aturan Proyek

## Gaya Kode
- Gunakan mode strict TypeScript
- Utamakan komponen fungsional
- Gunakan named export, bukan default export

## Pengujian
- Setiap fitur memerlukan pengujian
- Gunakan blok describe/it
- Buat mock untuk layanan eksternal

## Keamanan
- Jangan pernah commit rahasia
- Validasi semua input pengguna
- Gunakan kueri berparameter

5) Fitur agentik GitHub Copilot

Copilot telah berkembang melampaui pelengkapan otomatis:

Copilot Chat

Buka panel chat dan gunakan perintah slash:

/explain - Jelaskan kode yang dipilih
/fix - Perbaiki masalah dalam pilihan
/tests - Hasilkan pengujian
/doc - Tambahkan dokumentasi

Agen pemrograman (dari issue menjadi pull request)

# Di GitHub:
1. Buka sebuah issue GitHub
2. Tetapkan "Copilot" sebagai penerima tugas
3. Agen pemrograman bekerja di latar belakang:
   menganalisis issue, mengedit file, menjalankan pengujian
4. Agen membuka pull request untuk Anda tinjau

Ini berbeda dari mode agent Copilot di dalam IDE, yang bekerja secara sinkron bersama Anda di VS Code atau JetBrains.

Copilot kini membagi pekerjaan otonomnya menjadi dua: mode agent berjalan secara sinkron di dalam IDE Anda (VS Code dan JetBrains), menentukan file yang perlu diedit, menjalankan perintah terminal, dan mengulangi proses saat terjadi kesalahan; agen pemrograman berjalan secara asinkron di cloud, menangani issue yang ditugaskan dan menghasilkan pull request sementara Anda mengerjakan hal lain.

Saran inline dengan konteks

Copilot membaca basis kode Anda. Bantu Copilot dengan komentar:

// Middleware autentikasi yang:
// - Mengambil JWT dari header Authorization
// - Memvalidasi tanda tangan token
// - Menambahkan pengguna ke request
// - Mengembalikan 401 jika tidak valid
export function authMiddleware(req, res, next) {
  // Copilot menghasilkan implementasinya
}

6) Praktik terbaik untuk semua alat

Tulis prompt yang jelas

❌ Buruk: "Perbaiki bug"

✅ Baik: "Perbaiki null pointer exception di UserService.getById
saat pengguna tidak ditemukan. Kembalikan null alih-alih melempar error."

❌ Buruk: "Tambahkan pengujian"

✅ Baik: "Tambahkan unit test untuk CartService yang mencakup:
- Menambahkan item ke keranjang kosong
- Menghapus item
- Menghitung total dengan diskon
- Kasus khusus: jumlah negatif"

Gunakan mode rencana untuk tugas kompleks

Untuk setiap tugas yang menyentuh 3+ file, selalu:

1. Minta rencana terlebih dahulu
2. Tinjau rencana
3. Setujui atau ubah
4. Biarkan agen menjalankannya
5. Tinjau perubahan sebelum melakukan commit

Berikan konteks arsitektur

Sebelum pekerjaan besar, beri agen penjelasan singkat:

"Ini adalah arsitektur microservices:
- api-gateway: Merutekan request
- auth-service: JWT, sesi
- user-service: CRUD pengguna
- notification-service: Email, push

Layanan berkomunikasi melalui Redis pub/sub.
Basis datanya adalah PostgreSQL dengan Prisma ORM."

Test-driven development dengan agen

1. Tulis pengujian yang gagal terlebih dahulu:
   "Tulis pengujian untuk pendaftaran pengguna yang mengharapkan validasi email"

2. Biarkan agen melihat pengujian yang gagal:
   "Implementasikan pendaftaran agar pengujian ini lulus"

3. Ulangi hingga semuanya berhasil:
   "Perbaiki kegagalan pengujian yang tersisa"

7) Pertimbangan keamanan

Alat agentik memiliki kekuatan nyata. Tetapkan batasan:

Gerbang persetujuan

// .claude/config.json
{
  "safety": {
    "requireApproval": [
      "rm",
      "git push",
      "npm publish",
      "database migrations",
      "env file changes"
    ]
  }
}

Sandboxing

# Jalankan agen di lingkungan terisolasi
docker run -v $(pwd):/workspace -it claude-sandbox

# Atau gunakan git worktree untuk isolasi
git worktree add ../feature-branch feature-branch

File sensitif

# .cursorignore / .claudeignore
.env
.env.*
secrets/
credentials/
*.pem
*.key

Tinjau semua perubahan

# Sebelum menerima perubahan agen:
git diff --stat
git diff

# Gunakan staging interaktif
git add -p

# Jangan pernah melakukan auto-merge tanpa peninjauan

8) Pola alur kerja yang efektif

Pola 1: Jelajahi, Rencanakan, Jalankan

Sesi 1: "Bagaimana cara kerja sistem pembayaran?"
        → Agen menjelajah, Anda mempelajarinya

Sesi 2: "Apa yang diperlukan untuk menambahkan Stripe?"
        → Agen membuat rencana

Sesi 3: "Implementasikan integrasi Stripe"
        → Agen menjalankan rencana

Pola 2: Eksplorasi paralel

# Di Cursor dengan agen paralel:

Agen 1: "Implementasikan caching dengan Redis"
Agen 2: "Implementasikan caching dengan Memcached"
Agen 3: "Implementasikan caching dengan LRU dalam memori"

→ Bandingkan implementasi, pilih pendekatan terbaik

Pola 3: Migrasi bertahap

Langkah 1: "Identifikasi semua penggunaan API yang sudah usang"
Langkah 2: "Buat adapter untuk API baru"
Langkah 3: "Migrasikan modul A agar menggunakan adapter"
Langkah 4: "Migrasikan modul B..."
...
Langkah N: "Hapus adapter, gunakan API baru secara langsung"

Pola 4: Pengembangan fitur dengan pengujian lebih dahulu

1. "Tulis acceptance test untuk pengeditan profil pengguna"
2. "Tulis unit test untuk validasi profil"
3. "Implementasikan hingga pengujian lulus"
4. "Tambahkan integration test"
5. "Refaktor agar lebih jelas"

9) Kapan menggunakan alat yang mana

10) Mengukur efektivitas

Pantau metrik berikut untuk mengevaluasi alat agentik:

const metrics = {
  // Produktivitas
  suggestionsAccepted: 'persentase saran yang Anda pertahankan',
  timeToFeature: 'jumlah jam dari awal hingga PR digabungkan',
  linesPerHour: 'kecepatan penulisan kode (gunakan dengan hati-hati)',
  
  // Kualitas
  bugsIntroduced: 'cacat yang dilacak berasal dari kode buatan AI',
  testCoverage: 'cakupan pengujian kode buatan AI',
  reviewChanges: 'seberapa banyak Anda mengubah saran AI',
  
  // Biaya
  apiCosts: 'pengeluaran bulanan untuk alat AI',
  creditsUsed: 'kredit Cursor yang digunakan',
  
  // Pembelajaran
  newPatternsLearned: 'teknik yang Anda pelajari dari AI',
  codebaseUnderstanding: 'seberapa baik AI membantu Anda belajar',
}

11) Kesalahan umum

Terlalu memercayai agen

❌ Menerima perubahan besar tanpa peninjauan
❌ Membiarkan agen menjalankan perintah destruktif
❌ Tidak memahami kode sebelum merilisnya

✅ Tinjau setiap perubahan
✅ Pahami apa yang Anda rilis
✅ Gunakan agen sebagai rekan kolaborasi, bukan pengganti

Pencemaran konteks

❌ Prompt sangat besar dengan konteks yang tidak relevan
❌ Tidak menghapus konteks di antara tugas yang tidak berkaitan
❌ Menyertakan file hasil generasi dalam konteks

✅ Jaga agar prompt tetap terfokus
✅ Gunakan referensi @file tertentu
✅ Kecualikan artefak build

Ambiguitas prompt

❌ "Buat lebih baik"
❌ "Perbaiki masalahnya"
❌ "Tambahkan beberapa pengujian"

✅ "Kurangi kompleksitas waktu dari O(n²) menjadi O(n log n)"
✅ "Tangani kasus null pada baris 45 dengan mengembalikan lebih awal"
✅ "Tambahkan pengujian untuk kasus khusus: input kosong, panjang maksimum, unicode"

12) Daftar periksa untuk memulai

## Daftar Periksa Penyiapan

### Claude Code
- [ ] Instal CLI: `npm install -g @anthropic/claude-code`
- [ ] Autentikasi: `claude login`
- [ ] Buat `.claude/config.json`
- [ ] Tambahkan `.claudeignore` untuk file sensitif

### Cursor
- [ ] Unduh dari cursor.com
- [ ] Impor pengaturan VS Code
- [ ] Konfigurasikan `.cursor/rules/`
- [ ] Pelajari `Cmd+Shift+I` untuk mode Agent

### GitHub Copilot
- [ ] Instal ekstensi di IDE Anda
- [ ] Aktifkan Copilot Chat
- [ ] Coba Copilot Workspace untuk issue
- [ ] Konfigurasikan `.github/copilot-instructions.md`

### Semua Alat
- [ ] Siapkan gerbang persetujuan untuk operasi destruktif
- [ ] Buat file ignore untuk rahasia
- [ ] Tetapkan alur kerja peninjauan
- [ ] Pantau metrik sejak hari pertama

Terkait

• Rilis game web yang dimuat dengan cepat
• Web Worker untuk logika game
• Game Jam & Hackathon — alat kode AI mengubah apa yang dapat diwujudkan dalam jam 48 jam
• Perbandingan Engine Game Web — memilih engine yang cocok dengan alur kerja berbantuan AI

Analitik membantu Anda memahami apa yang dilakukan pemain, di mana mereka mengalami kesulitan, dan apa yang membuat mereka tetap terlibat. Tutorial ini menunjukkan apa saja yang perlu dilacak dan caranya.

1) Apa yang perlu dilacak

Metrik keterlibatan:

• Awal dan durasi sesi
• Level yang dimulai dan diselesaikan
• Fitur yang digunakan
• Retensi (kunjungan kembali)

Metrik performa:

• Waktu pemuatan
• Laju bingkai
• Penggunaan memori
• Kesalahan dan crash

Metrik konversi:

• Penyelesaian tutorial
• Pembelian pertama
• Pembagian ke media sosial

2) Pelacakan peristiwa sederhana

class Analytics {
  constructor(endpoint) {
    this.endpoint = endpoint
    this.sessionId = crypto.randomUUID()
    this.queue = []
    this.flushInterval = 30000 // 30 seconds
    
    setInterval(() => this.flush(), this.flushInterval)
    // Flush when the page is being hidden, not on beforeunload.
    // beforeunload/unload are unreliable (often don't fire on mobile,
    // and block the back/forward cache). visibilitychange + pagehide
    // are the recommended events for end-of-session sends.
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') this.flush()
    })
    window.addEventListener('pagehide', () => this.flush())
  }
  
  track(event, data = {}) {
    this.queue.push({
      event,
      data,
      sessionId: this.sessionId,
      timestamp: Date.now(),
      url: location.href,
    })
    
    // Flush immediately for important events
    if (event === 'error' || event === 'purchase') {
      this.flush()
    }
  }
  
  async flush() {
    if (this.queue.length === 0) return
    
    const events = [...this.queue]
    this.queue = []
    
    try {
      await fetch(this.endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ events }),
        keepalive: true, // Important for beforeunload
      })
    } catch {
      // Put events back in queue
      this.queue.unshift(...events)
    }
  }
}

const analytics = new Analytics('/api/analytics')

3) Pelacakan sesi

// Track session start
analytics.track('session_start', {
  referrer: document.referrer,
  screen: `${screen.width}x${screen.height}`,
  devicePixelRatio: window.devicePixelRatio,
  userAgent: navigator.userAgent,
})

// Track session end
let sessionStart = Date.now()

// Send session_end when the page is hidden, not on beforeunload.
// beforeunload is unreliable on mobile and breaks the bfcache.
function recordSessionEnd() {
  analytics.track('session_end', {
    duration: Date.now() - sessionStart,
  })
}
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') recordSessionEnd()
})
window.addEventListener('pagehide', recordSessionEnd)

// Track visibility changes
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    analytics.track('tab_hidden')
  } else {
    analytics.track('tab_visible')
  }
})

4) Peristiwa khusus game

// Level tracking
function onLevelStart(levelId) {
  analytics.track('level_start', { levelId })
}

function onLevelComplete(levelId, score, time) {
  analytics.track('level_complete', {
    levelId,
    score,
    timeSeconds: time,
  })
}

function onLevelFail(levelId, reason) {
  analytics.track('level_fail', {
    levelId,
    reason, // 'death', 'timeout', 'quit'
  })
}

// Achievement tracking
function onAchievementUnlocked(achievementId) {
  analytics.track('achievement', { achievementId })
}

// Tutorial tracking
function onTutorialStep(step, skipped = false) {
  analytics.track('tutorial', { step, skipped })
}

5) Pemantauan performa

class PerformanceMonitor {
  constructor(analytics) {
    this.analytics = analytics
    this.frameTimes = []
    this.lastFrame = performance.now()
  }
  
  recordFrame() {
    const now = performance.now()
    this.frameTimes.push(now - this.lastFrame)
    this.lastFrame = now
    
    // Keep last 60 frames
    if (this.frameTimes.length > 60) {
      this.frameTimes.shift()
    }
  }
  
  getAverageFPS() {
    if (this.frameTimes.length === 0) return 0
    const avgFrameTime = this.frameTimes.reduce((a, b) => a + b) / this.frameTimes.length
    return 1000 / avgFrameTime
  }
  
  reportPerformance() {
    const fps = this.getAverageFPS()
    const memory = performance.memory?.usedJSHeapSize
    
    this.analytics.track('performance', {
      avgFPS: Math.round(fps),
      memoryMB: memory ? Math.round(memory / 1024 / 1024) : null,
    })
  }
}

// Report every minute
const perfMonitor = new PerformanceMonitor(analytics)
setInterval(() => perfMonitor.reportPerformance(), 60000)

Temukan penyebab patah-patah dengan Long Animation Frames

Penghitung FPS di atas memberi tahu Anda kapan laju bingkai menurun, tetapi tidak menjelaskan mengapa. Long Animation Frames API (LoAF), yang tersedia sejak Chrome dan Edge 123, mengisi kekosongan tersebut. API ini menandai setiap bingkai yang memerlukan waktu lebih dari 50 md dan menguraikan skrip mana yang menyebabkan penundaan, sehingga Anda dapat mengaitkan patah-patah dengan kode tertentu alih-alih sekadar menebak.

if (PerformanceObserver.supportedEntryTypes?.includes('long-animation-frame')) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      analytics.track('long_frame', {
        durationMs: Math.round(entry.duration),
        blockingMs: Math.round(entry.blockingDuration),
        // scripts[] names the source URLs that ate the frame
        scripts: entry.scripts?.map((s) => s.sourceURL),
      })
    }
  })
  observer.observe({ type: 'long-animation-frame', buffered: true })
}

Untuk saat ini, LoAF hanya tersedia di Chromium (belum ada di Firefox atau Safari), jadi lakukan deteksi fitur sebelum menggunakannya dan pertahankan penghitung FPS sebagai patokan lintas peramban Anda.

6) Pelacakan kesalahan

window.addEventListener('error', (event) => {
  analytics.track('error', {
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    stack: event.error?.stack,
  })
})

window.addEventListener('unhandledrejection', (event) => {
  analytics.track('error', {
    message: event.reason?.message || String(event.reason),
    type: 'unhandledrejection',
    stack: event.reason?.stack,
  })
})

// Custom error tracking
function trackGameError(context, error) {
  analytics.track('game_error', {
    context,
    message: error.message,
    stack: error.stack,
  })
}

7) Pelacakan waktu pemuatan

// Track initial load
window.addEventListener('load', () => {
  const timing = performance.timing
  const loadTime = timing.loadEventEnd - timing.navigationStart
  const domReady = timing.domContentLoadedEventEnd - timing.navigationStart
  
  analytics.track('page_load', {
    totalMs: loadTime,
    domReadyMs: domReady,
  })
})

// Track game-specific load phases
async function loadGame() {
  const start = performance.now()
  
  await loadCriticalAssets()
  const criticalTime = performance.now() - start
  
  analytics.track('load_critical', { ms: Math.round(criticalTime) })
  
  await loadGameAssets()
  const totalTime = performance.now() - start
  
  analytics.track('load_complete', { ms: Math.round(totalTime) })
}

8) Pelacakan funnel

Lacak kemajuan pemain melalui alur-alur utama:

class FunnelTracker {
  constructor(analytics, funnelName) {
    this.analytics = analytics
    this.funnelName = funnelName
    this.startTime = Date.now()
  }
  
  step(stepName) {
    this.analytics.track('funnel_step', {
      funnel: this.funnelName,
      step: stepName,
      elapsedMs: Date.now() - this.startTime,
    })
  }
  
  complete() {
    this.analytics.track('funnel_complete', {
      funnel: this.funnelName,
      totalMs: Date.now() - this.startTime,
    })
  }
  
  abandon(reason) {
    this.analytics.track('funnel_abandon', {
      funnel: this.funnelName,
      reason,
      elapsedMs: Date.now() - this.startTime,
    })
  }
}

// Usage
const onboarding = new FunnelTracker(analytics, 'onboarding')
onboarding.step('welcome_shown')
// ... player clicks continue
onboarding.step('name_entered')
// ... player completes tutorial
onboarding.complete()

9) Dukungan pengujian A/B

class ABTest {
  constructor(testName, variants) {
    this.testName = testName
    this.variants = variants
    
    // Get or assign variant
    const stored = localStorage.getItem(`ab_${testName}`)
    if (stored && variants.includes(stored)) {
      this.variant = stored
    } else {
      this.variant = variants[Math.floor(Math.random() * variants.length)]
      localStorage.setItem(`ab_${testName}`, this.variant)
    }
    
    // Track assignment
    analytics.track('ab_assignment', {
      test: testName,
      variant: this.variant,
    })
  }
  
  getVariant() {
    return this.variant
  }
  
  trackConversion(metric) {
    analytics.track('ab_conversion', {
      test: this.testName,
      variant: this.variant,
      metric,
    })
  }
}

// Usage
const difficultyTest = new ABTest('difficulty', ['easy', 'normal', 'hard'])
game.difficulty = difficultyTest.getVariant()

// When player completes level
difficultyTest.trackConversion('level_complete')

10) Pertimbangan privasi

class PrivacyAwareAnalytics extends Analytics {
  constructor(endpoint) {
    super(endpoint)
    this.enabled = this.checkConsent()
  }
  
  checkConsent() {
    return localStorage.getItem('analytics_consent') === 'true'
  }
  
  setConsent(enabled) {
    localStorage.setItem('analytics_consent', enabled ? 'true' : 'false')
    this.enabled = enabled
    
    if (enabled) {
      this.track('consent_granted')
    }
  }
  
  track(event, data = {}) {
    if (!this.enabled) return
    
    // Strip PII
    const sanitized = { ...data }
    delete sanitized.email
    delete sanitized.name
    delete sanitized.ip
    
    super.track(event, sanitized)
  }
}

// Show consent dialog
function showConsentDialog() {
  const dialog = document.createElement('div')
  dialog.innerHTML = `
    <p>Kami menggunakan analitik untuk meningkatkan kualitas game. Apakah Anda menyetujuinya?</p>
    <button id="accept">Setuju</button>
    <button id="decline">Tolak</button>
  `
  document.body.appendChild(dialog)
  
  dialog.querySelector('#accept').onclick = () => {
    analytics.setConsent(true)
    dialog.remove()
  }
  
  dialog.querySelector('#decline').onclick = () => {
    analytics.setConsent(false)
    dialog.remove()
  }
}

Alternatif pihak ketiga

Jika Anda tidak ingin membuatnya sendiri:

• Plausible — Berfokus pada privasi dan sederhana
• Amplitude — Analitik produk dan funnel
• Mixpanel — Pelacakan peristiwa dan perjalanan pengguna
• Sentry — Khusus untuk pelacakan kesalahan

// Example: Plausible
const script = document.createElement('script')
script.defer = true
script.dataset.domain = 'yourgame.com'
script.src = 'https://plausible.io/js/plausible.js'
document.head.appendChild(script)

// Track custom events
window.plausible('level_complete', { props: { level: '1' } })

Terkait

• Merilis game web yang dimuat dengan cepat
• Penyimpanan game dengan IndexedDB
• Untuk kreator
• Cara Meluncurkan Game Anda di itch.io — analitik itch.io dan pelacakan unduhan
• Strategi Steam Next Fest — mengukur daftar keinginan dan tingkat konversi demo

Sumber Daya Eksternal

• Plausible Analytics — analitik ringan dan ramah privasi
• PostHog — analitik produk sumber terbuka dengan pelacakan peristiwa
• Sentry — pemantauan kesalahan dan pelaporan crash untuk aplikasi web

Game loop adalah detak jantung game Anda. Loop ini berjalan terus-menerus, memperbarui status game dan menggambar frame secepat yang diizinkan browser. Jika Anda menerapkannya dengan benar, semua hal lainnya menjadi lebih mudah. Jika salah, Anda akan mengejar bug yang hanya muncul di perangkat tertentu.

Cobalah (gunakan tombol panah atau WASD):

const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

function gameLoop() {
  update()
  render()
  requestAnimationFrame(gameLoop)
}

function update() {
  // Logika game di sini
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // Menggambar di sini
}

gameLoop()

let lastTime = 0

function gameLoop(currentTime) {
  const dt = (currentTime - lastTime) / 1000 // konversi ke detik
  lastTime = currentTime
  
  update(dt)
  render()
  
  requestAnimationFrame(gameLoop)
}

function update(dt) {
  player.x += player.speed * dt // kini berfungsi pada frame rate apa pun
}

requestAnimationFrame(gameLoop)

const FIXED_DT = 1 / 60 // 60 pembaruan fisika per detik
let accumulator = 0
let lastTime = 0

function gameLoop(currentTime) {
  const frameTime = Math.min((currentTime - lastTime) / 1000, 0.25)
  lastTime = currentTime
  
  accumulator += frameTime
  
  while (accumulator >= FIXED_DT) {
    update(FIXED_DT)
    accumulator -= FIXED_DT
  }
  
  render()
  requestAnimationFrame(gameLoop)
}

const game = {
  state: 'playing', // 'menu', 'playing', 'paused', 'gameover'
  score: 0,
  player: {
    x: 100,
    y: 100,
    vx: 0,
    vy: 0,
    speed: 200,
    width: 32,
    height: 32,
  },
  entities: [],
}

const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

const FIXED_DT = 1 / 60
let accumulator = 0
let lastTime = 0

const input = { left: false, right: false, up: false, down: false }

const game = {
  player: { x: 100, y: 100, speed: 200 },
}

function update(dt) {
  const p = game.player
  
  if (input.left) p.x -= p.speed * dt
  if (input.right) p.x += p.speed * dt
  if (input.up) p.y -= p.speed * dt
  if (input.down) p.y += p.speed * dt
  
  // Pertahankan agar tetap di dalam batas
  p.x = Math.max(0, Math.min(canvas.width - 32, p.x))
  p.y = Math.max(0, Math.min(canvas.height - 32, p.y))
}

function render() {
  ctx.fillStyle = '#1a1a2e'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  
  ctx.fillStyle = '#4ade80'
  ctx.fillRect(game.player.x, game.player.y, 32, 32)
}

function gameLoop(currentTime) {
  const frameTime = Math.min((currentTime - lastTime) / 1000, 0.25)
  lastTime = currentTime
  
  accumulator += frameTime
  
  while (accumulator >= FIXED_DT) {
    update(FIXED_DT)
    accumulator -= FIXED_DT
  }
  
  render()
  requestAnimationFrame(gameLoop)
}

// Penanganan input
window.addEventListener('keydown', (e) => {
  if (e.code === 'ArrowLeft' || e.code === 'KeyA') input.left = true
  if (e.code === 'ArrowRight' || e.code === 'KeyD') input.right = true
  if (e.code === 'ArrowUp' || e.code === 'KeyW') input.up = true
  if (e.code === 'ArrowDown' || e.code === 'KeyS') input.down = true
})

window.addEventListener('keyup', (e) => {
  if (e.code === 'ArrowLeft' || e.code === 'KeyA') input.left = false
  if (e.code === 'ArrowRight' || e.code === 'KeyD') input.right = false
  if (e.code === 'ArrowUp' || e.code === 'KeyW') input.up = false
  if (e.code === 'ArrowDown' || e.code === 'KeyS') input.down = false
})

requestAnimationFrame(gameLoop)

const sprites = {}

async function loadSprite(name, url) {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => {
      sprites[name] = img
      resolve(img)
    }
    img.src = url
  })
}

function drawSprite(name, x, y, width, height) {
  const sprite = sprites[name]
  if (sprite) {
    ctx.drawImage(sprite, x, y, width || sprite.width, height || sprite.height)
  }
}

class AnimatedSprite {
  constructor(image, frameWidth, frameHeight, frameCount, fps = 10) {
    this.image = image
    this.frameWidth = frameWidth
    this.frameHeight = frameHeight
    this.frameCount = frameCount
    this.frameDuration = 1 / fps
    this.currentFrame = 0
    this.elapsed = 0
  }
  
  update(dt) {
    this.elapsed += dt
    if (this.elapsed >= this.frameDuration) {
      this.currentFrame = (this.currentFrame + 1) % this.frameCount
      this.elapsed = 0
    }
  }
  
  draw(ctx, x, y) {
    ctx.drawImage(
      this.image,
      this.currentFrame * this.frameWidth, 0,
      this.frameWidth, this.frameHeight,
      x, y,
      this.frameWidth, this.frameHeight
    )
  }
}

const playerWalk = new AnimatedSprite(walkImage, 32, 32, 4, 12)

// Di dalam update:
playerWalk.update(dt)

// Di dalam render:
playerWalk.draw(ctx, player.x, player.y)

function rectCollision(a, b) {
  return (
    a.x < b.x + b.width &&
    a.x + a.width > b.x &&
    a.y < b.y + b.height &&
    a.y + a.height > b.y
  )
}

function circleCollision(a, b) {
  const dx = a.x - b.x
  const dy = a.y - b.y
  const distance = Math.sqrt(dx * dx + dy * dy)
  return distance < a.radius + b.radius
}

// Di dalam update:
for (const enemy of game.enemies) {
  if (rectCollision(game.player, enemy)) {
    handleCollision(game.player, enemy)
  }
}

const camera = {
  x: 0,
  y: 0,
  
  follow(target) {
    this.x = target.x - canvas.width / 2
    this.y = target.y - canvas.height / 2
  }
}

function render() {
  ctx.save()
  ctx.translate(-camera.x, -camera.y)
  
  // Gambar dunia
  drawWorld()
  drawEntities()
  
  ctx.restore()
  
  // Gambar UI (tidak terpengaruh kamera)
  drawUI()
}

let paused = false

window.addEventListener('keydown', (e) => {
  if (e.code === 'Escape') {
    paused = !paused
  }
})

function gameLoop(currentTime) {
  const frameTime = Math.min((currentTime - lastTime) / 1000, 0.25)
  lastTime = currentTime
  
  if (!paused) {
    accumulator += frameTime
    while (accumulator >= FIXED_DT) {
      update(FIXED_DT)
      accumulator -= FIXED_DT
    }
  }
  
  render()
  
  if (paused) {
    renderPauseOverlay()
  }
  
  requestAnimationFrame(gameLoop)
}

function renderPauseOverlay() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  
  ctx.fillStyle = '#fff'
  ctx.font = '32px sans-serif'
  ctx.textAlign = 'center'
  ctx.fillText('DIJEDA', canvas.width / 2, canvas.height / 2)
}

Jika game web Anda (atau hasil ekspor engine) menggunakan thread WebAssembly, biasanya game tersebut bergantung pada SharedArrayBuffer. Browser modern memerlukan isolasi lintas asal untuk itu.

1) Pemeriksaan cepat: apakah halaman Anda sudah terisolasi?

Buka DevTools dan jalankan:

self.crossOriginIsolated

Jika nilainya true, Anda berada dalam status keamanan yang tepat untuk SharedArrayBuffer.

Referensi resmi:

• https://developer.mozilla.org/docs/Web/API/Window/crossOriginIsolated

2) Dua header yang Anda perlukan

Sajikan header respons berikut pada HTML Anda (dan biasanya di seluruh aplikasi Anda):

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Referensi resmi:

• https://web.dev/articles/why-coop-coep
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
• https://developer.chrome.com/blog/enabling-shared-array-buffer/

3) Alasan utama mengapa ini “masih tidak berfungsi”: sub-sumber daya

Dengan COEP: require-corp, halaman Anda tidak lagi dapat menyematkan sumber daya lintas asal secara bebas.

Jika Anda memuat skrip/gambar/worker/video/dll. dari lintas asal, sumber daya tersebut harus memberikan izin melalui:

• CORS (Access-Control-Allow-Origin) atau
• CORP (Cross-Origin-Resource-Policy)

Referensi resmi:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cross-Origin_Resource_Policy

4) Konfigurasi siap salin-tempel

Nginx

add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;

Node / Express

app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
  next()
})

Cloudflare Pages (_headers)

/*
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

5) Daftar periksa debugging

• Pastikan header tersedia pada respons dokumen di panel Network.
• Periksa self.crossOriginIsolated.
• Cari permintaan yang diblokir (pesan DevTools yang umum mencantumkan “blocked … by COEP”).
• Hapus atau hosting sendiri skrip pihak ketiga yang tidak mendukung CORS/CORP.

Terkait

• Rilis game web yang dimuat dengan cepat
• Stack teknologi game web pada 2026
• Web Worker untuk logika game — menggunakan Worker yang mendapatkan manfaat dari SharedArrayBuffer
• Dasar-dasar multipemain WebSocket — game multipemain yang memerlukan isolasi lintas asal
• Menyematkan game dengan iframe — pengaruh header COOP/COEP terhadap penyematan iframe

Sumber Daya Eksternal

• MDN: Cross-Origin-Opener-Policy — referensi header COOP
• MDN: Cross-Origin-Embedder-Policy — referensi header COEP
• web.dev: Membuat situs web Anda terisolasi lintas asal — panduan penerapan praktis

Penanganan input yang baik dapat menentukan keberhasilan sebuah game. Kontrol yang lambat, input yang tidak terdeteksi, atau pemetaan tombol yang membingungkan akan membuat pemain frustrasi bahkan sebelum mereka melihat konten game Anda. Tutorial ini menunjukkan cara menangani keyboard, mouse, sentuhan, dan gamepad secara terpadu.

Coba terlebih dahulu:

const input = {
  left: false,
  right: false,
  up: false,
  down: false,
  action: false,
  pointer: { x: 0, y: 0, down: false },
}

const keyMap = {
  ArrowLeft: 'left',
  ArrowRight: 'right',
  ArrowUp: 'up',
  ArrowDown: 'down',
  KeyA: 'left',
  KeyD: 'right',
  KeyW: 'up',
  KeyS: 'down',
  Space: 'action',
}

window.addEventListener('keydown', (e) => {
  const action = keyMap[e.code]
  if (action) {
    input[action] = true
    e.preventDefault()
  }
})

window.addEventListener('keyup', (e) => {
  const action = keyMap[e.code]
  if (action) input[action] = false
})

const canvas = document.getElementById('game')

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect()
  input.pointer.x = e.clientX - rect.left
  input.pointer.y = e.clientY - rect.top
})

canvas.addEventListener('mousedown', () => {
  input.pointer.down = true
  input.action = true
})

canvas.addEventListener('mouseup', () => {
  input.pointer.down = false
  input.action = false
})

canvas.addEventListener('touchstart', (e) => {
  e.preventDefault()
  const touch = e.touches[0]
  const rect = canvas.getBoundingClientRect()
  input.pointer.x = touch.clientX - rect.left
  input.pointer.y = touch.clientY - rect.top
  input.pointer.down = true
  input.action = true
}, { passive: false })

canvas.addEventListener('touchmove', (e) => {
  e.preventDefault()
  const touch = e.touches[0]
  const rect = canvas.getBoundingClientRect()
  input.pointer.x = touch.clientX - rect.left
  input.pointer.y = touch.clientY - rect.top
}, { passive: false })

canvas.addEventListener('touchend', () => {
  input.pointer.down = false
  input.action = false
})

function createVirtualDpad(container) {
  const dpad = document.createElement('div')
  dpad.className = 'virtual-dpad'
  dpad.innerHTML = `
    <button data-dir="up">↑</button>
    <button data-dir="left">←</button>
    <button data-dir="right">→</button>
    <button data-dir="down">↓</button>
  `
  
  dpad.querySelectorAll('button').forEach(btn => {
    const dir = btn.dataset.dir
    btn.addEventListener('touchstart', (e) => {
      e.preventDefault()
      input[dir] = true
    })
    btn.addEventListener('touchend', () => input[dir] = false)
  })
  
  container.appendChild(dpad)
}

function pollGamepads() {
  const gamepads = navigator.getGamepads()
  const gp = gamepads[0]
  
  if (gp) {
    // D-pad or left stick
    input.left = gp.buttons[14]?.pressed || gp.axes[0] < -0.5
    input.right = gp.buttons[15]?.pressed || gp.axes[0] > 0.5
    input.up = gp.buttons[12]?.pressed || gp.axes[1] < -0.5
    input.down = gp.buttons[13]?.pressed || gp.axes[1] > 0.5
    
    // A button (standard mapping)
    input.action = gp.buttons[0]?.pressed
  }
}

window.addEventListener('gamepadconnected', (e) => {
  console.log('Gamepad connected:', e.gamepad.id)
})

window.addEventListener('gamepaddisconnected', (e) => {
  console.log('Gamepad disconnected:', e.gamepad.id)
})

function update(dt) {
  pollGamepads()
  
  if (input.left) player.x -= player.speed * dt
  if (input.right) player.x += player.speed * dt
  if (input.up) player.y -= player.speed * dt
  if (input.down) player.y += player.speed * dt
  
  if (input.action && player.canShoot) {
    player.shoot()
  }
}

const inputPrev = { ...input }

function wasJustPressed(action) {
  return input[action] && !inputPrev[action]
}

function endFrame() {
  Object.assign(inputPrev, input)
}

window.addEventListener('blur', () => {
  input.left = input.right = input.up = input.down = input.action = false
})

Simulasi fisika membuat gim terasa hidup—objek jatuh, bola memantul, ragdoll, kendaraan, dan lingkungan yang dapat dihancurkan. Panduan ini membahas pustaka fisika utama yang tersedia untuk gim web, lengkap dengan contoh kode nyata serta kelebihan dan kekurangan yang jujur.

Sekilas

Keterangan:

• CCD = Deteksi Tabrakan Berkelanjutan (mencegah objek cepat menembus dinding)
• ⚠️ Determinisme = Dapat dicapai dengan timestep tetap, tetapi tidak dijamin lintas platform

Rekomendasi singkat

Perbandingan mendetail

Mesin Fisika 3D

Mesin Fisika 2D

Mesin Fisika 3D

Rapier — Pilihan modern

Rapier adalah mesin fisika Rust dengan binding JavaScript/WASM. Ini merupakan opsi dengan performa terbaik untuk gim web pada 2025-2026, dengan peningkatan kecepatan 2-5 kali lipat dibandingkan versi 2024.

Instalasi:

npm install @dimforge/rapier3d
# Or with SIMD (faster, requires modern browsers):
npm install @dimforge/rapier3d-simd

Penyiapan dasar:

import RAPIER from '@dimforge/rapier3d'

// Initialize (async required for WASM)
await RAPIER.init()

// Create world with gravity
const gravity = { x: 0, y: -9.81, z: 0 }
const world = new RAPIER.World(gravity)

// Create ground (static body)
const groundDesc = RAPIER.RigidBodyDesc.fixed()
const groundBody = world.createRigidBody(groundDesc)
const groundCollider = RAPIER.ColliderDesc.cuboid(50, 0.1, 50)
world.createCollider(groundCollider, groundBody)

// Create falling box (dynamic body)
const boxDesc = RAPIER.RigidBodyDesc.dynamic()
  .setTranslation(0, 10, 0)
const boxBody = world.createRigidBody(boxDesc)
const boxCollider = RAPIER.ColliderDesc.cuboid(0.5, 0.5, 0.5)
  .setDensity(1.0)
  .setRestitution(0.5)
world.createCollider(boxCollider, boxBody)

Integrasi game loop:

const FIXED_TIMESTEP = 1 / 60

function physicsStep() {
  world.step()
}

function gameLoop() {
  physicsStep()
  
  // Sync render objects with physics
  const position = boxBody.translation()
  const rotation = boxBody.rotation()
  
  // Update your Three.js/Babylon mesh
  mesh.position.set(position.x, position.y, position.z)
  mesh.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w)
  
  requestAnimationFrame(gameLoop)
}

Deteksi tabrakan:

// Event-based collision detection
world.contactPairsWith(boxCollider, (otherCollider) => {
  console.log('Box is touching:', otherCollider)
})

// Ray casting
const ray = new RAPIER.Ray({ x: 0, y: 10, z: 0 }, { x: 0, y: -1, z: 0 })
const hit = world.castRay(ray, 100, true)
if (hit) {
  const hitPoint = ray.pointAt(hit.timeOfImpact)
  console.log('Hit at:', hitPoint)
}

Joint:

// Create a hinge joint (door)
const jointData = RAPIER.JointData.revolute(
  { x: 0, y: 0, z: 0 },  // Anchor on body1
  { x: -1, y: 0, z: 0 }, // Anchor on body2
  { x: 0, y: 1, z: 0 }   // Rotation axis
)
world.createImpulseJoint(jointData, body1, body2, true)

Pengontrol kendaraan:

// Create chassis rigid body
const chassisDesc = RAPIER.RigidBodyDesc.dynamic()
  .setTranslation(0, 2, 0)
const chassis = world.createRigidBody(chassisDesc)
const chassisCollider = RAPIER.ColliderDesc.cuboid(1, 0.5, 2)
  .setDensity(100)
world.createCollider(chassisCollider, chassis)

// Create vehicle controller
const vehicle = world.createVehicleController(chassis)

// Add wheels (front-left, front-right, rear-left, rear-right)
const suspensionRestLength = 0.3
const wheelRadius = 0.4

// Front wheels (steering)
vehicle.addWheel(
  { x: -0.8, y: 0, z: 1.2 },   // Connection point
  { x: 0, y: -1, z: 0 },       // Suspension direction
  { x: -1, y: 0, z: 0 },       // Axle direction
  suspensionRestLength,
  wheelRadius
)
vehicle.addWheel(
  { x: 0.8, y: 0, z: 1.2 },
  { x: 0, y: -1, z: 0 },
  { x: -1, y: 0, z: 0 },
  suspensionRestLength,
  wheelRadius
)

// Rear wheels (drive)
vehicle.addWheel(
  { x: -0.8, y: 0, z: -1.2 },
  { x: 0, y: -1, z: 0 },
  { x: -1, y: 0, z: 0 },
  suspensionRestLength,
  wheelRadius
)
vehicle.addWheel(
  { x: 0.8, y: 0, z: -1.2 },
  { x: 0, y: -1, z: 0 },
  { x: -1, y: 0, z: 0 },
  suspensionRestLength,
  wheelRadius
)

// Configure suspension for all wheels
for (let i = 0; i < 4; i++) {
  vehicle.setWheelSuspensionStiffness(i, 30)
  vehicle.setWheelSuspensionCompression(i, 4.4)
  vehicle.setWheelSuspensionRelaxation(i, 2.3)
  vehicle.setWheelMaxSuspensionTravel(i, 0.5)
  vehicle.setWheelFrictionSlip(i, 2)
}

// In game loop
function updateVehicle(steering, engineForce, brakeForce) {
  // Steering (front wheels only)
  vehicle.setWheelSteering(0, steering)
  vehicle.setWheelSteering(1, steering)
  
  // Engine (rear wheels)
  vehicle.setWheelEngineForce(2, engineForce)
  vehicle.setWheelEngineForce(3, engineForce)
  
  // Brakes (all wheels)
  for (let i = 0; i < 4; i++) {
    vehicle.setWheelBrake(i, brakeForce)
  }
  
  // Update vehicle physics
  vehicle.updateVehicle(world.timestep)
}

Kelebihan:

• Performa terbaik (WASM + SIMD)
• Akurasi deteksi tabrakan yang sangat baik
• Determinisme lintas platform (input sama = output sama)
• Pengembangan aktif, API modern
• Deteksi tabrakan berkelanjutan (tanpa tunneling)
• Pengontrol karakter dan kendaraan bawaan

Kekurangan:

• Ukuran bundel lebih besar (~1.4 MB)
• Memerlukan inisialisasi asinkron
• API lebih kompleks daripada alternatif JS murni
• Debugging WASM dapat terasa rumit

Cannon-es — Sederhana dan efektif

Cannon-es adalah fork Cannon.js yang masih dipelihara. Dibuat dengan JavaScript murni, mudah dipahami, dan sangat cocok untuk belajar serta membuat purwarupa.

Instalasi:

npm install cannon-es

Penyiapan dasar:

import * as CANNON from 'cannon-es'

// Create world
const world = new CANNON.World({
  gravity: new CANNON.Vec3(0, -9.81, 0)
})

// Ground
const groundBody = new CANNON.Body({
  type: CANNON.Body.STATIC,
  shape: new CANNON.Plane()
})
groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0)
world.addBody(groundBody)

// Falling sphere
const sphereBody = new CANNON.Body({
  mass: 1,
  shape: new CANNON.Sphere(0.5),
  position: new CANNON.Vec3(0, 10, 0)
})
sphereBody.linearDamping = 0.1
world.addBody(sphereBody)

Game loop:

const TIMESTEP = 1 / 60

function animate() {
  world.step(TIMESTEP)
  
  // Sync with Three.js
  mesh.position.copy(sphereBody.position)
  mesh.quaternion.copy(sphereBody.quaternion)
  
  requestAnimationFrame(animate)
}

Event tabrakan:

sphereBody.addEventListener('collide', (event) => {
  const contact = event.contact
  const impactVelocity = contact.getImpactVelocityAlongNormal()
  
  if (Math.abs(impactVelocity) > 5) {
    console.log('Hard impact!')
  }
})

Constraint:

// Distance constraint (rope-like)
const constraint = new CANNON.DistanceConstraint(
  bodyA, bodyB, 
  2 // distance
)
world.addConstraint(constraint)

// Hinge constraint
const hinge = new CANNON.HingeConstraint(bodyA, bodyB, {
  pivotA: new CANNON.Vec3(1, 0, 0),
  axisA: new CANNON.Vec3(0, 1, 0),
  pivotB: new CANNON.Vec3(-1, 0, 0),
  axisB: new CANNON.Vec3(0, 1, 0)
})
world.addConstraint(hinge)

Kelebihan:

• JavaScript murni, tanpa kompleksitas WASM
• Ukuran bundel kecil (~150 KB)
• Mudah dipelajari dan di-debug
• Berfungsi di mana saja
• Integrasi Three.js yang sangat baik
• Dokumentasi yang baik

Kekurangan:

• Lebih lambat daripada alternatif WASM
• Kesulitan menangani banyak benda (>100)
• Dukungan trimesh terbatas
• Tidak ada CCD bawaan (tunneling dapat terjadi)
• Pengembangan kurang aktif

Ammo.js — Kekuatan penuh Bullet Physics

Ammo.js adalah mesin Bullet Physics yang dikompilasi ke WebAssembly. Menawarkan fitur paling lengkap, termasuk benda lunak, kendaraan, dan constraint tingkat lanjut.

Instalasi:

npm install ammo.js
# Or use from CDN

Penyiapan dasar:

import Ammo from 'ammo.js'

let physicsWorld

async function initPhysics() {
  await Ammo()
  
  const collisionConfig = new Ammo.btDefaultCollisionConfiguration()
  const dispatcher = new Ammo.btCollisionDispatcher(collisionConfig)
  const broadphase = new Ammo.btDbvtBroadphase()
  const solver = new Ammo.btSequentialImpulseConstraintSolver()
  
  physicsWorld = new Ammo.btDiscreteDynamicsWorld(
    dispatcher, broadphase, solver, collisionConfig
  )
  physicsWorld.setGravity(new Ammo.btVector3(0, -9.81, 0))
}

function createBox(mass, width, height, depth, x, y, z) {
  const transform = new Ammo.btTransform()
  transform.setIdentity()
  transform.setOrigin(new Ammo.btVector3(x, y, z))
  
  const motionState = new Ammo.btDefaultMotionState(transform)
  const shape = new Ammo.btBoxShape(
    new Ammo.btVector3(width / 2, height / 2, depth / 2)
  )
  
  const localInertia = new Ammo.btVector3(0, 0, 0)
  if (mass > 0) {
    shape.calculateLocalInertia(mass, localInertia)
  }
  
  const rbInfo = new Ammo.btRigidBodyConstructionInfo(
    mass, motionState, shape, localInertia
  )
  const body = new Ammo.btRigidBody(rbInfo)
  
  physicsWorld.addRigidBody(body)
  return body
}

Benda lunak (kain):

function createCloth(width, height, segments) {
  const softBodyHelpers = new Ammo.btSoftBodyHelpers()
  
  const corner00 = new Ammo.btVector3(-width/2, height, 0)
  const corner10 = new Ammo.btVector3(width/2, height, 0)
  const corner01 = new Ammo.btVector3(-width/2, 0, 0)
  const corner11 = new Ammo.btVector3(width/2, 0, 0)
  
  const softBody = softBodyHelpers.CreatePatch(
    physicsWorld.getWorldInfo(),
    corner00, corner10, corner01, corner11,
    segments, segments,
    0, true
  )
  
  const sbConfig = softBody.get_m_cfg()
  sbConfig.set_viterations(10)
  sbConfig.set_piterations(10)
  
  softBody.setTotalMass(0.9, false)
  Ammo.castObject(softBody, Ammo.btCollisionObject)
    .getCollisionShape().setMargin(0.05)
  
  physicsWorld.addSoftBody(softBody, 1, -1)
  return softBody
}

Fisika kendaraan:

function createVehicle(chassisBody) {
  const tuning = new Ammo.btVehicleTuning()
  const rayCaster = new Ammo.btDefaultVehicleRaycaster(physicsWorld)
  const vehicle = new Ammo.btRaycastVehicle(tuning, chassisBody, rayCaster)
  
  vehicle.setCoordinateSystem(0, 1, 2)
  physicsWorld.addAction(vehicle)
  
  // Add wheels
  const wheelRadius = 0.4
  const wheelWidth = 0.3
  const suspensionRestLength = 0.3
  
  const wheelDirectionCS = new Ammo.btVector3(0, -1, 0)
  const wheelAxleCS = new Ammo.btVector3(-1, 0, 0)
  
  function addWheel(isFront, pos) {
    const wheelInfo = vehicle.addWheel(
      pos, wheelDirectionCS, wheelAxleCS,
      suspensionRestLength, wheelRadius, tuning, isFront
    )
    wheelInfo.set_m_suspensionStiffness(20)
    wheelInfo.set_m_wheelsDampingRelaxation(2.3)
    wheelInfo.set_m_wheelsDampingCompression(4.4)
    wheelInfo.set_m_frictionSlip(1000)
    wheelInfo.set_m_rollInfluence(0.1)
  }
  
  addWheel(true, new Ammo.btVector3(1, 0, 1.5))   // Front left
  addWheel(true, new Ammo.btVector3(-1, 0, 1.5))  // Front right
  addWheel(false, new Ammo.btVector3(1, 0, -1.5)) // Rear left
  addWheel(false, new Ammo.btVector3(-1, 0, -1.5))// Rear right
  
  return vehicle
}

Kelebihan:

• Kumpulan fitur paling lengkap
• Benda lunak, kain, tali
• Fisika kendaraan tingkat lanjut
• Teruji di berbagai gim (digunakan dalam banyak gim AAA)
• Sangat dapat dikonfigurasi Kekurangan:
• API kompleks dan bertele-tele
• Ukuran bundel besar
• Memerlukan pengelolaan memori (menghancurkan objek)
• Kurva belajar terjal
• Dokumentasi tersebar
• Tidak deterministik lintas platform (hanya pada perangkat yang sama, dengan konfigurasi cermat)

Jolt — fisika 3D modern kelas AAA

Jolt Physics adalah engine di balik game seperti Horizon Forbidden West, dan JoltPhysics.js menghadirkannya ke browser sebagai port WASM. Jolt menjadi jalan tengah yang kuat antara Rapier dan Ammo.js: fiturnya lebih lengkap daripada Rapier (benda lunak, kain, pengontrol kendaraan beroda), dengan pemeliharaan aktif yang tidak dimiliki Ammo.js. Paket npm-nya adalah jolt-physics, dan tersedia integrasi siap pakai untuk React Three Fiber (@react-three/jolt) dan Babylon.js.

npm install jolt-physics

Seperti Rapier, Jolt menggunakan WASM yang diinisialisasi secara asinkron dengan API panjang tetapi lengkap yang mencerminkan antarmuka C++. Gunakan Jolt ketika Anda menginginkan fitur sekelas Bullet (benda lunak, kendaraan), tetapi lebih memilih basis kode modern yang terpelihara daripada Ammo.js.

Oimo.js — Ringan dan cepat

Oimo.js adalah engine fisika 3D yang ringan. Cocok untuk game sederhana yang tidak memerlukan fitur canggih.

Instalasi:

npm install oimo

Penyiapan dasar:

import * as OIMO from 'oimo'

const world = new OIMO.World({
  timestep: 1/60,
  iterations: 8,
  broadphase: 2, // 1: brute, 2: sweep & prune, 3: volume tree
  worldscale: 1,
  random: true,
  gravity: [0, -9.8, 0]
})

// Create ground
world.add({
  type: 'box',
  size: [100, 1, 100],
  pos: [0, -0.5, 0],
  move: false
})

// Create falling sphere
const sphere = world.add({
  type: 'sphere',
  size: [1],
  pos: [0, 10, 0],
  move: true,
  density: 1,
  friction: 0.4,
  restitution: 0.2
})

Loop game:

function animate() {
  world.step()
  
  // Get position/rotation
  const pos = sphere.getPosition()
  const rot = sphere.getQuaternion()
  
  mesh.position.set(pos.x, pos.y, pos.z)
  mesh.quaternion.set(rot.x, rot.y, rot.z, rot.w)
  
  requestAnimationFrame(animate)
}

Kelebihan:

• Sangat kecil (~100 KB)
• API sederhana
• Performa bagus untuk adegan dasar
• Dukungan bawaan untuk Babylon.js

Kekurangan:

• Bentuk terbatas (hanya bentuk primitif)
• Tidak ada benda lunak
• Dokumentasi minim
• Pengembangan kurang aktif
• Pilihan sambungan terbatas

Engine Fisika 2D

Matter.js — Indah dan intuitif

Matter.js adalah engine fisika 2D kaya fitur dengan alat rendering dan debug yang sangat baik.

Instalasi:

npm install matter-js

Penyiapan dasar:

import Matter from 'matter-js'

const { Engine, Render, World, Bodies, Runner } = Matter

// Create engine
const engine = Engine.create()

// Create renderer (optional, great for debugging)
const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    wireframes: false
  }
})

// Create bodies
const ground = Bodies.rectangle(400, 580, 810, 60, { 
  isStatic: true 
})

const box = Bodies.rectangle(400, 200, 80, 80, {
  restitution: 0.8,
  friction: 0.5
})

const circle = Bodies.circle(300, 100, 40, {
  restitution: 0.9
})

// Add to world
World.add(engine.world, [ground, box, circle])

// Run
Render.run(render)
Runner.run(Runner.create(), engine)

Peristiwa tabrakan:

Matter.Events.on(engine, 'collisionStart', (event) => {
  event.pairs.forEach(pair => {
    console.log('Collision between:', pair.bodyA.label, pair.bodyB.label)
  })
})

Constraint:

// Pin constraint
const pin = Matter.Constraint.create({
  pointA: { x: 400, y: 100 },
  bodyB: box,
  stiffness: 0.9
})

// Spring between bodies
const spring = Matter.Constraint.create({
  bodyA: box,
  bodyB: circle,
  stiffness: 0.01,
  length: 100
})

World.add(engine.world, [pin, spring])

Interaksi mouse:

const mouse = Matter.Mouse.create(render.canvas)
const mouseConstraint = Matter.MouseConstraint.create(engine, {
  mouse: mouse,
  constraint: {
    stiffness: 0.2,
    render: { visible: false }
  }
})
World.add(engine.world, mouseConstraint)

Kelebihan:

• Rendering bawaan yang indah
• Sangat cocok untuk belajar dan membuat prototipe
• API intuitif
• Dokumentasi bagus
• Komunitas aktif
• Deterministik secara bawaan — Matter.Runner kini menggunakan timestep tetap yang deterministik (timestep tidak tetap dihapus pada v0.20.0)

Kekurangan:

• Tidak ada CCD (objek cepat dapat menembus objek lain — gunakan substepping untuk menguranginya)
• Masalah performa saat terdapat banyak benda
• Tidak ada opsi WASM
• Presisi terbatas untuk simulasi kompleks

Planck.js — Box2D untuk JavaScript

Planck.js adalah penulisan ulang lengkap Box2D dalam JavaScript. Sistem fisikanya telah teruji dan deterministik saat menggunakan timestep tetap.

Instalasi:

npm install planck

Penyiapan dasar:

import { World, Vec2, Box, Circle, Edge } from 'planck'

// Create world
const world = new World({
  gravity: Vec2(0, -10)
})

// Create ground
const ground = world.createBody()
ground.createFixture({
  shape: Edge(Vec2(-40, 0), Vec2(40, 0))
})

// Create dynamic box
const box = world.createBody({
  type: 'dynamic',
  position: Vec2(0, 10)
})
box.createFixture({
  shape: Box(1, 1),
  density: 1,
  friction: 0.3,
  restitution: 0.5
})

Loop game dengan timestep tetap:

const TIMESTEP = 1 / 60
const VELOCITY_ITERATIONS = 8
const POSITION_ITERATIONS = 3

function gameLoop() {
  world.step(TIMESTEP, VELOCITY_ITERATIONS, POSITION_ITERATIONS)
  
  // Iterate all bodies
  for (let body = world.getBodyList(); body; body = body.getNext()) {
    const pos = body.getPosition()
    const angle = body.getAngle()
    // Update your sprites...
  }
  
  requestAnimationFrame(gameLoop)
}

Callback tabrakan:

world.on('begin-contact', (contact) => {
  const fixtureA = contact.getFixtureA()
  const fixtureB = contact.getFixtureB()
  console.log('Contact started')
})

world.on('end-contact', (contact) => {
  console.log('Contact ended')
})

world.on('pre-solve', (contact, oldManifold) => {
  // Can disable contact here
  // contact.setEnabled(false)
})

Sambungan:

import { RevoluteJoint, DistanceJoint, PrismaticJoint } from 'planck'

// Revolute joint (hinge)
const joint = world.createJoint(RevoluteJoint({
  bodyA: ground,
  bodyB: box,
  localAnchorA: Vec2(0, 5),
  localAnchorB: Vec2(-1, 0),
  enableMotor: true,
  maxMotorTorque: 1000,
  motorSpeed: 2
}))

// Distance joint (spring)
world.createJoint(DistanceJoint({
  bodyA: boxA,
  bodyB: boxB,
  localAnchorA: Vec2(0, 0),
  localAnchorB: Vec2(0, 0),
  length: 5,
  stiffness: 10,
  damping: 0.5
}))

Kelebihan:

• Deterministik dengan timestep tetap
• Terdokumentasi dengan baik (dokumentasi Box2D juga berlaku)
• Performa bagus
• Dukungan TypeScript
• Ukuran bundel kecil

Kekurangan:

• CCD tidak menangani sambungan, sehingga objek cepat yang terhubung dengan sambungan dapat meregang
• Kurva belajar lebih terjal daripada Matter.js
• Tidak ada renderer bawaan
• Keunikan Box2D (skala satuan sangat berpengaruh)

p2-es — Fisika 2D yang fleksibel

p2-es adalah fork p2.js yang masih dipelihara. Cocok untuk game yang memerlukan constraint dan mekanisme kompleks.

Instalasi:

npm install p2-es

Penyiapan dasar:

import * as p2 from 'p2-es'

const world = new p2.World({
  gravity: [0, -9.81]
})

// Ground
const groundBody = new p2.Body({
  mass: 0, // static
  position: [0, -1]
})
groundBody.addShape(new p2.Plane())
world.addBody(groundBody)

// Dynamic circle
const circleBody = new p2.Body({
  mass: 1,
  position: [0, 5]
})
circleBody.addShape(new p2.Circle({ radius: 0.5 }))
world.addBody(circleBody)

Constraint tingkat lanjut:

// Gear constraint
const gear = new p2.GearConstraint(bodyA, bodyB, {
  ratio: 2 // bodyB rotates twice as fast
})
world.addConstraint(gear)

// Prismatic constraint (slider)
const prismatic = new p2.PrismaticConstraint(bodyA, bodyB, {
  localAnchorA: [0, 0],
  localAnchorB: [0, 0],
  localAxisA: [1, 0],
  disableRotationalLock: false
})
world.addConstraint(prismatic)

// Lock constraint (weld)
const lock = new p2.LockConstraint(bodyA, bodyB)
world.addConstraint(lock)

Material kontak:

const ice = new p2.Material()
const rubber = new p2.Material()

const iceRubber = new p2.ContactMaterial(ice, rubber, {
  friction: 0.1,
  restitution: 0.9
})
world.addContactMaterial(iceRubber)

// Apply to shapes
iceBody.shapes[0].material = ice
rubberBody.shapes[0].material = rubber

Kelebihan:

• Sistem constraint yang kaya
• Material kontak
• Cocok untuk mekanisme dan mesin
• Benda dapat dinonaktifkan saat diam (meningkatkan performa)
• Modul ES dan mendukung tree-shaking

Kekurangan:

• Tidak ada renderer bawaan
• Beberapa pasangan bentuk tidak didukung
• Kurang aktif dibandingkan alternatifnya
• Dokumentasi belum lengkap

Kiat performa

1. Gunakan timestep tetap

const TIMESTEP = 1 / 60
let accumulator = 0

function gameLoop(deltaTime) {
  accumulator += deltaTime
  
  while (accumulator >= TIMESTEP) {
    world.step(TIMESTEP)
    accumulator -= TIMESTEP
  }
  
  // Interpolate for smooth rendering
  const alpha = accumulator / TIMESTEP
  // lerp(previousState, currentState, alpha)
}

2. Nonaktifkan benda yang tidak bergerak

Sebagian besar engine mendukung mode tidur. Aktifkan fitur ini:

// Cannon-es
world.allowSleep = true
body.allowSleep = true
body.sleepSpeedLimit = 0.1
body.sleepTimeLimit = 1

// Rapier
bodyDesc.setCanSleep(true)

3. Gunakan bentuk tabrakan sederhana

// GOOD: Simple primitives
const sphere = new CANNON.Sphere(1)
const box = new CANNON.Box(new CANNON.Vec3(1, 1, 1))

// AVOID: Complex trimesh for dynamic bodies
const trimesh = new CANNON.Trimesh(vertices, indices) // Slow!

4. Kurangi iterasi solver (dengan hati-hati)

// Cannon-es
world.solver.iterations = 5 // Default 10

// Rapier - configured at world creation

5. Jalankan fisika di Web Worker

// main.js
const worker = new Worker('physics-worker.js')

worker.postMessage({ type: 'step', deltaTime: 1/60 })
worker.onmessage = (e) => {
  const { positions, rotations } = e.data
  // Update render objects
}

// physics-worker.js
importScripts('cannon-es.js')
const world = new CANNON.World()

onmessage = (e) => {
  if (e.data.type === 'step') {
    world.step(e.data.deltaTime)
    postMessage({
      positions: bodies.map(b => b.position.toArray()),
      rotations: bodies.map(b => b.quaternion.toArray())
    })
  }
}

Kapan harus menggunakan apa

Integrasi dengan renderer

Three.js + Rapier

import * as THREE from 'three'
import RAPIER from '@dimforge/rapier3d'

await RAPIER.init()

const scene = new THREE.Scene()
const world = new RAPIER.World({ x: 0, y: -9.81, z: 0 })

const bodies = new Map() // physics body -> mesh

function createPhysicsBox(x, y, z) {
  // Physics
  const bodyDesc = RAPIER.RigidBodyDesc.dynamic().setTranslation(x, y, z)
  const body = world.createRigidBody(bodyDesc)
  const collider = RAPIER.ColliderDesc.cuboid(0.5, 0.5, 0.5)
  world.createCollider(collider, body)
  
  // Render
  const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: 0x00ff00 })
  )
  scene.add(mesh)
  
  bodies.set(body, mesh)
  return body
}

function syncPhysics() {
  bodies.forEach((mesh, body) => {
    const pos = body.translation()
    const rot = body.rotation()
    mesh.position.set(pos.x, pos.y, pos.z)
    mesh.quaternion.set(rot.x, rot.y, rot.z, rot.w)
  })
}

PixiJS + Matter.js

import * as PIXI from 'pixi.js'
import Matter from 'matter-js'

const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)

const engine = Matter.Engine.create()
const bodies = new Map()

function createPhysicsSprite(texture, x, y, width, height) {
  // Physics
  const body = Matter.Bodies.rectangle(x, y, width, height)
  Matter.World.add(engine.world, body)
  
  // Render
  const sprite = new PIXI.Sprite(texture)
  sprite.anchor.set(0.5)
  app.stage.addChild(sprite)
  
  bodies.set(body, sprite)
  return body
}

app.ticker.add(() => {
  Matter.Engine.update(engine, 1000 / 60)
  
  bodies.forEach((sprite, body) => {
    sprite.position.set(body.position.x, body.position.y)
    sprite.rotation = body.angle
  })
})

Kesalahan umum

Skala sangat berpengaruh

Engine fisika bekerja paling baik dengan skala dunia nyata (1 satuan = 1 meter). Jangan gunakan koordinat piksel secara langsung.

// BAD: Using pixel positions
const body = Bodies.circle(400, 300, 50) // 50 pixel radius?

// GOOD: Use a scale factor
const SCALE = 50 // 50 pixels per meter
const body = Bodies.circle(8, 6, 1) // 1 meter radius
// Then multiply by SCALE when rendering

Kebocoran memori pada engine WASM

Selalu bersihkan benda saat menghapusnya:

// Rapier
world.removeRigidBody(body)

// Ammo.js
physicsWorld.removeRigidBody(body)
Ammo.destroy(body)
Ammo.destroy(shape)
Ammo.destroy(motionState)

Tunneling (objek saling menembus)

Objek yang bergerak cepat dapat menembus dinding tipis. Solusinya:

// Rapier: Enable CCD
const bodyDesc = RAPIER.RigidBodyDesc.dynamic().setCcdEnabled(true)

// Cannon-es: Use smaller timesteps or thicker walls
world.step(1/120) // 120 Hz instead of 60

Terkait

• Dasar-dasar WebGL untuk pengembang game
• Web Worker untuk logika game — alihkan pemrosesan fisika ke thread Worker
• Rilis game web yang dimuat dengan cepat
• Game loop Canvas 2D — pola timestep tetap yang digunakan oleh setiap mesin fisika
• Stack Teknologi Game Web pada 2026 — bagaimana mesin fisika menjadi bagian dari stack yang lebih luas
• Perbandingan Mesin Game Web — mesin game dengan dukungan fisika bawaan

Sumber Daya Eksternal

• Dokumentasi Rapier — dokumentasi dan contoh resmi fisika Rapier
• Dokumentasi Cannon-es — referensi API dan panduan
• Dokumentasi Matter.js — referensi API lengkap
• Dokumentasi Planck.js — Box2D untuk JavaScript

Gamepad API menghadirkan dukungan kontroler berkualitas konsol untuk game web. Dukung kontroler Xbox, PlayStation, Switch Pro, dan kontroler generik.

1) Mendeteksi gamepad

window.addEventListener('gamepadconnected', (e) => {
  console.log('Gamepad connected:', e.gamepad.id)
  console.log('Index:', e.gamepad.index)
  console.log('Buttons:', e.gamepad.buttons.length)
  console.log('Axes:', e.gamepad.axes.length)
})

window.addEventListener('gamepaddisconnected', (e) => {
  console.log('Gamepad disconnected:', e.gamepad.id)
})

2) Melakukan polling status gamepad

Status gamepad harus diperiksa melalui polling (bukan berbasis event):

function pollGamepads() {
  const gamepads = navigator.getGamepads()
  
  for (const gamepad of gamepads) {
    if (gamepad) {
      processGamepad(gamepad)
    }
  }
}

// Call in your game loop
function gameLoop() {
  pollGamepads()
  update()
  render()
  requestAnimationFrame(gameLoop)
}

3) Pemetaan tombol standar

Pemetaan "standard" (sebagian besar kontroler Xbox/PlayStation):

const BUTTONS = {
  A: 0,           // Cross (PS) / A (Xbox)
  B: 1,           // Circle (PS) / B (Xbox)
  X: 2,           // Square (PS) / X (Xbox)
  Y: 3,           // Triangle (PS) / Y (Xbox)
  LB: 4,          // L1 (PS) / LB (Xbox)
  RB: 5,          // R1 (PS) / RB (Xbox)
  LT: 6,          // L2 (PS) / LT (Xbox)
  RT: 7,          // R2 (PS) / RT (Xbox)
  SELECT: 8,      // Share (PS) / Back (Xbox)
  START: 9,       // Options (PS) / Start (Xbox)
  L3: 10,         // Left stick press
  R3: 11,         // Right stick press
  DPAD_UP: 12,
  DPAD_DOWN: 13,
  DPAD_LEFT: 14,
  DPAD_RIGHT: 15,
  HOME: 16,       // PS button / Xbox button
}

const AXES = {
  LEFT_X: 0,
  LEFT_Y: 1,
  RIGHT_X: 2,
  RIGHT_Y: 3,
}

4) Membaca tombol dan stik

function processGamepad(gamepad) {
  // Buttons (digital or analog)
  const jump = gamepad.buttons[BUTTONS.A].pressed
  const shoot = gamepad.buttons[BUTTONS.X].pressed
  
  // Triggers (analog 0-1)
  const leftTrigger = gamepad.buttons[BUTTONS.LT].value
  const rightTrigger = gamepad.buttons[BUTTONS.RT].value
  
  // Sticks (analog -1 to 1)
  const leftX = gamepad.axes[AXES.LEFT_X]
  const leftY = gamepad.axes[AXES.LEFT_Y]
  const rightX = gamepad.axes[AXES.RIGHT_X]
  const rightY = gamepad.axes[AXES.RIGHT_Y]
  
  return { jump, shoot, leftTrigger, rightTrigger, leftX, leftY, rightX, rightY }
}

5) Menangani deadzone

Stik jarang berada tepat di posisi 0 saat dilepas:

function applyDeadzone(value, deadzone = 0.15) {
  if (Math.abs(value) < deadzone) return 0
  
  // Rescale remaining range to 0-1
  const sign = Math.sign(value)
  const adjusted = (Math.abs(value) - deadzone) / (1 - deadzone)
  return sign * adjusted
}

function getStickInput(gamepad) {
  return {
    leftX: applyDeadzone(gamepad.axes[AXES.LEFT_X]),
    leftY: applyDeadzone(gamepad.axes[AXES.LEFT_Y]),
    rightX: applyDeadzone(gamepad.axes[AXES.RIGHT_X]),
    rightY: applyDeadzone(gamepad.axes[AXES.RIGHT_Y]),
  }
}

6) Deadzone radial (lebih baik untuk pergerakan 2D)

function applyRadialDeadzone(x, y, deadzone = 0.15) {
  const magnitude = Math.sqrt(x * x + y * y)
  
  if (magnitude < deadzone) {
    return { x: 0, y: 0 }
  }
  
  const normalized = {
    x: x / magnitude,
    y: y / magnitude,
  }
  
  const adjusted = (magnitude - deadzone) / (1 - deadzone)
  
  return {
    x: normalized.x * adjusted,
    y: normalized.y * adjusted,
  }
}

// Usage
const stick = applyRadialDeadzone(
  gamepad.axes[AXES.LEFT_X],
  gamepad.axes[AXES.LEFT_Y]
)
player.vx = stick.x * player.speed
player.vy = stick.y * player.speed

7) Pengelola gamepad lengkap

class GamepadManager {
  constructor() {
    this.gamepads = new Map()
    this.prevState = new Map()
    
    window.addEventListener('gamepadconnected', (e) => {
      this.gamepads.set(e.gamepad.index, e.gamepad)
      console.log('Connected:', e.gamepad.id)
    })
    
    window.addEventListener('gamepaddisconnected', (e) => {
      this.gamepads.delete(e.gamepad.index)
      this.prevState.delete(e.gamepad.index)
    })
  }
  
  poll() {
    const gamepads = navigator.getGamepads()
    for (const gp of gamepads) {
      if (gp) this.gamepads.set(gp.index, gp)
    }
  }
  
  getState(index = 0) {
    const gp = this.gamepads.get(index)
    if (!gp) return null
    
    const stick = applyRadialDeadzone(gp.axes[0], gp.axes[1])
    const rightStick = applyRadialDeadzone(gp.axes[2], gp.axes[3])
    
    return {
      connected: true,
      leftStick: stick,
      rightStick: rightStick,
      
      // Face buttons
      a: gp.buttons[0].pressed,
      b: gp.buttons[1].pressed,
      x: gp.buttons[2].pressed,
      y: gp.buttons[3].pressed,
      
      // Bumpers
      lb: gp.buttons[4].pressed,
      rb: gp.buttons[5].pressed,
      
      // Triggers (analog)
      lt: gp.buttons[6].value,
      rt: gp.buttons[7].value,
      
      // D-pad
      dpadUp: gp.buttons[12].pressed,
      dpadDown: gp.buttons[13].pressed,
      dpadLeft: gp.buttons[14].pressed,
      dpadRight: gp.buttons[15].pressed,
      
      // Meta
      select: gp.buttons[8].pressed,
      start: gp.buttons[9].pressed,
    }
  }
  
  isPressed(index, button) {
    const gp = this.gamepads.get(index)
    return gp?.buttons[button]?.pressed || false
  }
  
  wasJustPressed(index, button) {
    const current = this.isPressed(index, button)
    const prev = this.prevState.get(index)?.[button] || false
    return current && !prev
  }
  
  endFrame() {
    for (const [index, gp] of this.gamepads) {
      const state = {}
      for (let i = 0; i < gp.buttons.length; i++) {
        state[i] = gp.buttons[i].pressed
      }
      this.prevState.set(index, state)
    }
  }
}

// Usage
const gamepadManager = new GamepadManager()

function update() {
  gamepadManager.poll()
  
  const state = gamepadManager.getState(0)
  if (state) {
    player.vx = state.leftStick.x * player.speed
    player.vy = state.leftStick.y * player.speed
    
    if (gamepadManager.wasJustPressed(0, BUTTONS.A)) {
      player.jump()
    }
  }
  
  gamepadManager.endFrame()
}

8) Getaran / umpan balik haptik

function vibrate(gamepad, duration = 200, weakMagnitude = 0.5, strongMagnitude = 0.5) {
  if (gamepad.vibrationActuator) {
    gamepad.vibrationActuator.playEffect('dual-rumble', {
      startDelay: 0,
      duration,
      weakMagnitude,   // High frequency motor
      strongMagnitude, // Low frequency motor
    })
  }
}

// Usage
function onPlayerHit() {
  const gp = navigator.getGamepads()[0]
  if (gp) vibrate(gp, 150, 0.3, 0.6)
}

function onExplosion() {
  const gp = navigator.getGamepads()[0]
  if (gp) vibrate(gp, 300, 0.8, 1.0)
}

9) Beberapa pemain

class LocalMultiplayer {
  constructor(maxPlayers = 4) {
    this.maxPlayers = maxPlayers
    this.players = []
  }
  
  getActivePlayers() {
    const gamepads = navigator.getGamepads()
    const active = []
    
    for (let i = 0; i < this.maxPlayers; i++) {
      if (gamepads[i]) {
        active.push({
          index: i,
          gamepad: gamepads[i],
          state: this.getState(gamepads[i])
        })
      }
    }
    
    return active
  }
  
  getState(gp) {
    // ... same as before
  }
}

// In game loop
const multiplayer = new LocalMultiplayer(4)

function update() {
  const players = multiplayer.getActivePlayers()
  
  for (const { index, state } of players) {
    updatePlayer(index, state)
  }
}

10) Input cadangan dan gabungan

Dukung keyboard dan gamepad sekaligus:

class InputManager {
  constructor() {
    this.keyboard = new KeyboardInput()
    this.gamepad = new GamepadManager()
  }
  
  poll() {
    this.gamepad.poll()
  }
  
  getInput(playerIndex = 0) {
    const gpState = this.gamepad.getState(playerIndex)
    const kbState = this.keyboard.getState()
    
    // Combine inputs (gamepad takes priority for analog)
    return {
      moveX: gpState?.leftStick.x || (kbState.left ? -1 : kbState.right ? 1 : 0),
      moveY: gpState?.leftStick.y || (kbState.up ? -1 : kbState.down ? 1 : 0),
      jump: gpState?.a || kbState.space,
      shoot: gpState?.x || kbState.z,
      pause: gpState?.start || kbState.escape,
    }
  }
  
  endFrame() {
    this.gamepad.endFrame()
    this.keyboard.endFrame()
  }
}

Terkait

• Penanganan input game
• Game web ramah perangkat seluler
• Game loop Canvas 2D
• Pointer Lock untuk game FPS — menggabungkan gamepad dengan kontrol pandangan menggunakan mouse
• Desain Game Co-op — merancang input dari beberapa kontroler untuk co-op lokal

Sumber Eksternal

• MDN: Gamepad API — referensi API lengkap
• MDN: Menggunakan Gamepad API — panduan langkah demi langkah
• Penguji Gamepad — uji pemetaan kontroler Anda di browser

Banyak platform (Itch.io, Newgrounds, Cinevva, situs Anda sendiri) menyematkan game dalam iframe. Tutorial ini membahas cara membuat game Anda berfungsi dengan baik saat disematkan.

1) Penyiapan dasar agar dapat disematkan

Game Anda harus dapat berfungsi tanpa memerlukan kendali penuh atas halaman:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; overflow: hidden; }
    canvas { display: block; width: 100%; height: 100%; }
  </style>
</head>
<body>
  <canvas id="game"></canvas>
  <script src="game.js"></script>
</body>
</html>

2) Mendeteksi konteks iframe

const isEmbedded = window.self !== window.top

if (isEmbedded) {
  // Sesuaikan perilaku untuk konteks penyematan
  hideExternalLinks()
  adjustUIForSmallSize()
}

function hideExternalLinks() {
  document.querySelectorAll('a[target="_blank"]').forEach(link => {
    link.style.display = 'none'
  })
}

3) Mengizinkan izin iframe yang diperlukan

Halaman induk mengendalikan apa yang dapat dilakukan iframe Anda. Izin yang umum digunakan:

<iframe 
  src="https://game.example.com"
  allow="fullscreen; autoplay; gamepad; pointer-lock"
  sandbox="allow-scripts allow-same-origin allow-pointer-lock allow-popups"
></iframe>

Game Anda harus menangani izin yang tidak tersedia dengan baik:

// Periksa apakah mode layar penuh tersedia
const canFullscreen = document.fullscreenEnabled || document.webkitFullscreenEnabled

if (!canFullscreen) {
  document.getElementById('fullscreen-btn').style.display = 'none'
}

4) Mode layar penuh dari iframe

Mode layar penuh memerlukan atribut allow="fullscreen":

async function requestFullscreen() {
  const elem = document.documentElement
  
  try {
    if (elem.requestFullscreen) {
      await elem.requestFullscreen()
    } else if (elem.webkitRequestFullscreen) {
      await elem.webkitRequestFullscreen()
    }
  } catch (err) {
    // Mode layar penuh tidak diizinkan—tampilkan pesan
    showMessage('Mode layar penuh tidak tersedia saat disematkan')
  }
}

5) Berkomunikasi dengan halaman induk

Gunakan postMessage untuk komunikasi lintas origin yang aman:

Dalam game Anda:

// Kirim pesan ke induk
function notifyParent(type, data) {
  if (window.parent !== window) {
    window.parent.postMessage({ type, data, source: 'game' }, '*')
  }
}

// Terima pesan dari induk
window.addEventListener('message', (event) => {
  // Validasi origin jika diperlukan
  // if (event.origin !== 'https://trusted-host.com') return
  
  const { type, data } = event.data
  
  switch (type) {
    case 'pause':
      pauseGame()
      break
    case 'resume':
      resumeGame()
      break
    case 'setVolume':
      setVolume(data.volume)
      break
  }
})

// Beri tahu saat game siap
window.addEventListener('load', () => {
  notifyParent('ready', { width: 800, height: 600 })
})

// Beri tahu saat terjadi peristiwa dalam game
function onGameOver(score) {
  notifyParent('gameover', { score })
}

Dalam halaman induk:

const iframe = document.getElementById('game-iframe')

iframe.addEventListener('load', () => {
  // Dengarkan pesan dari game
  window.addEventListener('message', (event) => {
    if (event.source !== iframe.contentWindow) return
    if (event.data.source !== 'game') return
    
    const { type, data } = event.data
    
    if (type === 'ready') {
      console.log('Game siap:', data)
    }
    if (type === 'gameover') {
      showScoreModal(data.score)
    }
  })
})

// Kirim perintah ke game
function pauseGame() {
  iframe.contentWindow.postMessage({ type: 'pause' }, '*')
}

6) Menangani fokus

Iframe dapat kehilangan fokus sehingga input keyboard tidak berfungsi:

// Fokuskan canvas secara otomatis saat diklik
canvas.addEventListener('click', () => {
  canvas.focus()
})

// Jadikan canvas dapat menerima fokus
canvas.tabIndex = 1

// Tangani hilangnya fokus
window.addEventListener('blur', () => {
  // Atur ulang tombol yang sedang ditekan
  input.left = input.right = input.up = input.down = false
  
  if (isEmbedded) {
    // Jeda jika diinginkan
    // pauseGame()
  }
})

// Minta fokus dari induk
function requestFocus() {
  notifyParent('requestFocus', {})
}

7) Ukuran penyematan yang responsif

Tangani berbagai dimensi penyematan:

function handleResize() {
  const width = window.innerWidth
  const height = window.innerHeight
  
  // Sesuaikan UI berdasarkan ukuran
  if (width < 400 || height < 300) {
    enableCompactUI()
  } else {
    enableFullUI()
  }
  
  // Skalakan game dengan tepat
  resizeCanvas(width, height)
}

window.addEventListener('resize', handleResize)
handleResize()

8) Indikator pemuatan untuk penyematan

Tampilkan sesuatu dengan segera:

// Sisipkan langsung dalam HTML agar segera ditampilkan
const loadingHTML = `
  <div id="loading" style="
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    color: #fff;
    font-family: sans-serif;
  ">
    <div>
      <div class="spinner"></div>
      <p>Memuat...</p>
    </div>
  </div>
`

// Hapus saat game siap
function hideLoading() {
  const loading = document.getElementById('loading')
  if (loading) {
    loading.style.opacity = '0'
    loading.style.transition = 'opacity 0.3s'
    setTimeout(() => loading.remove(), 300)
  }
}

9) SDK khusus platform

Beberapa platform memiliki API sendiri:

Itch.io:

// Tidak memerlukan SDK, tetapi postMessage dapat digunakan untuk pencapaian
window.parent.postMessage({ type: 'itch-achievement', data: { id: 'first-win' }}, '*')

Newgrounds:

// Sertakan SDK Newgrounds.io
const ngio = new Newgrounds.io.core('APP_ID', 'AES_KEY')
ngio.callComponent('Medal.unlock', { id: 12345 })

Cinevva:

// Beri sinyal bahwa game sudah siap
window.parent.postMessage({ type: 'cinevva:ready' }, '*')

// Beri sinyal bahwa game sudah dapat dimainkan
window.parent.postMessage({ type: 'cinevva:playable' }, '*')

10) Pertimbangan keamanan

// Validasi origin pesan untuk operasi sensitif
window.addEventListener('message', (event) => {
  const trustedOrigins = [
    'https://itch.io',
    'https://cinevva.com',
    'https://yoursite.com'
  ]
  
  if (!trustedOrigins.includes(event.origin)) {
    return // Abaikan pesan yang tidak tepercaya
  }
  
  // Proses pesan...
})

// Jangan mengekspos operasi sensitif melalui postMessage
// Hanya izinkan perintah yang masuk daftar izin
const allowedCommands = ['pause', 'resume', 'setVolume', 'mute']

window.addEventListener('message', (event) => {
  const { type } = event.data
  if (!allowedCommands.includes(type)) return
  
  // Tangani perintah...
})

Daftar periksa pengujian

• Pengujian lokal: Gunakan server HTTP sederhana, bukan file://
• Lintas origin: Uji dengan penyematan iframe yang sebenarnya
• Izin: Uji dengan sandbox yang dibatasi
• Fokus: Uji keyboard setelah mengeklik di luar iframe
• Pengubahan ukuran: Uji pada berbagai ukuran penyematan
• Perangkat seluler: Uji input sentuh dalam konteks penyematan

<!-- Halaman pengujian penyematan -->
<!DOCTYPE html>
<html>
<body style="background: #333; padding: 20px;">
  <h1 style="color: #fff;">Pengujian Penyematan</h1>
  <iframe 
    src="http://localhost:8000" 
    width="800" 
    height="600"
    allow="fullscreen; autoplay; gamepad"
  ></iframe>
</body>
</html>

Terkait

• Rilis game web yang dimuat dengan cepat
• Game web yang ramah perangkat seluler
• Untuk kreator
• COOP/COEP dan SharedArrayBuffer — header lintas origin yang memengaruhi penyematan iframe
• Cara Meluncurkan Game Anda di itch.io — itch.io menyematkan game browser secara bawaan dalam iframe

Sumber Daya Eksternal

• MDN: elemen iframe — referensi lengkap untuk atribut iframe
• MDN: Permissions Policy — mengendalikan fitur yang dapat digunakan iframe
• MDN: API postMessage — berkomunikasi antara iframe dan induk

IndexedDB adalah pilihan terbaik untuk menyimpan data game secara persisten di browser. IndexedDB dapat menangani data dalam jumlah besar, bekerja secara offline, dan tidak memblokir thread utama.

1) Mengapa memilih IndexedDB daripada localStorage?

Untuk game, IndexedDB hampir selalu menjadi pilihan yang tepat.

2) Membuka database

function openGameDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('MyGame', 1)
    
    request.onerror = () => reject(request.error)
    request.onsuccess = () => resolve(request.result)
    
    request.onupgradeneeded = (event) => {
      const db = event.target.result
      
      // Create stores
      if (!db.objectStoreNames.contains('saves')) {
        db.createObjectStore('saves', { keyPath: 'slot' })
      }
      if (!db.objectStoreNames.contains('settings')) {
        db.createObjectStore('settings', { keyPath: 'key' })
      }
    }
  })
}

3) Menyimpan status game

async function saveGame(slot, gameState) {
  const db = await openGameDB()
  
  return new Promise((resolve, reject) => {
    const tx = db.transaction('saves', 'readwrite')
    const store = tx.objectStore('saves')
    
    const saveData = {
      slot,
      state: gameState,
      timestamp: Date.now(),
    }
    
    const request = store.put(saveData)
    request.onsuccess = () => resolve()
    request.onerror = () => reject(request.error)
  })
}

4) Memuat status game

async function loadGame(slot) {
  const db = await openGameDB()
  
  return new Promise((resolve, reject) => {
    const tx = db.transaction('saves', 'readonly')
    const store = tx.objectStore('saves')
    
    const request = store.get(slot)
    request.onsuccess = () => resolve(request.result?.state || null)
    request.onerror = () => reject(request.error)
  })
}

5) Menampilkan semua penyimpanan

async function listSaves() {
  const db = await openGameDB()
  
  return new Promise((resolve, reject) => {
    const tx = db.transaction('saves', 'readonly')
    const store = tx.objectStore('saves')
    
    const request = store.getAll()
    request.onsuccess = () => resolve(request.result)
    request.onerror = () => reject(request.error)
  })
}

6) Menghapus penyimpanan

async function deleteSave(slot) {
  const db = await openGameDB()
  
  return new Promise((resolve, reject) => {
    const tx = db.transaction('saves', 'readwrite')
    const store = tx.objectStore('saves')
    
    const request = store.delete(slot)
    request.onsuccess = () => resolve()
    request.onerror = () => reject(request.error)
  })
}

7) Class GameStorage yang lengkap

class GameStorage {
  constructor(dbName = 'GameData', version = 1) {
    this.dbName = dbName
    this.version = version
    this.db = null
  }
  
  async init() {
    this.db = await this.openDB()
  }
  
  openDB() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version)
      request.onerror = () => reject(request.error)
      request.onsuccess = () => resolve(request.result)
      request.onupgradeneeded = (e) => {
        const db = e.target.result
        if (!db.objectStoreNames.contains('saves')) {
          db.createObjectStore('saves', { keyPath: 'slot' })
        }
        if (!db.objectStoreNames.contains('settings')) {
          db.createObjectStore('settings', { keyPath: 'key' })
        }
        if (!db.objectStoreNames.contains('assets')) {
          db.createObjectStore('assets', { keyPath: 'url' })
        }
      }
    })
  }
  
  async save(slot, data) {
    const tx = this.db.transaction('saves', 'readwrite')
    tx.objectStore('saves').put({ slot, data, timestamp: Date.now() })
    return tx.complete
  }
  
  async load(slot) {
    const tx = this.db.transaction('saves', 'readonly')
    const result = await this.promisify(tx.objectStore('saves').get(slot))
    return result?.data || null
  }
  
  async setSetting(key, value) {
    const tx = this.db.transaction('settings', 'readwrite')
    tx.objectStore('settings').put({ key, value })
  }
  
  async getSetting(key, defaultValue = null) {
    const tx = this.db.transaction('settings', 'readonly')
    const result = await this.promisify(tx.objectStore('settings').get(key))
    return result?.value ?? defaultValue
  }
  
  promisify(request) {
    return new Promise((resolve, reject) => {
      request.onsuccess = () => resolve(request.result)
      request.onerror = () => reject(request.error)
    })
  }
}

8) Menyimpan data biner (tekstur, audio)

IndexedDB dapat menangani Blob dan ArrayBuffer:

async function cacheAsset(url, blob) {
  const tx = db.transaction('assets', 'readwrite')
  tx.objectStore('assets').put({ url, blob, cached: Date.now() })
}

async function getCachedAsset(url) {
  const tx = db.transaction('assets', 'readonly')
  const result = await promisify(tx.objectStore('assets').get(url))
  return result?.blob || null
}

9) Pola simpan otomatis

class AutoSave {
  constructor(storage, interval = 60000) {
    this.storage = storage
    this.interval = interval
    this.timer = null
    this.dirty = false
  }
  
  markDirty() {
    this.dirty = true
  }
  
  start(getState) {
    this.timer = setInterval(async () => {
      if (this.dirty) {
        await this.storage.save('autosave', getState())
        this.dirty = false
        console.log('Autosaved')
      }
    }, this.interval)
  }
  
  stop() {
    clearInterval(this.timer)
  }
}

10) Penanganan error dan fallback

async function safeLoad(slot, defaultState) {
  try {
    const saved = await loadGame(slot)
    if (saved) {
      // Validate/migrate old saves if needed
      return migrateSave(saved)
    }
  } catch (err) {
    console.warn('Failed to load save:', err)
  }
  return defaultState
}

function migrateSave(save) {
  // Handle old save formats
  if (!save.version) {
    save.version = 1
    save.settings = save.settings || {}
  }
  return save
}

11) Mempertahankan penyimpanan agar tidak terhapus

IndexedDB tidak dijamin akan selalu tersimpan. Secara default, sebuah origin menggunakan penyimpanan "best-effort", dan browser dapat menghapusnya saat ruang disk penuh atau, pada Safari/WebKit, setelah situs Anda tidak berinteraksi dengan pengguna selama jangka waktu tertentu. Untuk penyimpanan game, data semacam inilah yang tentu tidak ingin Anda hilangkan.

Minta penyimpanan persisten agar browser tidak menghapus data Anda tanpa tindakan eksplisit dari pengguna:

async function makeStoragePersistent() {
  if (navigator.storage && navigator.storage.persist) {
    const persisted = await navigator.storage.persist()
    console.log(persisted ? 'Saves are protected from eviction' : 'Saves may be evicted under storage pressure')
    return persisted
  }
  return false
}

Browser menentukan apakah permintaan tersebut dikabulkan berdasarkan sinyal interaksi (seberapa sering pengguna berinteraksi dengan situs Anda, apakah situs dipasang sebagai PWA), jadi jangan berasumsi bahwa permintaan ini selalu berhasil. Anda juga dapat memeriksa ruang yang tersedia sebelum menulis penyimpanan berukuran besar atau aset yang di-cache:

async function checkStorage() {
  if (navigator.storage && navigator.storage.estimate) {
    const { usage, quota } = await navigator.storage.estimate()
    console.log(`Using ${usage} of ${quota} bytes`)
  }
}

Kedua API tersebut memerlukan konteks aman (HTTPS atau localhost).

Terkait

• PWA untuk game offline
• Service worker untuk caching game
• Merilis game web yang dimuat dengan cepat
• Pemuatan aset secara streaming — menggunakan IndexedDB sebagai cache aset
• Analitik untuk game web — melacak pola penyimpanan/pemuatan untuk memahami perilaku pemain

Sumber Eksternal

• MDN: API IndexedDB — referensi API lengkap
• MDN: Menggunakan IndexedDB — panduan langkah demi langkah
• Library idb — wrapper IndexedDB kecil berbasis Promise

Perangkat seluler adalah platform game terbesar. Beberapa penyesuaian dapat membuat game web Anda berfungsi dengan sangat baik di ponsel dan tablet.

1) Penyiapan viewport

Cegah zoom dan pastikan penskalaan yang tepat:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2) Canvas layar penuh

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  touch-action: none; /* Prevent browser gestures */
}

#game {
  display: block;
  width: 100%;
  height: 100%;
}

Jika Anda menentukan ukuran UI berdasarkan tinggi viewport, bukan height: 100%, gunakan unit viewport dinamis dvh, svh, dan lvh daripada vh. Unit ini memperhitungkan bilah alat browser seluler yang dapat menyusut dan mengembang, sedangkan 100vh mengabaikannya (di iOS, 100vh adalah tinggi saat bilah alat tersembunyi, sehingga bagian bawah tata letak Anda terpotong). Unit-unit ini telah mencapai status Baseline Widely Available dan didukung di Chrome/Edge 108+, Firefox 101+, serta Safari/iOS Safari 15.4+, atau sekitar 92% pengguna.

3) Penanganan peristiwa sentuh

const canvas = document.getElementById('game')

// Prevent default touch behaviors
canvas.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false })
canvas.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false })

// Track touches
const touches = new Map()

canvas.addEventListener('touchstart', (e) => {
  for (const touch of e.changedTouches) {
    touches.set(touch.identifier, {
      x: touch.clientX,
      y: touch.clientY,
      startX: touch.clientX,
      startY: touch.clientY,
    })
  }
})

canvas.addEventListener('touchmove', (e) => {
  for (const touch of e.changedTouches) {
    const t = touches.get(touch.identifier)
    if (t) {
      t.x = touch.clientX
      t.y = touch.clientY
    }
  }
})

canvas.addEventListener('touchend', (e) => {
  for (const touch of e.changedTouches) {
    touches.delete(touch.identifier)
  }
})

Jika game Anda juga perlu berfungsi dengan mouse atau stilus, pertimbangkan Pointer Events (pointerdown/pointermove/pointerup) sebagai pengganti peristiwa sentuh. MDN kini merekomendasikannya sebagai satu model input yang tidak bergantung pada perangkat: satu alur kode menangani sentuhan, mouse, dan pena, sementara multisentuh tetap berfungsi melalui pointerId (padanan touch.identifier yang digunakan di atas). Peristiwa sentuh tetap sangat cocok untuk game yang hanya menggunakan sentuhan.

4) Joystick virtual

class VirtualJoystick {
  constructor(x, y, radius) {
    this.baseX = x
    this.baseY = y
    this.radius = radius
    this.knobRadius = radius * 0.4
    this.active = false
    this.touchId = null
    this.dx = 0
    this.dy = 0
  }
  
  handleTouchStart(touch) {
    const dist = Math.hypot(touch.clientX - this.baseX, touch.clientY - this.baseY)
    if (dist < this.radius) {
      this.active = true
      this.touchId = touch.identifier
      this.updatePosition(touch.clientX, touch.clientY)
    }
  }
  
  handleTouchMove(touch) {
    if (touch.identifier === this.touchId) {
      this.updatePosition(touch.clientX, touch.clientY)
    }
  }
  
  handleTouchEnd(touch) {
    if (touch.identifier === this.touchId) {
      this.active = false
      this.touchId = null
      this.dx = 0
      this.dy = 0
    }
  }
  
  updatePosition(x, y) {
    let dx = x - this.baseX
    let dy = y - this.baseY
    const dist = Math.hypot(dx, dy)
    
    if (dist > this.radius) {
      dx = (dx / dist) * this.radius
      dy = (dy / dist) * this.radius
    }
    
    this.dx = dx / this.radius
    this.dy = dy / this.radius
  }
  
  draw(ctx) {
    // Base circle
    ctx.beginPath()
    ctx.arc(this.baseX, this.baseY, this.radius, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'
    ctx.fill()
    
    // Knob
    const knobX = this.baseX + this.dx * this.radius
    const knobY = this.baseY + this.dy * this.radius
    ctx.beginPath()
    ctx.arc(knobX, knobY, this.knobRadius, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
    ctx.fill()
  }
  
  getInput() {
    return { x: this.dx, y: this.dy }
  }
}

5) Tombol sentuh

class TouchButton {
  constructor(x, y, radius, label) {
    this.x = x
    this.y = y
    this.radius = radius
    this.label = label
    this.pressed = false
    this.touchId = null
  }
  
  contains(px, py) {
    return Math.hypot(px - this.x, py - this.y) < this.radius
  }
  
  handleTouchStart(touch) {
    if (this.contains(touch.clientX, touch.clientY)) {
      this.pressed = true
      this.touchId = touch.identifier
    }
  }
  
  handleTouchEnd(touch) {
    if (touch.identifier === this.touchId) {
      this.pressed = false
      this.touchId = null
    }
  }
  
  draw(ctx) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
    ctx.fillStyle = this.pressed ? 'rgba(255, 255, 255, 0.5)' : 'rgba(255, 255, 255, 0.2)'
    ctx.fill()
    
    ctx.font = 'bold 24px sans-serif'
    ctx.fillStyle = '#fff'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(this.label, this.x, this.y)
  }
}

6) Penanganan orientasi

function checkOrientation() {
  const isLandscape = window.innerWidth > window.innerHeight
  
  if (!isLandscape) {
    showRotatePrompt()
  } else {
    hideRotatePrompt()
    resizeCanvas()
  }
}

window.addEventListener('resize', checkOrientation)
window.addEventListener('orientationchange', checkOrientation)

function showRotatePrompt() {
  document.getElementById('rotate-prompt').style.display = 'flex'
}

function hideRotatePrompt() {
  document.getElementById('rotate-prompt').style.display = 'none'
}

7) Optimalisasi performa

// Reduce resolution on low-end devices
function getDeviceScale() {
  const dpr = window.devicePixelRatio || 1
  const isLowEnd = navigator.hardwareConcurrency <= 2
  return isLowEnd ? Math.min(dpr, 1.5) : Math.min(dpr, 2)
}

// Throttle expensive operations
let lastHeavyUpdate = 0
function maybeDoHeavyWork(timestamp) {
  if (timestamp - lastHeavyUpdate > 100) { // 10 fps for heavy stuff
    doExpensiveCalculations()
    lastHeavyUpdate = timestamp
  }
}

// Use lower quality assets
function getAssetQuality() {
  const memory = navigator.deviceMemory || 4
  if (memory <= 2) return 'low'
  if (memory <= 4) return 'medium'
  return 'high'
}

8) Pertimbangan baterai

// Check battery and reduce effects
async function checkBattery() {
  if ('getBattery' in navigator) {
    const battery = await navigator.getBattery()
    
    if (battery.level < 0.2 && !battery.charging) {
      enableBatterySaver()
    }
    
    battery.addEventListener('levelchange', () => {
      if (battery.level < 0.2 && !battery.charging) {
        enableBatterySaver()
      }
    })
  }
}

function enableBatterySaver() {
  game.particleCount = Math.floor(game.particleCount * 0.5)
  game.targetFps = 30
  console.log('Battery saver enabled')
}

9) Fullscreen API

async function requestFullscreen() {
  const elem = document.documentElement
  
  try {
    if (elem.requestFullscreen) {
      await elem.requestFullscreen()
    } else if (elem.webkitRequestFullscreen) {
      await elem.webkitRequestFullscreen()
    }
    
    // Lock orientation
    if (screen.orientation?.lock) {
      await screen.orientation.lock('landscape')
    }
  } catch (err) {
    console.warn('Fullscreen failed:', err)
  }
}

// Call on user interaction
document.getElementById('play-btn').addEventListener('click', () => {
  requestFullscreen()
  startGame()
})

Satu hal yang perlu diperhatikan: Fullscreen API tidak berfungsi untuk elemen umum di iPhone. Safari iOS hanya menyediakan mode layar penuh untuk elemen video native (melalui webkitEnterFullscreen yang nonstandar), sehingga documentElement.requestFullscreen() akan ditolak di iPhone. Blok try/catch di atas menanganinya dengan baik. Karena itu, rancang game Anda agar tetap dapat dimainkan tanpa layar penuh sebenarnya di iPhone, dan perlakukan layar penuh sebagai peningkatan di iPad, Android, serta desktop yang mendukungnya. Pemanggilan screen.orientation.lock() memiliki keterbatasan yang sama di iPhone, jadi jangan bergantung padanya.

10) Daftar periksa pengujian

Sebelum merilis:

• Respons sentuhan — Uji di perangkat nyata, bukan hanya emulator
• Berbagai ukuran layar — Ponsel, tablet, iPad Pro
• Kedua orientasi — Atau kunci ke salah satunya
• Perangkat kelas bawah — Uji di ponsel berusia 2–3 tahun
• Jaringan lambat — Uji dengan simulasi 3G
• Safari iOS — Memiliki keunikan terkait audio dan layar penuh
• Chrome Android — Browser yang paling umum
• Gangguan — Panggilan telepon, notifikasi
• Tekanan memori — Apakah game pulih setelah tab berada di latar belakang?

// Debug touch visualization
function drawTouchDebug(ctx) {
  for (const [id, touch] of touches) {
    ctx.beginPath()
    ctx.arc(touch.x, touch.y, 30, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'
    ctx.fill()
    ctx.fillStyle = '#fff'
    ctx.fillText(id.toString(), touch.x, touch.y)
  }
}

Terkait

• Penanganan input game
• Canvas game responsif
• PWA untuk game offline
• Web Audio API untuk game — menangani pembatasan audio iOS
• Rilis game web yang dimuat dengan cepat — mengoptimalkan waktu pemuatan untuk koneksi seluler
• Menyematkan game dengan iframe — pertimbangan penyematan khusus perangkat seluler

Sumber Daya Eksternal

• MDN: Peristiwa sentuh — penanganan multisentuh
• MDN: Screen Orientation API — mengunci orientasi
• MDN: Fullscreen API — memasuki mode layar penuh di perangkat seluler
• web.dev: Desain responsif — pola responsif yang berlaku untuk UI game

Pixel art terlihat menakjubkan saat dirender dengan benar—dan buruk saat buram. Tutorial ini membahas teknik untuk menghasilkan grafis piksel yang tajam dan autentik.

1) Masalah keburaman

Secara default, browser menghaluskan gambar saat melakukan penskalaan. Untuk pixel art, ini tidak tepat:

/* CSS solution */
canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Firefox fallback */
}

2) Pengaturan konteks canvas

const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

// Disable smoothing for crisp pixels
ctx.imageSmoothingEnabled = false

Pengaturan ini harus diterapkan kembali setelah setiap perubahan ukuran canvas atau perubahan konteks.

3) Penskalaan bilangan bulat

Pixel art terlihat paling baik pada skala bilangan bulat (1x, 2x, 3x, 4x):

const GAME_WIDTH = 160
const GAME_HEIGHT = 144 // Game Boy resolution

function resize() {
  const maxScale = Math.floor(Math.min(
    window.innerWidth / GAME_WIDTH,
    window.innerHeight / GAME_HEIGHT
  ))
  const scale = Math.max(1, maxScale)
  
  canvas.width = GAME_WIDTH
  canvas.height = GAME_HEIGHT
  canvas.style.width = GAME_WIDTH * scale + 'px'
  canvas.style.height = GAME_HEIGHT * scale + 'px'
  
  ctx.imageSmoothingEnabled = false
}

4) Menggambar sprite pada posisi bilangan bulat

Posisi subpiksel menyebabkan gambar buram:

// Bad: causes blur
ctx.drawImage(sprite, 10.5, 20.3)

// Good: crisp pixels
ctx.drawImage(sprite, Math.floor(10.5), Math.floor(20.3))

// Or round to nearest
ctx.drawImage(sprite, Math.round(player.x), Math.round(player.y))

5) Animasi sprite sheet

class PixelSprite {
  constructor(image, frameWidth, frameHeight) {
    this.image = image
    this.frameWidth = frameWidth
    this.frameHeight = frameHeight
    this.animations = {}
    this.currentAnim = null
    this.frame = 0
    this.timer = 0
  }
  
  addAnimation(name, frames, fps = 8) {
    this.animations[name] = { frames, duration: 1 / fps }
  }
  
  play(name) {
    if (this.currentAnim !== name) {
      this.currentAnim = name
      this.frame = 0
      this.timer = 0
    }
  }
  
  update(dt) {
    if (!this.currentAnim) return
    
    const anim = this.animations[this.currentAnim]
    this.timer += dt
    
    if (this.timer >= anim.duration) {
      this.timer = 0
      this.frame = (this.frame + 1) % anim.frames.length
    }
  }
  
  draw(ctx, x, y, flipX = false) {
    if (!this.currentAnim) return
    
    const anim = this.animations[this.currentAnim]
    const frameIndex = anim.frames[this.frame]
    const sx = (frameIndex % 16) * this.frameWidth
    const sy = Math.floor(frameIndex / 16) * this.frameHeight
    
    ctx.save()
    if (flipX) {
      ctx.scale(-1, 1)
      x = -x - this.frameWidth
    }
    
    ctx.drawImage(
      this.image,
      sx, sy, this.frameWidth, this.frameHeight,
      Math.round(x), Math.round(y), this.frameWidth, this.frameHeight
    )
    ctx.restore()
  }
}

// Usage
const player = new PixelSprite(spriteSheet, 16, 16)
player.addAnimation('idle', [0, 1], 2)
player.addAnimation('walk', [2, 3, 4, 5], 8)
player.addAnimation('jump', [6], 1)

6) Pertukaran palet

Teknik klasik untuk mewarnai ulang sprite:

function createPaletteSwap(image, oldColors, newColors) {
  const canvas = document.createElement('canvas')
  canvas.width = image.width
  canvas.height = image.height
  const ctx = canvas.getContext('2d')
  
  ctx.drawImage(image, 0, 0)
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
  const data = imageData.data
  
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i], g = data[i + 1], b = data[i + 2]
    
    for (let j = 0; j < oldColors.length; j++) {
      const old = oldColors[j]
      if (r === old.r && g === old.g && b === old.b) {
        const newC = newColors[j]
        data[i] = newC.r
        data[i + 1] = newC.g
        data[i + 2] = newC.b
        break
      }
    }
  }
  
  ctx.putImageData(imageData, 0, 0)
  return canvas
}

// Create enemy variant
const blueEnemy = createPaletteSwap(
  enemySprite,
  [{ r: 255, g: 0, b: 0 }],    // Red
  [{ r: 0, g: 100, b: 255 }]   // Blue
)

7) Rendering tilemap

class Tilemap {
  constructor(tileSize, tilesetImage) {
    this.tileSize = tileSize
    this.tileset = tilesetImage
    this.tilesPerRow = Math.floor(tilesetImage.width / tileSize)
    this.data = []
  }
  
  setData(width, height, tiles) {
    this.width = width
    this.height = height
    this.data = tiles
  }
  
  draw(ctx, cameraX = 0, cameraY = 0) {
    const startCol = Math.floor(cameraX / this.tileSize)
    const startRow = Math.floor(cameraY / this.tileSize)
    const endCol = startCol + Math.ceil(ctx.canvas.width / this.tileSize) + 1
    const endRow = startRow + Math.ceil(ctx.canvas.height / this.tileSize) + 1
    
    for (let row = startRow; row < endRow; row++) {
      for (let col = startCol; col < endCol; col++) {
        if (row < 0 || row >= this.height || col < 0 || col >= this.width) continue
        
        const tileIndex = this.data[row * this.width + col]
        if (tileIndex < 0) continue
        
        const sx = (tileIndex % this.tilesPerRow) * this.tileSize
        const sy = Math.floor(tileIndex / this.tilesPerRow) * this.tileSize
        const dx = Math.round(col * this.tileSize - cameraX)
        const dy = Math.round(row * this.tileSize - cameraY)
        
        ctx.drawImage(
          this.tileset,
          sx, sy, this.tileSize, this.tileSize,
          dx, dy, this.tileSize, this.tileSize
        )
      }
    }
  }
}

8) Efek garis tepi

Tambahkan garis tepi pada sprite agar lebih mudah terlihat:

function drawWithOutline(ctx, image, x, y, outlineColor = '#000') {
  const offsets = [[-1, 0], [1, 0], [0, -1], [0, 1]]
  
  // Draw outline
  ctx.globalCompositeOperation = 'source-over'
  for (const [ox, oy] of offsets) {
    ctx.drawImage(image, Math.round(x + ox), Math.round(y + oy))
  }
  
  // Apply color to outline
  ctx.globalCompositeOperation = 'source-in'
  ctx.fillStyle = outlineColor
  ctx.fillRect(x - 1, y - 1, image.width + 2, image.height + 2)
  
  // Draw sprite on top
  ctx.globalCompositeOperation = 'source-over'
  ctx.drawImage(image, Math.round(x), Math.round(y))
}

9) Guncangan layar

Efek klasik untuk meningkatkan sensasi permainan:

const camera = {
  x: 0,
  y: 0,
  shakeIntensity: 0,
  shakeDuration: 0,
  
  shake(intensity, duration) {
    this.shakeIntensity = intensity
    this.shakeDuration = duration
  },
  
  update(dt) {
    if (this.shakeDuration > 0) {
      this.shakeDuration -= dt
    }
  },
  
  getOffset() {
    if (this.shakeDuration <= 0) return { x: 0, y: 0 }
    
    return {
      x: Math.round((Math.random() - 0.5) * 2 * this.shakeIntensity),
      y: Math.round((Math.random() - 0.5) * 2 * this.shakeIntensity),
    }
  }
}

// In render:
function render() {
  const shake = camera.getOffset()
  ctx.save()
  ctx.translate(shake.x, shake.y)
  // Draw everything...
  ctx.restore()
}

// On hit:
camera.shake(4, 0.2) // 4 pixel intensity, 0.2 seconds

10) Batasan palet warna

Pixel art autentik menggunakan palet terbatas:

const PALETTES = {
  gameboy: ['#0f380f', '#306230', '#8bac0f', '#9bbc0f'],
  nes: ['#000000', '#fcfcfc', '#f8f8f8', '#bcbcbc', /* ... */],
  pico8: [
    '#000000', '#1d2b53', '#7e2553', '#008751',
    '#ab5236', '#5f574f', '#c2c3c7', '#fff1e8',
    '#ff004d', '#ffa300', '#ffec27', '#00e436',
    '#29adff', '#83769c', '#ff77a8', '#ffccaa'
  ],
}

function quantizeColor(r, g, b, palette) {
  let minDist = Infinity
  let closest = palette[0]
  
  for (const color of palette) {
    const pr = parseInt(color.slice(1, 3), 16)
    const pg = parseInt(color.slice(3, 5), 16)
    const pb = parseInt(color.slice(5, 7), 16)
    
    const dist = (r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2
    if (dist < minDist) {
      minDist = dist
      closest = color
    }
  }
  
  return closest
}

Terkait

• Game loop Canvas 2D
• Canvas game responsif
• Pemuatan aset secara streaming
• Tempat Menemukan Aset Game Gratis — sprite sheet, paket pixel art, dan sumber aset 2D
• Rendering teks dalam game — font bitmap yang sesuai dengan gaya pixel art Anda

Pointer Lock API menangkap kursor mouse sehingga memungkinkan kontrol kamera bergaya FPS yang mulus. Fitur ini penting untuk game tembak-menembak orang pertama dan orang ketiga.

1) Meminta pointer lock

Pointer lock memerlukan gestur pengguna:

const canvas = document.getElementById('game')

canvas.addEventListener('click', () => {
  canvas.requestPointerLock()
})

Input mouse mentah (menonaktifkan akselerasi)

Secara default, browser menerapkan akselerasi mouse dari sistem operasi pada movementX/movementY, sehingga gerakan cepat dan seretan lambat pada jarak yang sama menghasilkan rotasi kamera yang berbeda. Untuk membidik dalam FPS, biasanya Anda menginginkan kebalikannya: jarak fisik yang sama harus selalu memutar kamera dalam jumlah yang sama. Minta pergerakan mentah tanpa akselerasi dengan meneruskan unadjustedMovement: true ke requestPointerLock():

canvas.addEventListener('click', async () => {
  try {
    await canvas.requestPointerLock({ unadjustedMovement: true })
  } catch (err) {
    // unadjustedMovement tidak didukung di sini; gunakan delta yang disesuaikan OS
    await canvas.requestPointerLock()
  }
})

requestPointerLock() modern mengembalikan Promise yang terselesaikan saat berhasil dan ditolak saat gagal. Karena itu, pemanggilan di atas dibungkus dalam try/catch. Chrome dan Edge telah mendukung unadjustedMovement sejak versi 88, sedangkan Safari mendukungnya sejak versi 18.4 (Maret 2025), yang juga merupakan rilis yang memperbaiki requestPointerLock agar mengembalikan Promise. Browser lama yang tidak mengembalikan Promise tetap dapat bekerja di sini karena await menerima nilai non-Promise dan opsi yang tidak dikenal akan diabaikan begitu saja. Karena itu, selalu pertahankan requestPointerLock() biasa sebagai fallback.

2) Mendeteksi status penguncian

document.addEventListener('pointerlockchange', () => {
  if (document.pointerLockElement === canvas) {
    console.log('Pointer terkunci')
    game.mouseLocked = true
  } else {
    console.log('Pointer tidak terkunci')
    game.mouseLocked = false
  }
})

document.addEventListener('pointerlockerror', () => {
  console.error('Pointer lock gagal')
})

3) Membaca pergerakan mouse

Saat terkunci, gunakan movementX dan movementY:

document.addEventListener('mousemove', (e) => {
  if (document.pointerLockElement !== canvas) return
  
  const sensitivity = 0.002
  camera.yaw -= e.movementX * sensitivity
  camera.pitch -= e.movementY * sensitivity
  
  // Batasi pitch agar kamera tidak terbalik
  camera.pitch = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.pitch))
})

4) Class kamera FPS

class FPSCamera {
  constructor() {
    this.position = { x: 0, y: 1.7, z: 0 } // Tinggi mata
    this.yaw = 0      // Rotasi kiri/kanan
    this.pitch = 0    // Rotasi atas/bawah
    this.sensitivity = 0.002
  }
  
  handleMouseMove(e) {
    this.yaw -= e.movementX * this.sensitivity
    this.pitch -= e.movementY * this.sensitivity
    this.pitch = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, this.pitch))
  }
  
  getForward() {
    return {
      x: Math.sin(this.yaw) * Math.cos(this.pitch),
      y: Math.sin(this.pitch),
      z: Math.cos(this.yaw) * Math.cos(this.pitch),
    }
  }
  
  getRight() {
    return {
      x: Math.cos(this.yaw),
      y: 0,
      z: -Math.sin(this.yaw),
    }
  }
  
  move(forward, right, dt, speed = 5) {
    const fwd = this.getForward()
    const rgt = this.getRight()
    
    // Bergerak hanya pada bidang XZ
    this.position.x += (fwd.x * forward + rgt.x * right) * speed * dt
    this.position.z += (fwd.z * forward + rgt.z * right) * speed * dt
  }
  
  getViewMatrix() {
    const forward = this.getForward()
    const target = {
      x: this.position.x + forward.x,
      y: this.position.y + forward.y,
      z: this.position.z + forward.z,
    }
    return lookAt(this.position, target, { x: 0, y: 1, z: 0 })
  }
}

5) Pergerakan WASD

const input = {
  forward: false,
  backward: false,
  left: false,
  right: false,
  jump: false,
}

window.addEventListener('keydown', (e) => {
  switch (e.code) {
    case 'KeyW': input.forward = true; break
    case 'KeyS': input.backward = true; break
    case 'KeyA': input.left = true; break
    case 'KeyD': input.right = true; break
    case 'Space': input.jump = true; break
  }
})

window.addEventListener('keyup', (e) => {
  switch (e.code) {
    case 'KeyW': input.forward = false; break
    case 'KeyS': input.backward = false; break
    case 'KeyA': input.left = false; break
    case 'KeyD': input.right = false; break
    case 'Space': input.jump = false; break
  }
})

function update(dt) {
  const moveForward = (input.forward ? 1 : 0) - (input.backward ? 1 : 0)
  const moveRight = (input.right ? 1 : 0) - (input.left ? 1 : 0)
  
  camera.move(moveForward, moveRight, dt)
}

6) Pengontrol FPS lengkap

class FPSController {
  constructor(canvas) {
    this.canvas = canvas
    this.camera = new FPSCamera()
    this.locked = false
    this.speed = 5
    this.sprintMultiplier = 1.5
    
    this.input = {
      forward: false, backward: false,
      left: false, right: false,
      jump: false, sprint: false,
    }
    
    this.velocity = { x: 0, y: 0, z: 0 }
    this.onGround = true
    this.gravity = -20
    this.jumpSpeed = 8
    
    this.bindEvents()
  }
  
  bindEvents() {
    this.canvas.addEventListener('click', () => {
      this.canvas.requestPointerLock()
    })
    
    document.addEventListener('pointerlockchange', () => {
      this.locked = document.pointerLockElement === this.canvas
    })
    
    document.addEventListener('mousemove', (e) => {
      if (this.locked) {
        this.camera.handleMouseMove(e)
      }
    })
    
    window.addEventListener('keydown', (e) => this.handleKey(e.code, true))
    window.addEventListener('keyup', (e) => this.handleKey(e.code, false))
  }
  
  handleKey(code, pressed) {
    switch (code) {
      case 'KeyW': this.input.forward = pressed; break
      case 'KeyS': this.input.backward = pressed; break
      case 'KeyA': this.input.left = pressed; break
      case 'KeyD': this.input.right = pressed; break
      case 'Space': this.input.jump = pressed; break
      case 'ShiftLeft': this.input.sprint = pressed; break
    }
  }
  
  update(dt) {
    if (!this.locked) return
    
    const speed = this.speed * (this.input.sprint ? this.sprintMultiplier : 1)
    
    // Pergerakan horizontal
    const moveForward = (this.input.forward ? 1 : 0) - (this.input.backward ? 1 : 0)
    const moveRight = (this.input.right ? 1 : 0) - (this.input.left ? 1 : 0)
    
    const forward = this.camera.getForward()
    const right = this.camera.getRight()
    
    this.velocity.x = (forward.x * moveForward + right.x * moveRight) * speed
    this.velocity.z = (forward.z * moveForward + right.z * moveRight) * speed
    
    // Melompat
    if (this.input.jump && this.onGround) {
      this.velocity.y = this.jumpSpeed
      this.onGround = false
    }
    
    // Gravitasi
    if (!this.onGround) {
      this.velocity.y += this.gravity * dt
    }
    
    // Terapkan kecepatan
    this.camera.position.x += this.velocity.x * dt
    this.camera.position.y += this.velocity.y * dt
    this.camera.position.z += this.velocity.z * dt
    
    // Tabrakan tanah sederhana
    if (this.camera.position.y < 1.7) {
      this.camera.position.y = 1.7
      this.velocity.y = 0
      this.onGround = true
    }
  }
}

7) Crosshair

function drawCrosshair(ctx) {
  const cx = ctx.canvas.width / 2
  const cy = ctx.canvas.height / 2
  const size = 10
  const gap = 4
  
  ctx.strokeStyle = '#fff'
  ctx.lineWidth = 2
  
  // Atas
  ctx.beginPath()
  ctx.moveTo(cx, cy - gap)
  ctx.lineTo(cx, cy - gap - size)
  ctx.stroke()
  
  // Bawah
  ctx.beginPath()
  ctx.moveTo(cx, cy + gap)
  ctx.lineTo(cx, cy + gap + size)
  ctx.stroke()
  
  // Kiri
  ctx.beginPath()
  ctx.moveTo(cx - gap, cy)
  ctx.lineTo(cx - gap - size, cy)
  ctx.stroke()
  
  // Kanan
  ctx.beginPath()
  ctx.moveTo(cx + gap, cy)
  ctx.lineTo(cx + gap + size, cy)
  ctx.stroke()
}

8) Menembak dengan tombol mouse

document.addEventListener('mousedown', (e) => {
  if (!document.pointerLockElement) return
  
  if (e.button === 0) {
    // Klik kiri - tembakan utama
    weapon.fire()
  } else if (e.button === 2) {
    // Klik kanan - membidik melalui alat bidik
    weapon.aimDownSights(true)
  }
})

document.addEventListener('mouseup', (e) => {
  if (e.button === 2) {
    weapon.aimDownSights(false)
  }
})

// Cegah menu konteks
canvas.addEventListener('contextmenu', (e) => e.preventDefault())

9) Pengaturan sensitivitas

class Settings {
  constructor() {
    this.mouseSensitivity = parseFloat(localStorage.getItem('sensitivity') || '1.0')
    this.invertY = localStorage.getItem('invertY') === 'true'
  }
  
  save() {
    localStorage.setItem('sensitivity', this.mouseSensitivity.toString())
    localStorage.setItem('invertY', this.invertY.toString())
  }
}

// Terapkan di handler mouse
document.addEventListener('mousemove', (e) => {
  if (!locked) return
  
  const sens = settings.mouseSensitivity * 0.002
  camera.yaw -= e.movementX * sens
  camera.pitch -= e.movementY * sens * (settings.invertY ? -1 : 1)
})

10) Petunjuk keluar

Tampilkan petunjuk untuk keluar dari pointer lock:

function showLockUI() {
  const ui = document.getElementById('lock-ui')
  
  if (document.pointerLockElement) {
    ui.innerHTML = '<p>Tekan ESC untuk melepaskan kunci mouse</p>'
    ui.style.opacity = '0.5'
    setTimeout(() => ui.style.opacity = '0', 2000)
  } else {
    ui.innerHTML = '<p>Klik untuk bermain</p>'
    ui.style.opacity = '1'
  }
}

document.addEventListener('pointerlockchange', showLockUI)

Satu hal yang perlu diketahui tentang petunjuk keluar: ketika pemain menekan ESC untuk keluar dari pointer lock, browser memerlukan gestur pengguna baru (sebuah klik) sebelum Anda dapat menguncinya kembali. Itulah alasan overlay "Klik untuk bermain" diperlukan. Namun, jika kode Anda sendiri memanggil document.exitPointerLock() (misalnya untuk membuka menu dalam game), tidak diperlukan gestur baru untuk mengunci kembali setelahnya. Jadi, Anda dapat mengaktifkannya kembali secara terprogram saat menu ditutup. Menekan ESC berulang kali juga dapat memberi sinyal kepada browser untuk menolak penguncian kembali sampai pengguna melakukan tindakan yang lebih disengaja. Karena itu, jangan mencoba mengunci ulang secara otomatis saat pointerlockchange.

Pertimbangan untuk iframe

Pointer lock di dalam iframe memerlukan atribut allow="pointer-lock":

<iframe 
  src="game.html" 
  allow="pointer-lock; fullscreen"
></iframe>

Periksa apakah pointer lock tersedia:

if (!document.pointerLockElement && !('requestPointerLock' in canvas)) {
  showMessage('Penangkapan mouse tidak tersedia')
}

Terkait

• Penanganan input game
• Gamepad API
• Dasar-dasar WebGL
• Dasar-dasar WebXR — kontrol VR untuk pengalaman orang pertama
• Memulai dengan WebGPU — rendering GPU modern untuk game FPS

Sumber Daya Eksternal

• MDN: Pointer Lock API — referensi API lengkap
• MDN: MouseEvent.movementX — membaca delta mouse

Progressive Web App memungkinkan pemain menginstal game Anda dan memainkannya secara offline. Tutorial ini menunjukkan cara menambahkan dukungan PWA ke game web.

1) Manifes Aplikasi Web

Buat manifest.json:

{
  "name": "Game Keren Saya",
  "short_name": "GameKeren",
  "description": "Game keren yang dapat Anda mainkan secara offline",
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "landscape",
  "background_color": "#1a1a2e",
  "theme_color": "#4ade80",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Tautkan manifes tersebut di HTML Anda:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#4ade80">
<link rel="apple-touch-icon" href="/icons/icon-192.png">

2) Service worker dasar

Buat sw.js:

const CACHE_NAME = 'game-v1'

const ASSETS = [
  '/',
  '/index.html',
  '/game.js',
  '/style.css',
  '/assets/sprites.png',
  '/assets/sounds/jump.mp3',
  '/assets/sounds/music.mp3',
]

// Install: cache assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(ASSETS)
    })
  )
})

// Activate: clean old caches
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys.filter(key => key !== CACHE_NAME)
            .map(key => caches.delete(key))
      )
    })
  )
})

// Fetch: serve from cache, fall back to network
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request)
    })
  )
})

3) Daftarkan service worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js')
      console.log('SW registered:', registration.scope)
    } catch (err) {
      console.error('SW registration failed:', err)
    }
  })
}

4) Cache-first dengan pembaruan jaringan

Lebih baik untuk game—pemuatan cepat dengan pembaruan di latar belakang:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open(CACHE_NAME).then(async (cache) => {
      const cached = await cache.match(event.request)
      
      // Start network fetch in background
      const fetchPromise = fetch(event.request).then((response) => {
        if (response.ok) {
          cache.put(event.request, response.clone())
        }
        return response
      }).catch(() => null)
      
      // Return cached immediately, or wait for network
      return cached || fetchPromise
    })
  )
})

5) Cache berversi untuk pembaruan

const CACHE_VERSION = 'v2'
const STATIC_CACHE = `static-${CACHE_VERSION}`
const DYNAMIC_CACHE = `dynamic-${CACHE_VERSION}`

const STATIC_ASSETS = [
  '/',
  '/index.html',
  '/game.js',
  // ... core assets that rarely change
]

self.addEventListener('install', (event) => {
  self.skipWaiting() // Activate immediately
  
  event.waitUntil(
    caches.open(STATIC_CACHE).then(cache => cache.addAll(STATIC_ASSETS))
  )
})

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(
        keys.filter(key => !key.includes(CACHE_VERSION))
            .map(key => caches.delete(key))
      )
    })
  )
  
  clients.claim() // Take control immediately
})

6) Menangani pembaruan game

Beri tahu pemain saat pembaruan tersedia:

// In main app
let refreshing = false

navigator.serviceWorker.addEventListener('controllerchange', () => {
  if (!refreshing) {
    refreshing = true
    showUpdateNotification()
  }
})

function showUpdateNotification() {
  const banner = document.createElement('div')
  banner.innerHTML = `
    <p>Game telah diperbarui! Muat ulang untuk mendapatkan versi terbaru.</p>
    <button onclick="location.reload()">Muat ulang</button>
  `
  banner.className = 'update-banner'
  document.body.appendChild(banner)
}

7) Deteksi offline

function updateOnlineStatus() {
  if (navigator.onLine) {
    hideOfflineBanner()
    syncGameData()
  } else {
    showOfflineBanner()
  }
}

window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)

function showOfflineBanner() {
  document.getElementById('offline-banner').style.display = 'block'
}

function hideOfflineBanner() {
  document.getElementById('offline-banner').style.display = 'none'
}

8) Prompt penginstalan

let deferredPrompt = null

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault()
  deferredPrompt = e
  showInstallButton()
})

function showInstallButton() {
  const btn = document.getElementById('install-btn')
  btn.style.display = 'block'
  btn.addEventListener('click', installApp)
}

async function installApp() {
  if (!deferredPrompt) return
  
  deferredPrompt.prompt()
  const { outcome } = await deferredPrompt.userChoice
  
  console.log('Install prompt outcome:', outcome)
  deferredPrompt = null
  document.getElementById('install-btn').style.display = 'none'
}

window.addEventListener('appinstalled', () => {
  console.log('App installed!')
  deferredPrompt = null
})

Di iOS dan iPadOS, peristiwa beforeinstallprompt tidak pernah dipicu, sehingga tombol instal di atas hanya muncul di browser Chromium. Pengguna iPhone dan iPad dapat menginstal dengan mengetuk Bagikan, lalu "Tambahkan ke Layar Utama". Ada satu perubahan pada tahun 2026 yang perlu diketahui: mulai Safari 26 (iOS 26 / iPadOS 26), setiap situs yang ditambahkan ke Layar Utama akan terbuka sebagai aplikasi web secara default, dengan tombol alih "Buka sebagai Aplikasi Web" yang aktif secara default. Kini tidak ada lagi persyaratan agar situs dapat diinstal di iOS, meskipun menyediakan manifes dan service worker tetap memberikan pengalaman offline yang jauh lebih baik.

9) Sinkronisasi latar belakang untuk papan peringkat

Perhatikan dukungannya: Background Sync API hanya diimplementasikan di browser Chromium (Chrome, Edge, Opera, Samsung Internet). Firefox dan Safari (termasuk iOS) tidak mendukungnya, jadi selalu lakukan deteksi fitur dan sediakan fallback yang mengirimkan skor saat aplikasi dimuat secara normal berikutnya.

// In service worker
self.addEventListener('sync', (event) => {
  if (event.tag === 'sync-scores') {
    event.waitUntil(syncScores())
  }
})

async function syncScores() {
  const db = await openDB('game', 1)
  const pendingScores = await db.getAll('pending-scores')
  
  for (const score of pendingScores) {
    try {
      await fetch('/api/scores', {
        method: 'POST',
        body: JSON.stringify(score),
        headers: { 'Content-Type': 'application/json' }
      })
      await db.delete('pending-scores', score.id)
    } catch (err) {
      // Will retry on next sync
      break
    }
  }
}

// In main app
async function submitScore(score) {
  try {
    await fetch('/api/scores', { method: 'POST', body: JSON.stringify(score) })
  } catch {
    // Save for later sync
    const db = await openDB('game', 1)
    await db.add('pending-scores', { ...score, id: Date.now() })
    
    if ('serviceWorker' in navigator && 'sync' in window.registration) {
      await navigator.serviceWorker.ready
      await registration.sync.register('sync-scores')
    }
  }
}

10) Menguji PWA

Chrome DevTools:

• Application > Service Workers
• Application > Manifest
• Application > Cache Storage
• Network > Kotak centang Offline

Audit Lighthouse:

• Jalankan audit PWA
• Periksa apakah aplikasi dapat diinstal
• Periksa kemampuan offline

Pengujian di perangkat nyata:

• Instal di layar utama ponsel
• Aktifkan mode pesawat
• Uji semua fitur secara offline

Terkait

• Service worker untuk caching game
• Penyimpanan game dengan IndexedDB
• Rilis game web yang dimuat dengan cepat
• Game web yang ramah perangkat seluler — kontrol sentuh dan penanganan viewport untuk game PWA
• Pemuatan aset secara streaming — strategi pemuatan yang bekerja dengan caching service worker

Referensi Eksternal

• MDN: Progressive Web App — dokumentasi lengkap PWA
• web.dev: Pelajari PWA — jalur pembelajaran PWA dari Google
• MDN: Manifes Aplikasi Web — referensi file manifes

Canvas yang tidak diskalakan dengan benar akan terlihat buram atau rusak pada ukuran layar yang berbeda. Saya sudah menangani masalah ini berkali-kali, jadi biarkan saya membantu Anda menghindari kerepotan tersebut.

Coba berbagai mode penskalaan:

const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

function resize() {
  const dpr = window.devicePixelRatio || 1
  const width = window.innerWidth
  const height = window.innerHeight
  
  // Atur resolusi internal agar sesuai dengan piksel fisik
  canvas.width = width * dpr
  canvas.height = height * dpr
  
  // Atur ukuran CSS agar sesuai dengan piksel logis
  canvas.style.width = width + 'px'
  canvas.style.height = height + 'px'
  
  // Skalakan konteks agar Anda dapat menggambar dalam piksel logis
  ctx.scale(dpr, dpr)
}

window.addEventListener('resize', resize)
resize()

const GAME_WIDTH = 1920
const GAME_HEIGHT = 1080
const ASPECT = GAME_WIDTH / GAME_HEIGHT

function resizeWithLetterbox() {
  const windowWidth = window.innerWidth
  const windowHeight = window.innerHeight
  const windowAspect = windowWidth / windowHeight
  
  let width, height
  
  if (windowAspect > ASPECT) {
    // Jendela lebih lebar daripada game, tambahkan bilah di sisi-sisinya
    height = windowHeight
    width = height * ASPECT
  } else {
    // Jendela lebih tinggi daripada game, tambahkan bilah di atas/bawah
    width = windowWidth
    height = width / ASPECT
  }
  
  canvas.style.width = width + 'px'
  canvas.style.height = height + 'px'
  canvas.style.position = 'absolute'
  canvas.style.left = (windowWidth - width) / 2 + 'px'
  canvas.style.top = (windowHeight - height) / 2 + 'px'
  
  // Resolusi internal tetap
  canvas.width = GAME_WIDTH
  canvas.height = GAME_HEIGHT
}

body {
  margin: 0;
  background: #000;
  overflow: hidden;
}

const GAME_WIDTH = 320
const GAME_HEIGHT = 180

function resizePixelPerfect() {
  const maxWidth = window.innerWidth
  const maxHeight = window.innerHeight
  
  // Cari skala bilangan bulat terbesar yang muat
  const scaleX = Math.floor(maxWidth / GAME_WIDTH)
  const scaleY = Math.floor(maxHeight / GAME_HEIGHT)
  const scale = Math.max(1, Math.min(scaleX, scaleY))
  
  const width = GAME_WIDTH * scale
  const height = GAME_HEIGHT * scale
  
  canvas.width = GAME_WIDTH
  canvas.height = GAME_HEIGHT
  canvas.style.width = width + 'px'
  canvas.style.height = height + 'px'
  canvas.style.imageRendering = 'pixelated'
}

function resizeGL(gl, canvas) {
  const dpr = window.devicePixelRatio || 1
  const width = canvas.clientWidth * dpr
  const height = canvas.clientHeight * dpr
  
  if (canvas.width !== width || canvas.height !== height) {
    canvas.width = width
    canvas.height = height
    gl.viewport(0, 0, width, height)
    return true // Ukuran berubah, Anda mungkin perlu memperbarui matriks proyeksi
  }
  return false
}

let resizeTimeout
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout)
  resizeTimeout = setTimeout(resize, 100)
})

const observer = new ResizeObserver(entries => {
  resize()
})
observer.observe(document.body)

async function toggleFullscreen() {
  if (!document.fullscreenElement) {
    await canvas.requestFullscreen()
  } else {
    await document.exitFullscreen()
  }
}

document.addEventListener('fullscreenchange', resize)

class ResponsiveCanvas {
  constructor(canvas, options = {}) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.gameWidth = options.width || 1280
    this.gameHeight = options.height || 720
    this.pixelArt = options.pixelArt || false
    this.letterbox = options.letterbox !== false
    
    this.bind()
    this.resize()
  }
  
  bind() {
    window.addEventListener('resize', () => this.resize())
    document.addEventListener('fullscreenchange', () => this.resize())
  }
  
  resize() {
    const aspect = this.gameWidth / this.gameHeight
    let width = window.innerWidth
    let height = window.innerHeight
    
    if (this.letterbox) {
      if (width / height > aspect) {
        width = height * aspect
      } else {
        height = width / aspect
      }
    }
    
    if (this.pixelArt) {
      const scale = Math.max(1, Math.floor(Math.min(
        window.innerWidth / this.gameWidth,
        window.innerHeight / this.gameHeight
      )))
      width = this.gameWidth * scale
      height = this.gameHeight * scale
    }
    
    this.canvas.width = this.gameWidth
    this.canvas.height = this.gameHeight
    this.canvas.style.width = width + 'px'
    this.canvas.style.height = height + 'px'
    this.canvas.style.position = 'absolute'
    this.canvas.style.left = (window.innerWidth - width) / 2 + 'px'
    this.canvas.style.top = (window.innerHeight - height) / 2 + 'px'
    
    if (this.pixelArt) {
      this.canvas.style.imageRendering = 'pixelated'
    }
  }
  
  get width() { return this.gameWidth }
  get height() { return this.gameHeight }
}

const responsive = new ResponsiveCanvas(document.getElementById('game'), {
  width: 320,
  height: 180,
  pixelArt: true,
  letterbox: true
})

// Dalam kode game Anda, gunakan responsive.width dan responsive.height

Service worker memungkinkan Anda mengontrol cara aset disimpan dalam cache dan disajikan. Untuk game, ini berarti pemuatan seketika pada kunjungan berikutnya dan dukungan offline.

1) Dasar-dasar service worker

Buat sw.js di direktori root Anda:

// sw.js
self.addEventListener('install', (event) => {
  console.log('Service worker installing')
})

self.addEventListener('activate', (event) => {
  console.log('Service worker activated')
})

self.addEventListener('fetch', (event) => {
  // Intercept all network requests
})

Daftarkan:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered'))
    .catch(err => console.error('SW registration failed:', err))
}

2) Strategi cache-first (terbaik untuk aset game)

Muat dari cache, dan hanya ambil jika belum disimpan dalam cache:

const CACHE_NAME = 'game-assets-v1'

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      if (cached) {
        return cached
      }
      
      return fetch(event.request).then((response) => {
        // Don't cache non-ok responses or non-GET requests
        if (!response.ok || event.request.method !== 'GET') {
          return response
        }
        
        // Clone response for caching
        const clone = response.clone()
        caches.open(CACHE_NAME).then((cache) => {
          cache.put(event.request, clone)
        })
        
        return response
      })
    })
  )
})

3) Pra-cache aset penting

Event install sangat cocok untuk melakukan pra-cache:

const CACHE_NAME = 'game-v1'

const PRECACHE = [
  '/',
  '/index.html',
  '/game.js',
  '/style.css',
  '/assets/sprites.png',
  '/assets/tileset.png',
  '/assets/player.png',
]

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE))
      .then(() => self.skipWaiting())
  )
})

4) Network-first untuk konten dinamis

Gunakan network-first untuk hal-hal yang berubah (papan peringkat, data pemain):

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url)
  
  // API calls: network first
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request))
    return
  }
  
  // Assets: cache first
  event.respondWith(cacheFirst(event.request))
})

async function networkFirst(request) {
  try {
    const response = await fetch(request)
    const cache = await caches.open('api-cache')
    cache.put(request, response.clone())
    return response
  } catch {
    return caches.match(request)
  }
}

async function cacheFirst(request) {
  const cached = await caches.match(request)
  if (cached) return cached
  
  const response = await fetch(request)
  const cache = await caches.open(CACHE_NAME)
  cache.put(request, response.clone())
  return response
}

5) Stale-while-revalidate

Segera kembalikan versi yang tersimpan dalam cache, lalu perbarui di latar belakang:

async function staleWhileRevalidate(request) {
  const cache = await caches.open(CACHE_NAME)
  const cached = await cache.match(request)
  
  const fetchPromise = fetch(request).then((response) => {
    if (response.ok) {
      cache.put(request, response.clone())
    }
    return response
  })
  
  return cached || fetchPromise
}

6) Pembuatan versi dan pembersihan cache

Bersihkan cache lama saat aktivasi:

const CACHE_VERSION = 'v2'
const CACHE_NAME = `game-${CACHE_VERSION}`

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys
          .filter(key => key.startsWith('game-') && key !== CACHE_NAME)
          .map(key => {
            console.log('Deleting old cache:', key)
            return caches.delete(key)
          })
      )
    }).then(() => self.clients.claim())
  )
})

7) Pisahkan cache berdasarkan jenis

Atur cache agar lebih mudah dikelola:

const CACHES = {
  static: 'static-v1',    // HTML, JS, CSS
  images: 'images-v1',    // Sprites, textures
  audio: 'audio-v1',      // Music, SFX
  api: 'api-v1',          // API responses
}

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url)
  
  if (url.pathname.match(/\.(png|jpg|webp)$/)) {
    event.respondWith(cacheFirst(event.request, CACHES.images))
  } else if (url.pathname.match(/\.(mp3|ogg|wav)$/)) {
    event.respondWith(cacheFirst(event.request, CACHES.audio))
  } else if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request, CACHES.api))
  } else {
    event.respondWith(cacheFirst(event.request, CACHES.static))
  }
})

8) Range request untuk audio/video

Satu hal yang perlu diketahui sejak awal: Cache API tidak akan menyimpan respons parsial. Jika respons 206 Partial Content sampai ke cache.put(), metode tersebut akan memunculkan TypeError: Failed to execute 'put' on 'Cache': Partial response (status code 206) is unsupported. Jadi, pola untuk media yang disimpan dalam cache selalu sama: lakukan pra-cache (atau ambil) file lengkap sebagai respons 200 biasa, lalu buat sendiri respons 206 dengan memotong byte yang tersimpan dalam cache setiap kali ada permintaan dengan header Range. Jika tidak ingin membuatnya sendiri, plugin range-requests dari Workbox melakukan pemotongan tersebut untuk Anda ketika dipasangkan dengan strategi CacheFirst.

Tangani range request dengan benar (diperlukan untuk berpindah posisi dalam audio):

self.addEventListener('fetch', (event) => {
  if (event.request.headers.has('range')) {
    event.respondWith(handleRangeRequest(event.request))
    return
  }
  // ... normal handling
})

async function handleRangeRequest(request) {
  const cache = await caches.open(CACHES.audio)
  // Match the full resource, ignoring the Range header (which would never match a cached full file)
  let cached = await cache.match(request.url)

  if (!cached) {
    // Fetch the FULL file (string URL drops the Range header) and cache it as a 200
    cached = await fetch(request.url)
    if (cached.ok) cache.put(request.url, cached.clone()) // cache.put rejects 206, so only store full 200s
  }

  // Build a 206 Partial Content response from the cached full body
  const rangeHeader = request.headers.get('range') // e.g. "bytes=200-1000"
  const buffer = await cached.arrayBuffer()
  const total = buffer.byteLength
  const [startStr, endStr] = rangeHeader.replace(/bytes=/, '').split('-')
  const start = Number(startStr)
  const end = endStr ? Number(endStr) : total - 1
  const slice = buffer.slice(start, end + 1)

  return new Response(slice, {
    status: 206,
    statusText: 'Partial Content',
    headers: {
      'Content-Type': cached.headers.get('Content-Type') || 'application/octet-stream',
      'Content-Range': `bytes ${start}-${end}/${total}`,
      'Content-Length': String(slice.byteLength),
      'Accept-Ranges': 'bytes',
    },
  })
}

9) Notifikasi pembaruan

Beri tahu pemain saat versi baru siap:

// In main app
let refreshing = false

navigator.serviceWorker.addEventListener('controllerchange', () => {
  if (refreshing) return
  refreshing = true
  
  showUpdateBanner()
})

function showUpdateBanner() {
  const banner = document.createElement('div')
  banner.className = 'update-banner'
  banner.innerHTML = `
    <span>Versi baru tersedia!</span>
    <button onclick="location.reload()">Perbarui</button>
  `
  document.body.appendChild(banner)
}

10) Service worker game yang lengkap

const VERSION = 'v1'
const STATIC_CACHE = `static-${VERSION}`
const ASSET_CACHE = `assets-${VERSION}`

const PRECACHE_URLS = [
  '/',
  '/index.html',
  '/game.js',
  '/style.css',
]

// Install: precache critical resources
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(STATIC_CACHE)
      .then(cache => cache.addAll(PRECACHE_URLS))
      .then(() => self.skipWaiting())
  )
})

// Activate: clean old caches
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys
        .filter(key => !key.endsWith(VERSION))
        .map(key => caches.delete(key))
    )).then(() => self.clients.claim())
  )
})

// Fetch: route requests to appropriate strategy
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url)
  
  // Same-origin only
  if (url.origin !== location.origin) {
    return
  }
  
  // API: network first with cache fallback
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request, 'api-cache'))
    return
  }
  
  // Assets: cache first
  if (url.pathname.startsWith('/assets/')) {
    event.respondWith(cacheFirst(event.request, ASSET_CACHE))
    return
  }
  
  // HTML/JS/CSS: stale while revalidate
  event.respondWith(staleWhileRevalidate(event.request, STATIC_CACHE))
})

async function cacheFirst(request, cacheName) {
  const cached = await caches.match(request)
  if (cached) return cached
  
  try {
    const response = await fetch(request)
    if (response.ok) {
      const cache = await caches.open(cacheName)
      cache.put(request, response.clone())
    }
    return response
  } catch {
    return new Response('Offline', { status: 503 })
  }
}

async function networkFirst(request, cacheName) {
  try {
    const response = await fetch(request)
    if (response.ok) {
      const cache = await caches.open(cacheName)
      cache.put(request, response.clone())
    }
    return response
  } catch {
    return caches.match(request) || new Response('Offline', { status: 503 })
  }
}

async function staleWhileRevalidate(request, cacheName) {
  const cache = await caches.open(cacheName)
  const cached = await cache.match(request)
  
  const fetchPromise = fetch(request).then(response => {
    if (response.ok) {
      cache.put(request, response.clone())
    }
    return response
  }).catch(() => cached)
  
  return cached || fetchPromise
}

Terkait

• PWA untuk game offline
• Pemuatan aset secara streaming
• Rilis game web yang dimuat dengan cepat
• Web Audio API untuk game — menyimpan aset audio dalam cache untuk permainan offline
• Penyimpanan game dengan IndexedDB — menyimpan status game secara persisten bersama aset yang tersimpan dalam cache

Sumber Eksternal

• MDN: Service Worker API — referensi API lengkap
• MDN: Cache API — referensi antarmuka Cache
• web.dev: Service worker — strategi dan pola penyimpanan cache
• Workbox — pustaka Google untuk alat bantu service worker

Jika pemain tidak dapat mulai bermain dalam hitungan detik, mereka akan pergi. Tutorial ini adalah daftar periksa praktis yang dapat Anda terapkan pada hampir semua stack game web (Canvas/WebGL/WebGPU, Pixi/Three/PlayCanvas, engine khusus, dan sebagainya).

1) Tetapkan batas terlebih dahulu (atau Anda tidak dapat mengoptimalkan)

Pilih batas yang sesuai dengan perangkat target Anda. Patokan awal yang baik untuk pengalaman “langsung bermain”:

• JS+CSS yang dikirimkan: di bawah ~300–500 KB gzip (lebih kecil lebih baik)
• Aset penting sebelum input pertama: di bawah ~2–5 MB setelah dikompresi
• Waktu hingga input pertama: di bawah ~3–5 detik pada perangkat seluler kelas menengah

Catat batas-batas ini dan perlakukan seperti kontrak API.

2) Ukur hal yang tepat

Di Chrome DevTools:

• Gunakan Performance untuk merekam sesi dan memeriksa tugas yang berjalan lama.
• Gunakan Network untuk memeriksa:
  • ukuran transfer dibandingkan ukuran setelah didekode
  • header caching
  • apakah aset dialirkan secara progresif atau diterima sebagai satu blob raksasa

Dalam konteks game, pantau:

• Waktu hingga “Pemain dapat bergerak”
• Waktu hingga “Frame bermakna pertama”
• “Latensi input pertama” (input → frame)

Pemahaman Anda tentang “latensi input pertama” kini berkaitan dengan metrik standar: Interaction to Next Paint (INP) menggantikan First Input Delay sebagai Core Web Vital pada Maret 2024, dan mengukur keseluruhan waktu dari input hingga paint berikutnya di seluruh interaksi, bukan hanya interaksi pertama. Targetkan INP di bawah 200 md pada persentil ke-75, yang merupakan tolok ukur eksternal berguna untuk angka responsivitas yang sudah Anda pantau.

3) Kompres semua yang memungkinkan

Pastikan hosting Anda menyajikan:

• Brotli (br) untuk aset teks (JS/CSS/HTML/WASM) jika tersedia
• gzip sebagai cadangan

Jika host dan CDN Anda mendukungnya, Zstandard (zstd) kini menjadi opsi ketiga untuk Content-Encoding. Dukungan ini tersedia di Chrome dan Edge 123+, Firefox 126+, serta Safari 26.3+ (sekitar 80% pengguna), dan dapat mencapai rasio sekelas Brotli dengan biaya CPU server yang lebih rendah, sehingga membantu untuk payload WASM dan JSON berukuran besar. Browser hanya mengiklankan Accept-Encoding: zstd melalui HTTPS, jadi tetap konfigurasikan Brotli dan gzip sebagai cadangan bagi pengguna lainnya.

Untuk build WebAssembly, kompresi sering kali menjadi pembeda antara “langsung dimuat” dan “tidak pernah selesai dimuat.”

4) Jangan unduh seluruh dunia sejak awal

Pisahkan game Anda menjadi:

• Boot: loader minimal + input + scene pertama
• Core: sistem gameplay utama
• Opsional: level tambahan, kosmetik, tekstur resolusi tinggi, audio bonus, dan sebagainya

Muat bagian “Opsional” hanya setelah:

• pemain sudah dapat bermain, dan/atau
• Anda tahu mereka menginginkan konten tersebut (misalnya, mereka telah mencapai menu/level)

5) Pilih format aset yang tepat

Untuk sebagian besar game web:

• Gambar: utamakan WebP (atau AVIF jika Anda dapat menerima proses encoding yang lebih lambat) untuk UI/latar belakang.
• Audio: utamakan Ogg Vorbis untuk penggunaan umum; uji AAC untuk ekosistem Apple.
• Video: utamakan MP4/H.264 untuk kompatibilitas, dan WebM jika didukung serta berukuran lebih kecil.

Perhatikan biaya decoding: “unduhan lebih kecil” masih dapat berarti “lebih lambat untuk didekode.”

6) Buat scene pertama tetap kecil dan deterministik

Hindari hal-hal berikut dalam scene interaktif pertama Anda:

• kompilasi shader secara besar-besaran
• pengunggahan tekstur berukuran sangat besar
• pembuatan prosedural yang memblokir thread utama
• parsing JSON sinkron terhadap blob berukuran megabita

Khusus untuk tekstur, kirimkan KTX2 dengan Basis Universal supercompression, bukan PNG atau JPEG. Format ini tetap terkompresi di GPU setelah diunggah (ditranskode ke BC7 di desktop atau ASTC di perangkat seluler saat pemuatan), sehingga memangkas VRAM 4 hingga 8 kali dan membuat proses pengunggahan jauh lebih ringan dibandingkan mendekode PNG berukuran penuh dan mengirim piksel mentah ke GPU.

Jika Anda harus melakukan pekerjaan berat, lakukan:

• secara bertahap di beberapa frame, atau
• di dalam Worker (jika memungkinkan)

7) Terapkan caching secara agresif (tetapi dengan benar)

Gunakan caching berjangka panjang untuk aset yang dialamatkan berdasarkan konten:

• Cache-Control: public, max-age=31536000, immutable

Untuk titik masuk HTML, gunakan durasi caching yang singkat agar Anda dapat menerapkan pembaruan dengan aman.

8) Buat “kegagalan” tampil cepat dan mudah dipahami

Jika terjadi masalah, tampilkan:

• pesan kesalahan yang jelas
• tombol coba lagi
• tautan untuk melaporkan masalah

Kegagalan tanpa pemberitahuan menghancurkan kepercayaan.

9) Jika menggunakan thread Wasm, pahami COOP/COEP

Jika build Anda bergantung pada SharedArrayBuffer (umum pada beberapa konfigurasi threading Wasm), kemungkinan besar Anda memerlukan header isolasi lintas origin:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

Anda memiliki dua pilihan untuk header COEP. require-corp adalah opsi yang ketat, tetapi mengharuskan setiap aset lintas origin (tekstur CDN, skrip pihak ketiga) mengirimkan header Cross-Origin-Resource-Policy atau aset tersebut akan diblokir. Cross-Origin-Embedder-Policy: credentialless juga mengaktifkan SharedArrayBuffer dan isolasi lintas origin, tetapi memuat sumber daya lintas origin tanpa kredensial, alih-alih mewajibkan sumber daya tersebut untuk memberikan izin melalui CORP. Jika Anda mengambil aset dari CDN yang tidak Anda kendalikan, credentialless biasanya merupakan pilihan yang lebih mudah.

Lakukan pengujian sejak awal di host sebenarnya, karena header dan embed pihak ketiga dapat menyebabkan masalah.

10) Pastikan game dapat dimainkan tanpa SDK

Jika Anda menargetkan alur kerja kreator Cinevva, usahakan untuk menyediakan:

• satu URL yang selalu memulai game dengan andal
• tanpa login wajib untuk memulai demo
• kontrol input yang konsisten

Dengan begitu, Anda siap mendistribusikan game tanpa mengintegrasikan SDK tambahan.

Terkait:

• Untuk kreator game
• Kebijakan konten buatan AI
• Pemuatan aset secara streaming — pola pemuatan progresif untuk game berukuran besar
• Service worker untuk caching game — simpan aset dalam cache agar kunjungan berikutnya dimuat seketika
• Perbandingan Engine Game Web — ukuran build dan waktu pemuatan di berbagai engine
• Cara Merilis Game Anda di itch.io — mengoptimalkan game browser untuk embed itch.io

Pemain tidak akan menunggu unduhan sebesar 100 MB. Muat aset secara bertahap agar mereka dapat bermain sementara sisanya dimuat di latar belakang.

1) Strategi pemuatan

Bagi aset menjadi beberapa tingkat:

1. Kritis — Diperlukan untuk menampilkan layar pertama (< 1 MB)
2. Gameplay — Diperlukan untuk bermain (< 10 MB)
3. Penyempurnaan — Sebaiknya tersedia (muat di latar belakang)

2) Pemuat aset dasar

class AssetLoader {
  constructor() {
    this.cache = new Map()
    this.loading = new Map()
  }
  
  async loadImage(url) {
    if (this.cache.has(url)) return this.cache.get(url)
    if (this.loading.has(url)) return this.loading.get(url)
    
    const promise = new Promise((resolve, reject) => {
      const img = new Image()
      img.onload = () => {
        this.cache.set(url, img)
        this.loading.delete(url)
        resolve(img)
      }
      img.onerror = reject
      img.src = url
    })
    
    this.loading.set(url, promise)
    return promise
  }
  
  async loadJSON(url) {
    if (this.cache.has(url)) return this.cache.get(url)
    
    const response = await fetch(url)
    const data = await response.json()
    this.cache.set(url, data)
    return data
  }
  
  async loadAudio(url, audioCtx) {
    if (this.cache.has(url)) return this.cache.get(url)
    
    const response = await fetch(url)
    const buffer = await response.arrayBuffer()
    const audioBuffer = await audioCtx.decodeAudioData(buffer)
    this.cache.set(url, audioBuffer)
    return audioBuffer
  }
}

3) Pemuatan dengan progres

async function loadWithProgress(url, onProgress) {
  const response = await fetch(url)
  const contentLength = response.headers.get('Content-Length')
  const total = parseInt(contentLength, 10)
  
  const reader = response.body.getReader()
  const chunks = []
  let received = 0
  
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    
    chunks.push(value)
    received += value.length
    onProgress(received / total)
  }
  
  const blob = new Blob(chunks)
  return blob
}

Perlu diketahui: ketika server mengompresi respons (gzip atau brotli, seperti yang dilakukan sebagian besar CDN secara default), Content-Length adalah ukuran terkompresi, sedangkan potongan data yang Anda baca sudah didekompresi. Akibatnya, received / total dapat melampaui 100%. Untuk bilah progres tingkat byte yang akurat pada respons terkompresi, sajikan aset tanpa kompresi, kirim header khusus berisi ukuran tanpa kompresi, atau gunakan peristiwa onprogress milik XMLHttpRequest, yang melaporkan progres transfer sebenarnya.

4) Pemuatan batch dengan progres keseluruhan

async function loadAssets(manifest, onProgress) {
  const total = manifest.length
  let completed = 0
  const results = {}
  
  const promises = manifest.map(async (item) => {
    const asset = await loadAsset(item.url, item.type)
    results[item.name] = asset
    completed++
    onProgress(completed / total, item.name)
  })
  
  await Promise.all(promises)
  return results
}

// Usage
const manifest = [
  { name: 'player', url: 'player.png', type: 'image' },
  { name: 'level1', url: 'level1.json', type: 'json' },
  { name: 'music', url: 'music.mp3', type: 'audio' },
]

const assets = await loadAssets(manifest, (progress, name) => {
  console.log(`Loading: ${Math.round(progress * 100)}% (${name})`)
})

5) Pemuat dengan antrean prioritas

class PriorityLoader {
  constructor(concurrency = 4) {
    this.queue = []
    this.active = 0
    this.concurrency = concurrency
  }
  
  add(url, priority = 0) {
    return new Promise((resolve, reject) => {
      this.queue.push({ url, priority, resolve, reject })
      this.queue.sort((a, b) => b.priority - a.priority)
      this.process()
    })
  }
  
  async process() {
    if (this.active >= this.concurrency || this.queue.length === 0) return
    
    this.active++
    const { url, resolve, reject } = this.queue.shift()
    
    try {
      const response = await fetch(url)
      const blob = await response.blob()
      resolve(blob)
    } catch (err) {
      reject(err)
    }
    
    this.active--
    this.process()
  }
}

// Usage
const loader = new PriorityLoader()
loader.add('critical.png', 10)  // Load first
loader.add('optional.png', 1)   // Load later

6) Pemuatan malas untuk level

class LevelManager {
  constructor(loader) {
    this.loader = loader
    this.levels = new Map()
  }
  
  async preload(levelId) {
    if (this.levels.has(levelId)) return
    
    const manifest = await this.loader.loadJSON(`levels/${levelId}/manifest.json`)
    const assets = await this.loadLevelAssets(manifest)
    this.levels.set(levelId, { manifest, assets })
  }
  
  async loadLevelAssets(manifest) {
    // Load only what's needed for this level
    const assets = {}
    
    for (const texture of manifest.textures) {
      assets[texture.name] = await this.loader.loadImage(texture.url)
    }
    
    return assets
  }
  
  unload(levelId) {
    this.levels.delete(levelId)
    // Assets can be garbage collected
  }
}

7) Streaming file besar

Untuk file besar (model 3D, audio), lakukan streaming dan pemrosesan secara bertahap:

async function streamLargeFile(url, onChunk) {
  const response = await fetch(url)
  const reader = response.body.getReader()
  
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    onChunk(value)
  }
}

// For audio: use Media Source Extensions
// For 3D: process mesh data as it arrives

8) Menyimpan aset yang telah dimuat dalam cache

Gabungkan dengan IndexedDB untuk caching persisten:

class CachedLoader {
  constructor() {
    this.memCache = new Map()
    this.dbName = 'AssetCache'
  }
  
  async loadImage(url) {
    // Check memory
    if (this.memCache.has(url)) return this.memCache.get(url)
    
    // Check IndexedDB
    const cached = await this.getFromDB(url)
    if (cached) {
      const img = await this.blobToImage(cached)
      this.memCache.set(url, img)
      return img
    }
    
    // Fetch and cache
    const response = await fetch(url)
    const blob = await response.blob()
    await this.saveToDB(url, blob)
    
    const img = await this.blobToImage(blob)
    this.memCache.set(url, img)
    return img
  }
  
  blobToImage(blob) {
    return new Promise((resolve) => {
      const img = new Image()
      img.onload = () => {
        URL.revokeObjectURL(img.src)
        resolve(img)
      }
      img.src = URL.createObjectURL(blob)
    })
  }
  
  // IndexedDB methods...
}

9) Pola layar pemuatan

class LoadingScreen {
  constructor(canvas) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.progress = 0
    this.message = 'Memuat...'
  }
  
  update(progress, message) {
    this.progress = progress
    this.message = message || this.message
    this.render()
  }
  
  render() {
    const { ctx, canvas } = this
    ctx.fillStyle = '#1a1a2e'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    // Progress bar
    const barWidth = canvas.width * 0.6
    const barHeight = 20
    const x = (canvas.width - barWidth) / 2
    const y = canvas.height / 2
    
    ctx.fillStyle = '#333'
    ctx.fillRect(x, y, barWidth, barHeight)
    
    ctx.fillStyle = '#4ade80'
    ctx.fillRect(x, y, barWidth * this.progress, barHeight)
    
    // Text
    ctx.fillStyle = '#fff'
    ctx.font = '16px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText(this.message, canvas.width / 2, y - 20)
    ctx.fillText(`${Math.round(this.progress * 100)}%`, canvas.width / 2, y + 50)
  }
}

10) Praktik terbaik

• Segera tampilkan sesuatu — bahkan hanya gambar statis
• Muat yang terlihat terlebih dahulu — tekstur untuk tampilan saat ini
• Gunakan placeholder — gambar beresolusi rendah yang kemudian ditingkatkan
• Pramuat level berikutnya — saat pemain masih bermain
• Tangani kegagalan dengan baik — logika percobaan ulang dan fallback

async function loadWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fetch(url)
    } catch (err) {
      if (i === maxRetries - 1) throw err
      await new Promise(r => setTimeout(r, 1000 * (i + 1)))
    }
  }
}

Terkait

• Rilis game web yang dimuat dengan cepat
• Service worker untuk caching game
• Penyimpanan progres game dengan IndexedDB
• Web Worker untuk logika game — dekode dan proses aset di luar thread utama
• Tempat menemukan aset game gratis — sumber model 3D, tekstur, dan audio untuk streaming

Sumber Daya Eksternal

• MDN: Fetch API — streaming respons dan ReadableStream
• MDN: ReadableStream — memproses potongan data yang di-stream
• Spesifikasi glTF 2.0 — format standar untuk streaming aset 3D

Teks ada di mana-mana dalam game—skor, dialog, menu, angka kerusakan. Tutorial ini membahas berbagai pendekatan dan kapan sebaiknya masing-masing digunakan.

1) Dasar-dasar teks Canvas

Pendekatan paling sederhana:

ctx.font = '24px Arial'
ctx.fillStyle = '#ffffff'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText('Skor: 1000', canvas.width / 2, 50)

Jika Anda memerlukan jarak yang lebih rapat atau renggang untuk judul dan label HUD, konteks canvas kini mendukung letterSpacing dan wordSpacing secara langsung. Keduanya menerima string panjang CSS dan mencapai Baseline lintas peramban pada 2025, sehingga Anda tidak perlu lagi menggambar glif satu per satu untuk meniru kerning:

ctx.font = '24px sans-serif'
ctx.letterSpacing = '2px'
ctx.wordSpacing = '6px'
ctx.fillText('GAME OVER', 100, 100)

Atur ulang keduanya ke '0px' setelah selesai karena nilainya tetap tersimpan dalam konteks seperti font dan fillStyle.

2) Teks dengan garis luar

function drawTextWithOutline(ctx, text, x, y, fillColor, outlineColor, outlineWidth = 2) {
  ctx.font = '24px Arial'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  
  ctx.strokeStyle = outlineColor
  ctx.lineWidth = outlineWidth
  ctx.strokeText(text, x, y)
  
  ctx.fillStyle = fillColor
  ctx.fillText(text, x, y)
}

drawTextWithOutline(ctx, 'GAME OVER', 400, 300, '#fff', '#000', 3)

3) Teks dengan bayangan

function drawTextWithShadow(ctx, text, x, y, color, shadowOffset = 2) {
  ctx.font = '32px sans-serif'
  ctx.textAlign = 'left'
  ctx.textBaseline = 'top'
  
  // Bayangan
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
  ctx.fillText(text, x + shadowOffset, y + shadowOffset)
  
  // Teks utama
  ctx.fillStyle = color
  ctx.fillText(text, x, y)
}

4) Rendering font bitmap

Untuk game seni piksel atau tampilan yang konsisten di berbagai platform:

class BitmapFont {
  constructor(image, charWidth, charHeight, chars) {
    this.image = image
    this.charWidth = charWidth
    this.charHeight = charHeight
    this.chars = chars
  }
  
  draw(ctx, text, x, y, scale = 1) {
    const w = this.charWidth * scale
    const h = this.charHeight * scale
    
    for (let i = 0; i < text.length; i++) {
      const charIndex = this.chars.indexOf(text[i].toUpperCase())
      if (charIndex === -1) continue
      
      const sx = (charIndex % 16) * this.charWidth
      const sy = Math.floor(charIndex / 16) * this.charHeight
      
      ctx.drawImage(
        this.image,
        sx, sy, this.charWidth, this.charHeight,
        Math.round(x + i * w), Math.round(y), w, h
      )
    }
  }
  
  measureText(text, scale = 1) {
    return text.length * this.charWidth * scale
  }
}

// Penggunaan
const font = new BitmapFont(fontImage, 8, 8, 
  'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,!?-+:; '
)
font.draw(ctx, 'SKOR: 1000', 10, 10, 2)

5) Teks yang dirender sebelumnya untuk performa

Untuk teks statis, render sekali lalu gunakan kembali:

function createTextImage(text, font, color) {
  const tempCanvas = document.createElement('canvas')
  const tempCtx = tempCanvas.getContext('2d')
  
  tempCtx.font = font
  const metrics = tempCtx.measureText(text)
  
  tempCanvas.width = Math.ceil(metrics.width)
  tempCanvas.height = parseInt(font) * 1.5
  
  tempCtx.font = font
  tempCtx.fillStyle = color
  tempCtx.textBaseline = 'top'
  tempCtx.fillText(text, 0, 0)
  
  return tempCanvas
}

// Buat sekali
const titleImage = createTextImage('GAME SAYA', '48px Impact', '#fff')

// Gambar berkali-kali (cepat)
ctx.drawImage(titleImage, x, y)

6) Efek mesin tik

class TypewriterText {
  constructor(text, x, y, charsPerSecond = 20) {
    this.fullText = text
    this.x = x
    this.y = y
    this.speed = 1 / charsPerSecond
    this.timer = 0
    this.charIndex = 0
  }
  
  update(dt) {
    this.timer += dt
    while (this.timer >= this.speed && this.charIndex < this.fullText.length) {
      this.charIndex++
      this.timer -= this.speed
    }
  }
  
  draw(ctx) {
    ctx.font = '18px monospace'
    ctx.fillStyle = '#fff'
    ctx.fillText(this.fullText.slice(0, this.charIndex), this.x, this.y)
  }
  
  isComplete() {
    return this.charIndex >= this.fullText.length
  }
  
  skip() {
    this.charIndex = this.fullText.length
  }
}

7) Teks dengan pembungkusan kata

function wrapText(ctx, text, maxWidth) {
  const words = text.split(' ')
  const lines = []
  let currentLine = ''
  
  for (const word of words) {
    const testLine = currentLine ? currentLine + ' ' + word : word
    const metrics = ctx.measureText(testLine)
    
    if (metrics.width > maxWidth && currentLine) {
      lines.push(currentLine)
      currentLine = word
    } else {
      currentLine = testLine
    }
  }
  
  if (currentLine) lines.push(currentLine)
  return lines
}

function drawWrappedText(ctx, text, x, y, maxWidth, lineHeight) {
  const lines = wrapText(ctx, text, maxWidth)
  for (let i = 0; i < lines.length; i++) {
    ctx.fillText(lines[i], x, y + i * lineHeight)
  }
}

8) Sistem kotak dialog

class DialogueBox {
  constructor(x, y, width, height) {
    this.x = x
    this.y = y
    this.width = width
    this.height = height
    this.padding = 16
    this.lineHeight = 24
    this.text = ''
    this.displayedChars = 0
    this.charsPerSecond = 30
    this.timer = 0
  }
  
  show(text) {
    this.text = text
    this.displayedChars = 0
    this.timer = 0
  }
  
  update(dt) {
    if (this.displayedChars < this.text.length) {
      this.timer += dt
      const charsToAdd = Math.floor(this.timer * this.charsPerSecond)
      this.displayedChars = Math.min(this.displayedChars + charsToAdd, this.text.length)
      this.timer = this.timer % (1 / this.charsPerSecond)
    }
  }
  
  skip() {
    this.displayedChars = this.text.length
  }
  
  isComplete() {
    return this.displayedChars >= this.text.length
  }
  
  draw(ctx) {
    // Latar belakang kotak
    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'
    ctx.fillRect(this.x, this.y, this.width, this.height)
    
    // Bingkai
    ctx.strokeStyle = '#fff'
    ctx.lineWidth = 2
    ctx.strokeRect(this.x, this.y, this.width, this.height)
    
    // Teks
    ctx.font = '18px sans-serif'
    ctx.fillStyle = '#fff'
    ctx.textBaseline = 'top'
    
    const displayText = this.text.slice(0, this.displayedChars)
    const maxWidth = this.width - this.padding * 2
    const lines = wrapText(ctx, displayText, maxWidth)
    
    for (let i = 0; i < lines.length; i++) {
      ctx.fillText(
        lines[i],
        this.x + this.padding,
        this.y + this.padding + i * this.lineHeight
      )
    }
    
    // Indikator lanjut
    if (this.isComplete()) {
      ctx.fillText('▼', this.x + this.width - 24, this.y + this.height - 24)
    }
  }
}

9) Angka kerusakan melayang

class FloatingText {
  constructor(text, x, y, color = '#fff') {
    this.text = text
    this.x = x
    this.y = y
    this.color = color
    this.vy = -60
    this.lifetime = 1
    this.age = 0
  }
  
  update(dt) {
    this.y += this.vy * dt
    this.vy *= 0.95
    this.age += dt
  }
  
  draw(ctx) {
    const alpha = 1 - (this.age / this.lifetime)
    ctx.font = 'bold 20px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillStyle = this.color
    ctx.globalAlpha = alpha
    ctx.fillText(this.text, Math.round(this.x), Math.round(this.y))
    ctx.globalAlpha = 1
  }
  
  isExpired() {
    return this.age >= this.lifetime
  }
}

// Pengelola
const floatingTexts = []

function spawnDamageNumber(damage, x, y) {
  const color = damage > 50 ? '#ff4444' : '#ffff44'
  floatingTexts.push(new FloatingText(damage.toString(), x, y, color))
}

function updateFloatingTexts(dt) {
  for (let i = floatingTexts.length - 1; i >= 0; i--) {
    floatingTexts[i].update(dt)
    if (floatingTexts[i].isExpired()) {
      floatingTexts.splice(i, 1)
    }
  }
}

10) Teks WebGL (font SDF)

Untuk game WebGL, font Signed Distance Field dapat diskalakan dengan tajam:

// Fragmen shader SDF
const sdfFragmentShader = `
  precision mediump float;
  
  uniform sampler2D u_texture;
  uniform vec4 u_color;
  varying vec2 v_texCoord;
  
  void main() {
    float distance = texture2D(u_texture, v_texCoord).a;
    float alpha = smoothstep(0.4, 0.6, distance);
    gl_FragColor = vec4(u_color.rgb, u_color.a * alpha);
  }
`

// Pustaka seperti msdf-bmfont-xml dapat menghasilkan atlas font SDF

Khusus untuk scene three.js, troika-three-text adalah pilihan yang bagus. Alih-alih membuat atlas terlebih dahulu, pustaka ini mengurai file .ttf/.otf/.woff dan menghasilkan glif SDF secara dinamis di web worker. Pustaka ini juga menangani kerning, ligatur, dan aksara kanan-ke-kiri untuk Anda.

Untuk sebagian besar game Canvas 2D, font bitmap atau teks Canvas yang dirender sebelumnya dapat digunakan dengan baik.

Terkait

• Loop game Canvas 2D
• Rendering seni piksel
• Dasar-dasar WebGL
• Canvas game responsif — menskalakan teks sesuai resolusi canvas dan DPI
• Tempat Menemukan Aset Game Gratis — sumber font dan aset UI

Tone.js berjalan di atas Web Audio API dan membuat audio sintetis lebih praktis. Alih-alih memuat berkas audio, Anda menghasilkan suara secara terprogram. Ini berarti tanpa waktu pemuatan, variasi tak terbatas, dan suara yang dapat bereaksi terhadap gameplay secara real-time.

Cobalah (klik tombol untuk mendengarkan suara game sintetis):

<script src="https://unpkg.com/tone@15/build/Tone.js"></script>

npm install tone

import * as Tone from 'tone'

document.addEventListener('click', async () => {
  await Tone.start()
  console.log('Audio siap')
}, { once: true })

const synth = new Tone.Synth().toDestination()

// Putar sebuah nada
synth.triggerAttackRelease('C4', '8n')

const synth = new Tone.Synth({
  oscillator: { type: 'triangle' },
  envelope: {
    attack: 0.02,
    decay: 0.2,
    sustain: 0.3,
    release: 0.4,
  },
}).toDestination()

let isInitialized = false
let softSynth = null
let subSynth = null
let noiseSynth = null
let sfxGain = null

function initSFX() {
  if (isInitialized) return
  
  // Kontrol volume utama
  sfxGain = new Tone.Gain(0.7).toDestination()
  
  // Synth lembut untuk suara melodis
  softSynth = new Tone.PolySynth(Tone.Synth, {
    maxPolyphony: 6,
    oscillator: { type: 'sine' },
    envelope: {
      attack: 0.02,
      decay: 0.2,
      sustain: 0.3,
      release: 0.4,
    },
    volume: -8,
  }).connect(sfxGain)
  
  // Sub-bass untuk benturan yang dalam
  subSynth = new Tone.Synth({
    oscillator: { type: 'sine' },
    envelope: {
      attack: 0.02,
      decay: 0.3,
      sustain: 0.1,
      release: 0.3,
    },
    volume: -8,
  }).connect(sfxGain)
  
  // Noise untuk tekstur
  noiseSynth = new Tone.NoiseSynth({
    noise: { type: 'pink' },
    envelope: {
      attack: 0.02,
      decay: 0.15,
      sustain: 0,
      release: 0.15,
    },
    volume: -20,
  }).connect(sfxGain)
  
  isInitialized = true
}

function coinCollect() {
  const now = Tone.now()
  softSynth.triggerAttackRelease('C4', '8n', now, 0.3)
  softSynth.triggerAttackRelease('E4', '8n', now + 0.1, 0.35)
  softSynth.triggerAttackRelease('G4', '4n', now + 0.2, 0.4)
}

function jump() {
  const synth = new Tone.Synth({
    oscillator: { type: 'square' },
    envelope: { attack: 0.01, decay: 0.1, sustain: 0, release: 0.1 },
  }).toDestination()
  
  const now = Tone.now()
  synth.frequency.setValueAtTime(150, now)
  synth.frequency.exponentialRampToValueAtTime(400, now + 0.1)
  synth.triggerAttackRelease('C4', '8n', now, 0.2)
}

function hit() {
  const now = Tone.now()
  subSynth.triggerAttackRelease('E2', '4n', now, 0.5)
  noiseSynth.triggerAttackRelease('4n', now, 0.25)
}

function death() {
  const now = Tone.now()
  softSynth.triggerAttackRelease('E4', '4n', now, 0.4)
  softSynth.triggerAttackRelease('C4', '4n', now + 0.2, 0.35)
  softSynth.triggerAttackRelease('A3', '4n', now + 0.4, 0.3)
}

const filter = new Tone.Filter({
  frequency: 3000,
  type: 'lowpass',
  rolloff: -12,
})

const reverb = new Tone.Reverb({
  decay: 1.2,
  wet: 0.25,
})

const gain = new Tone.Gain(0.7)

// Rangkaian: synth -> filter -> reverb -> gain -> destination
filter.connect(reverb)
reverb.connect(gain)
gain.toDestination()

const synth = new Tone.Synth().connect(filter)

const MIN_INTERVAL_MS = 35
let lastNoteTime = 0

function canPlayNote() {
  const now = performance.now()
  if (now - lastNoteTime < MIN_INTERVAL_MS) {
    return false
  }
  lastNoteTime = now
  return true
}

function playSound() {
  if (!canPlayNote()) return
  synth.triggerAttackRelease('C4', '8n')
}

const BPM = 140
const BEAT_MS = (60 / BPM) * 1000

let bassSynth = null
let kickDrum = null
let beatInterval = null
let beatCount = 0
let energy = 0.3

const PROGRESSION = [
  { root: 'E2', chord: ['E3', 'G3', 'B3'] },
  { root: 'C2', chord: ['C3', 'E3', 'G3'] },
  { root: 'D2', chord: ['D3', 'F#3', 'A3'] },
  { root: 'A1', chord: ['A2', 'C3', 'E3'] },
]

function playBeat() {
  const beatInMeasure = beatCount % 8
  const chordIndex = Math.floor(beatCount / 8) % PROGRESSION.length
  const chord = PROGRESSION[chordIndex]
  const now = Tone.now()
  
  // Bass pada ketukan pertama
  if (beatInMeasure === 0) {
    bassSynth.triggerAttackRelease(chord.root, '4n', now, 0.6)
  }
  
  // Kick drum - hanya saat energi tinggi
  if (beatInMeasure === 0 && energy > 0.3) {
    kickDrum.triggerAttackRelease('C1', '8n', now, 0.4)
  }
  
  beatCount++
}

function startMusic() {
  beatInterval = setInterval(playBeat, BEAT_MS)
}

function stopMusic() {
  clearInterval(beatInterval)
}

// Peristiwa dalam game memengaruhi energi
function onEnemyKill() {
  energy = Math.min(1, energy + 0.1)
}

// Kick drum
const kick = new Tone.MembraneSynth({
  pitchDecay: 0.05,
  octaves: 4,
  envelope: {
    attack: 0.001,
    decay: 0.2,
    sustain: 0,
    release: 0.1,
  },
  volume: -14,
}).toDestination()

kick.triggerAttackRelease('C1', '8n')

// Snare
const snare = new Tone.NoiseSynth({
  noise: { type: 'white' },
  envelope: {
    attack: 0.002,
    decay: 0.15,
    sustain: 0,
    release: 0.1,
  },
  volume: -12,
}).toDestination()

snare.triggerAttackRelease('8n')

// Hi-hat
const hihat = new Tone.NoiseSynth({
  noise: { type: 'white' },
  envelope: {
    attack: 0.001,
    decay: 0.04,
    sustain: 0,
    release: 0.03,
  },
  volume: -22,
}).toDestination()

hihat.triggerAttackRelease('32n')

function cleanup() {
  if (softSynth) softSynth.dispose()
  if (subSynth) subSynth.dispose()
  if (noiseSynth) noiseSynth.dispose()
  if (sfxGain) sfxGain.dispose()
}

Audio yang bagus dapat mengubah sebuah game. Game tanpa suara terasa tidak hidup. Web Audio API menyediakan efek suara berlatensi rendah, pemutaran musik, dan bahkan audio spasial 3D, semuanya langsung di browser.

Cobalah (klik tombol untuk mendengar suara yang disintesis):

let audioCtx = null

function initAudio() {
  if (!audioCtx) {
    audioCtx = new AudioContext()
  }
  if (audioCtx.state === 'suspended') {
    audioCtx.resume()
  }
  return audioCtx
}

// Inisialisasi pada interaksi pertama
document.addEventListener('click', () => initAudio(), { once: true })
document.addEventListener('keydown', () => initAudio(), { once: true })

async function loadSound(url) {
  const response = await fetch(url)
  const arrayBuffer = await response.arrayBuffer()
  const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer)
  return audioBuffer
}

function playSound(buffer, volume = 1) {
  const source = audioCtx.createBufferSource()
  source.buffer = buffer
  
  const gainNode = audioCtx.createGain()
  gainNode.gain.value = volume
  
  source.connect(gainNode)
  gainNode.connect(audioCtx.destination)
  
  source.start(0)
  return source
}

class SoundManager {
  constructor() {
    this.ctx = null
    this.sounds = new Map()
    this.masterGain = null
  }
  
  init() {
    this.ctx = new AudioContext()
    this.masterGain = this.ctx.createGain()
    this.masterGain.connect(this.ctx.destination)
  }
  
  async load(name, url) {
    const response = await fetch(url)
    const buffer = await this.ctx.decodeAudioData(await response.arrayBuffer())
    this.sounds.set(name, buffer)
  }
  
  play(name, volume = 1) {
    const buffer = this.sounds.get(name)
    if (!buffer) return
    
    const source = this.ctx.createBufferSource()
    source.buffer = buffer
    
    const gain = this.ctx.createGain()
    gain.gain.value = volume
    
    source.connect(gain)
    gain.connect(this.masterGain)
    source.start(0)
    
    return source
  }
  
  setMasterVolume(v) {
    this.masterGain.gain.value = v
  }
}

class MusicPlayer {
  constructor(ctx, masterGain) {
    this.ctx = ctx
    this.masterGain = masterGain
    this.currentTrack = null
    this.gain = ctx.createGain()
    this.gain.connect(masterGain)
  }
  
  play(buffer, volume = 0.5) {
    this.stop()
    
    this.currentTrack = this.ctx.createBufferSource()
    this.currentTrack.buffer = buffer
    this.currentTrack.loop = true
    this.currentTrack.connect(this.gain)
    this.gain.gain.value = volume
    this.currentTrack.start(0)
  }
  
  stop() {
    if (this.currentTrack) {
      this.currentTrack.stop()
      this.currentTrack = null
    }
  }
  
  fadeOut(duration = 1) {
    this.gain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + duration)
  }
}

function playSpatialSound(buffer, x, y, z) {
  const source = audioCtx.createBufferSource()
  source.buffer = buffer
  
  const panner = audioCtx.createPanner()
  panner.panningModel = 'HRTF'
  panner.distanceModel = 'inverse'
  panner.refDistance = 1
  panner.maxDistance = 100
  panner.positionX.value = x
  panner.positionY.value = y
  panner.positionZ.value = z
  
  source.connect(panner)
  panner.connect(audioCtx.destination)
  source.start(0)
}

function updateListener(x, y, z, fx, fy, fz) {
  const listener = audioCtx.listener
  listener.positionX.value = x
  listener.positionY.value = y
  listener.positionZ.value = z
  listener.forwardX.value = fx
  listener.forwardY.value = fy
  listener.forwardZ.value = fz
  listener.upX.value = 0
  listener.upY.value = 1
  listener.upZ.value = 0
}

class SoundPool {
  constructor(ctx, buffer, size = 8) {
    this.sources = []
    this.index = 0
    this.ctx = ctx
    this.buffer = buffer
    this.size = size
  }
  
  play(volume = 1) {
    const source = this.ctx.createBufferSource()
    source.buffer = this.buffer
    
    const gain = this.ctx.createGain()
    gain.gain.value = volume
    
    source.connect(gain)
    gain.connect(this.ctx.destination)
    source.start(0)
    
    this.index = (this.index + 1) % this.size
  }
}

const audioUrl = canPlayOgg() ? 'sound.ogg' : 'sound.mp3'

function playWithPitchVariation(buffer, variance = 0.1) {
  const source = audioCtx.createBufferSource()
  source.buffer = buffer
  source.playbackRate.value = 1 + (Math.random() - 0.5) * variance
  source.connect(audioCtx.destination)
  source.start(0)
}

function duckMusic(musicGain, duration = 0.3) {
  musicGain.gain.linearRampToValueAtTime(0.2, audioCtx.currentTime + duration)
}

function unduckMusic(musicGain, duration = 0.3) {
  musicGain.gain.linearRampToValueAtTime(1, audioCtx.currentTime + duration)
}

Web Workers memungkinkan Anda menjalankan JavaScript di thread latar belakang. Untuk game, ini berarti fisika, AI, dan generasi prosedural dapat berjalan tanpa menyebabkan penurunan frame rate.

1) Kapan harus menggunakan Workers

Cocok digunakan untuk:

• Simulasi fisika
• Pencarian jalur (A*, navmesh)
• Pengambilan keputusan AI
• Generasi prosedural
• Pemrosesan aset (manipulasi gambar, kompresi)
• Matematika kompleks (FFT, deteksi tabrakan)

Kurang ideal untuk:

• Rendering (Workers tidak dapat mengakses DOM/Canvas secara langsung)
• Tugas yang sangat kecil (overhead thread tidak sepadan)

2) Membuat Worker dasar

worker.js:

self.onmessage = (e) => {
  const { type, data } = e.data
  
  if (type === 'calculate') {
    const result = heavyCalculation(data)
    self.postMessage({ type: 'result', data: result })
  }
}

function heavyCalculation(input) {
  // Expensive work here
  return input * 2
}

main.js:

const worker = new Worker('worker.js')

worker.onmessage = (e) => {
  const { type, data } = e.data
  if (type === 'result') {
    console.log('Got result:', data)
  }
}

worker.postMessage({ type: 'calculate', data: 42 })

3) Worker inline (tanpa berkas terpisah)

function createInlineWorker(fn) {
  const blob = new Blob([`(${fn.toString()})()`], { type: 'text/javascript' })
  return new Worker(URL.createObjectURL(blob))
}

const worker = createInlineWorker(() => {
  self.onmessage = (e) => {
    const result = e.data * 2
    self.postMessage(result)
  }
})

4) Worker modul ES

Anda dapat menulis kode worker sebagai modul ES dan menggunakan import di dalamnya sebagai pengganti importScripts. Teruskan { type: 'module' } ke konstruktor:

const worker = new Worker('physics-worker.js', { type: 'module' })

Di dalam worker, Anda kemudian dapat menggunakan import untuk helper matematika, tabrakan, atau AI bersama dengan cara yang sama seperti di thread utama, sehingga logika game tidak perlu diduplikasi. Worker modul didukung di Chrome dan Edge 80+, Safari 15+, serta Firefox 114+.

5) Contoh Worker fisika

physics-worker.js:

const bodies = []
const FIXED_DT = 1 / 60

self.onmessage = (e) => {
  const { type, data } = e.data
  
  switch (type) {
    case 'init':
      initWorld(data)
      break
    case 'step':
      step()
      break
    case 'addBody':
      bodies.push(data)
      break
  }
}

function initWorld(config) {
  // Initialize physics world
}

function step() {
  // Update physics
  for (const body of bodies) {
    body.vy += 9.8 * FIXED_DT // Gravity
    body.x += body.vx * FIXED_DT
    body.y += body.vy * FIXED_DT
  }
  
  // Send positions back
  self.postMessage({
    type: 'positions',
    data: bodies.map(b => ({ id: b.id, x: b.x, y: b.y, rotation: b.rotation }))
  })
}

6) Objek transferable untuk performa

Data berukuran besar dapat ditransfer tanpa disalin:

// Main thread
const positions = new Float32Array(1000)
worker.postMessage(positions, [positions.buffer])
// positions is now unusable here (transferred)

// Worker
self.onmessage = (e) => {
  const positions = e.data
  // Work with positions
  self.postMessage(positions, [positions.buffer])
}

7) Worker pencarian jalur

pathfinding-worker.js:

let grid = null

self.onmessage = (e) => {
  const { type, data } = e.data
  
  if (type === 'setGrid') {
    grid = data
  }
  
  if (type === 'findPath') {
    const path = aStar(data.start, data.end, grid)
    self.postMessage({ type: 'path', id: data.id, path })
  }
}

function aStar(start, end, grid) {
  // A* implementation
  const openSet = [start]
  const cameFrom = new Map()
  const gScore = new Map()
  gScore.set(key(start), 0)
  
  while (openSet.length > 0) {
    // ... A* logic
  }
  
  return reconstructPath(cameFrom, end)
}

function key(pos) {
  return `${pos.x},${pos.y}`
}

8) Pool Worker untuk tugas paralel

class WorkerPool {
  constructor(workerUrl, size = navigator.hardwareConcurrency || 4) {
    this.workers = []
    this.queue = []
    this.available = []
    
    for (let i = 0; i < size; i++) {
      const worker = new Worker(workerUrl)
      worker.onmessage = (e) => this.handleResult(worker, e)
      this.workers.push(worker)
      this.available.push(worker)
    }
  }
  
  run(data) {
    return new Promise((resolve) => {
      const task = { data, resolve }
      
      if (this.available.length > 0) {
        this.dispatch(this.available.pop(), task)
      } else {
        this.queue.push(task)
      }
    })
  }
  
  dispatch(worker, task) {
    worker._currentTask = task
    worker.postMessage(task.data)
  }
  
  handleResult(worker, e) {
    const task = worker._currentTask
    task.resolve(e.data)
    
    if (this.queue.length > 0) {
      this.dispatch(worker, this.queue.shift())
    } else {
      this.available.push(worker)
    }
  }
  
  terminate() {
    this.workers.forEach(w => w.terminate())
  }
}

9) SharedArrayBuffer untuk sinkronisasi real-time

Dengan isolasi lintas origin yang diaktifkan, Anda dapat berbagi memori:

// Main thread
const shared = new SharedArrayBuffer(1024)
const positions = new Float32Array(shared)

worker.postMessage({ type: 'init', buffer: shared })

// Worker reads/writes directly to shared memory
// No postMessage overhead for position updates

10) OffscreenCanvas untuk Workers

Lakukan rendering di dalam Worker. OffscreenCanvas kini tersedia secara luas sebagai Baseline di Chrome, Edge, Firefox, dan Safari (Safari menambahkan dukungan pada versi 17.0 di macOS dan iOS):

// Main thread
const canvas = document.getElementById('game')
const offscreen = canvas.transferControlToOffscreen()
worker.postMessage({ canvas: offscreen }, [offscreen])

// Worker
self.onmessage = (e) => {
  const canvas = e.data.canvas
  const ctx = canvas.getContext('2d')
  
  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    // Draw...
    requestAnimationFrame(render)
  }
  render()
}

11) Penanganan error

worker.onerror = (e) => {
  console.error('Worker error:', e.message, e.filename, e.lineno)
}

// In worker
self.onerror = (e) => {
  self.postMessage({ type: 'error', message: e.message })
}

Terkait

• Rilis game web yang dimuat dengan cepat
• Aktifkan thread Wasm (SharedArrayBuffer)
• Game loop Canvas 2D
• Pustaka fisika game — menjalankan Rapier atau Cannon-es di dalam Worker
• Pemuatan aset secara streaming — mendekode aset di luar thread utama
• Stack teknologi game web pada 2026 — cara Workers terintegrasi ke dalam stack WebGL/WebGPU/Wasm

Sumber Daya Eksternal

• MDN: API Web Workers — referensi API lengkap
• MDN: Menggunakan Web Workers — panduan langkah demi langkah
• MDN: Objek transferable — transfer data tanpa penyalinan
• MDN: SharedArrayBuffer — memori bersama antar-thread

WebGL memberi Anda akses langsung ke GPU di browser. Teknologi ini menjadi fondasi untuk game web 3D (dan 2D berperforma tinggi). Tutorial ini membahas hal-hal pentingnya.

1) Mendapatkan konteks WebGL

const canvas = document.getElementById('game')
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl')

if (!gl) {
  // Fallback or error message
  console.error('WebGL not supported')
}

Utamakan webgl2 jika tersedia—dukungannya luas dan menawarkan fitur yang lebih baik.

2) Pipeline render (disederhanakan)

1. Shader vertex dijalankan sekali untuk setiap vertex. Shader ini menentukan posisi geometri Anda.
2. Shader fragmen dijalankan sekali untuk setiap piksel. Shader ini memberi warna pada hasil render.
3. Buffer menyimpan data (posisi, UV, warna).
4. Tekstur adalah gambar yang diambil sampelnya oleh shader.

3) Pasangan shader minimal

Shader vertex:

#version 300 es
in vec2 a_position;
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
}

Shader fragmen:

#version 300 es
precision mediump float;
out vec4 fragColor;
void main() {
  fragColor = vec4(1.0, 0.5, 0.2, 1.0); // orange
}

4) Mengompilasi dan menautkan shader

function createShader(gl, type, source) {
  const shader = gl.createShader(type)
  gl.shaderSource(shader, source)
  gl.compileShader(shader)
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(shader))
    gl.deleteShader(shader)
    return null
  }
  return shader
}

function createProgram(gl, vs, fs) {
  const program = gl.createProgram()
  gl.attachShader(program, vs)
  gl.attachShader(program, fs)
  gl.linkProgram(program)
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error(gl.getProgramInfoLog(program))
    return null
  }
  return program
}

5) Membuat buffer

const positions = new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5,
])

const buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)

6) Menghubungkan buffer ke shader

const positionLoc = gl.getAttribLocation(program, 'a_position')
gl.enableVertexAttribArray(positionLoc)
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)

7) Loop game

function render() {
  gl.viewport(0, 0, canvas.width, canvas.height)
  gl.clearColor(0, 0, 0, 1)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.useProgram(program)
  gl.drawArrays(gl.TRIANGLES, 0, 3)

  requestAnimationFrame(render)
}
render()

8) Memuat tekstur

function loadTexture(gl, url) {
  const texture = gl.createTexture()
  gl.bindTexture(gl.TEXTURE_2D, texture)

  // Placeholder pixel until image loads
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
    new Uint8Array([255, 0, 255, 255]))

  const img = new Image()
  img.onload = () => {
    gl.bindTexture(gl.TEXTURE_2D, texture)
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
    gl.generateMipmap(gl.TEXTURE_2D)
  }
  img.src = url
  return texture
}

9) Kendala umum

• Tekstur berpangkat dua tidak mutlak diperlukan di WebGL 2, tetapi mipmap bekerja lebih baik dengannya.
• Konteks hilang: tangani peristiwa webglcontextlost—browser seluler akan mengeluarkan konteks saat memori terbatas.
• Tekstur float memerlukan pemeriksaan ekstensi (EXT_color_buffer_float).

10) Kapan harus menggunakan pustaka

WebGL mentah memerlukan banyak kode. Untuk sebagian besar game, pertimbangkan:

• Three.js — 3D dengan fitur lengkap
• PixiJS — rendering 2D cepat
• PlayCanvas — mesin game dengan editor

Gunakan WebGL mentah saat Anda membutuhkan:

• kendali maksimum
• renderer khusus
• pemahaman tentang cara kerja sebenarnya

Satu catatan untuk 2026: WebGPU kini tersedia secara default di semua browser utama (Chrome dan Edge sejak versi 113, Firefox 141 di Windows dan 145 di macOS, serta Safari di iOS 26, iPadOS 26, dan macOS Tahoe 26). Dasar-dasar di sini tetap berlaku karena pustaka seperti Three.js menjalankan renderer WebGPU dengan fallback otomatis ke WebGL 2, sehingga WebGL 2 tetap menjadi standar dasar yang dapat diandalkan. Jika Anda membuat renderer baru dari nol saat ini, baca tutorial WebGPU bersama tutorial ini sebelum menetapkan pilihan API.

Terkait

• WebGPU untuk game
• Loop game Canvas 2D
• Rilis game web yang dimuat dengan cepat
• Stack Teknologi Game Web pada 2026 — kapan memilih WebGL, WebGPU, atau Wasm
• Pustaka fisika game — mesin fisika yang melakukan rendering melalui WebGL
• Perbandingan Mesin Game Web — Three.js, PixiJS, PlayCanvas, dan lainnya

Sumber Daya Eksternal

• MDN: API WebGL — referensi API lengkap
• Dasar-Dasar WebGL2 — seri tutorial WebGL2 mendalam
• The Book of Shaders — panduan interaktif untuk shader fragmen GLSL
• Dokumentasi Three.js — framework WebGL paling populer

WebGPU adalah penerus WebGL. API ini lebih rendah tingkatnya, lebih eksplisit, dan dirancang untuk GPU modern. Jika Anda memulai proyek 3D baru pada tahun 2026, WebGPU layak dipelajari.

Tutorial WebGPU: 10 proyek yang mencakup penyiapan hingga rendering 3D dengan pencahayaan dan animasi

1) Periksa dukungan browser

if (!navigator.gpu) {
  console.error('WebGPU not supported')
}

Pada tahun 2026, WebGPU tersedia di Chrome, Edge, Firefox, dan Safari.

2) Dapatkan perangkat

const adapter = await navigator.gpu.requestAdapter()
const device = await adapter.requestDevice()

Adapter merepresentasikan GPU fisik. Perangkat adalah antarmuka Anda untuk berinteraksi dengannya.

Kedua pemanggilan dapat gagal. requestAdapter() mengembalikan null ketika sistem tidak memiliki GPU yang dapat digunakan, sedangkan requestDevice() dapat ditolak, jadi tangani kemungkinan tersebut sebelum melanjutkan:

const adapter = await navigator.gpu.requestAdapter()
if (!adapter) throw new Error('No suitable GPU adapter found')
const device = await adapter.requestDevice()

Adapter juga dianggap telah digunakan setelah Anda membuat perangkat darinya, jadi minta adapter baru jika Anda memerlukan perangkat lain.

3) Konfigurasikan kanvas

const canvas = document.getElementById('game')
const context = canvas.getContext('webgpu')
const format = navigator.gpu.getPreferredCanvasFormat()

context.configure({
  device,
  format,
  alphaMode: 'premultiplied',
})

4) Tulis shader dalam WGSL

WebGPU menggunakan WGSL (WebGPU Shading Language), bukan GLSL.

@vertex
fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
  var pos = array<vec2f, 3>(
    vec2f( 0.0,  0.5),
    vec2f(-0.5, -0.5),
    vec2f( 0.5, -0.5),
  );
  return vec4f(pos[idx], 0.0, 1.0);
}

@fragment
fn fs_main() -> @location(0) vec4f {
  return vec4f(1.0, 0.5, 0.2, 1.0); // orange
}

5) Buat modul shader

const shaderModule = device.createShaderModule({
  code: wgslSource,
})

6) Buat pipeline rendering

const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: shaderModule,
    entryPoint: 'vs_main',
  },
  fragment: {
    module: shaderModule,
    entryPoint: 'fs_main',
    targets: [{ format }],
  },
})

7) Render sebuah frame

function render() {
  const commandEncoder = device.createCommandEncoder()
  const textureView = context.getCurrentTexture().createView()

  const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [{
      view: textureView,
      clearValue: { r: 0, g: 0, b: 0, a: 1 },
      loadOp: 'clear',
      storeOp: 'store',
    }],
  })

  renderPass.setPipeline(pipeline)
  renderPass.draw(3)
  renderPass.end()

  device.queue.submit([commandEncoder.finish()])
  requestAnimationFrame(render)
}
render()

8) Buffer di WebGPU

const vertices = new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5,
])

const vertexBuffer = device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
})

device.queue.writeBuffer(vertexBuffer, 0, vertices)

9) Bind group untuk uniform

const uniformBuffer = device.createBuffer({
  size: 64,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
})

const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [{
    binding: 0,
    resource: { buffer: uniformBuffer },
  }],
})

10) WebGPU vs WebGL

Kapan sebaiknya menggunakan WebGPU

• Proyek baru yang menargetkan browser modern
• Beban kerja komputasi berat (fisika, AI, generasi prosedural)
• Saat Anda memerlukan kontrol mendetail atas sumber daya GPU

Terkait

• Dasar-dasar WebGL
• Web Worker untuk logika game
• Rilis game web yang dimuat dengan cepat
• Stack Teknologi Game Web pada 2026 — kerangka pengambilan keputusan untuk WebGL vs WebGPU vs Wasm
• COOP/COEP dan SharedArrayBuffer — header yang diperlukan untuk threading Wasm dengan komputasi WebGPU

Sumber Daya Eksternal

• Spesifikasi WebGPU — spesifikasi W3C
• Spesifikasi WGSL — spesifikasi WebGPU Shading Language
• Dasar-Dasar WebGPU — seri tutorial mendalam
• Aplikasi WebGPU pertama Anda — panduan langkah demi langkah Google Codelab

Membangun game multipemain dengan WebSocket: arsitektur server, ruang permainan, dan sinkronisasi state

WebSocket memungkinkan komunikasi real-time untuk game multipemain. Tutorial ini membahas dasar-dasar di sisi klien.

1) Menghubungkan ke server

const ws = new WebSocket('wss://game-server.example.com')

ws.onopen = () => {
  console.log('Connected')
  ws.send(JSON.stringify({ type: 'join', name: 'Player1' }))
}

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  handleMessage(msg)
}

ws.onclose = () => {
  console.log('Disconnected')
}

ws.onerror = (err) => {
  console.error('WebSocket error:', err)
}

2) Desain protokol pesan

Tentukan protokol sederhana:

// Client -> Server
{ type: 'join', name: 'Player1' }
{ type: 'input', keys: { left: true, jump: true } }
{ type: 'chat', message: 'Hello!' }

// Server -> Client
{ type: 'state', players: [...], entities: [...] }
{ type: 'playerJoined', id: 'abc', name: 'Player2' }
{ type: 'playerLeft', id: 'abc' }

3) Class pengelola koneksi

class GameConnection {
  constructor(url) {
    this.url = url
    this.ws = null
    this.handlers = new Map()
    this.reconnectDelay = 1000
  }
  
  connect() {
    this.ws = new WebSocket(this.url)
    
    this.ws.onopen = () => {
      this.reconnectDelay = 1000
      this.emit('connected')
    }
    
    this.ws.onmessage = (e) => {
      const msg = JSON.parse(e.data)
      this.emit(msg.type, msg)
    }
    
    this.ws.onclose = () => {
      this.emit('disconnected')
      this.scheduleReconnect()
    }
    
    this.ws.onerror = () => {
      this.ws.close()
    }
  }
  
  scheduleReconnect() {
    setTimeout(() => {
      this.reconnectDelay = Math.min(this.reconnectDelay * 2, 30000)
      this.connect()
    }, this.reconnectDelay)
  }
  
  send(type, data = {}) {
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify({ type, ...data }))
    }
  }
  
  on(type, handler) {
    if (!this.handlers.has(type)) {
      this.handlers.set(type, [])
    }
    this.handlers.get(type).push(handler)
  }
  
  emit(type, data) {
    const handlers = this.handlers.get(type) || []
    handlers.forEach(h => h(data))
  }
  
  disconnect() {
    this.ws?.close()
  }
}

4) Mengirim input pemain

Kirim input, bukan posisi. Biarkan server menjadi sumber kebenaran:

const connection = new GameConnection('wss://server.example.com')

function sendInput(input) {
  connection.send('input', {
    left: input.left,
    right: input.right,
    jump: input.jump,
    shoot: input.shoot,
    seq: inputSequence++,
  })
}

// Send input at a fixed rate (e.g., 20 times/sec)
setInterval(() => {
  sendInput(currentInput)
}, 50)

5) Menerima state permainan

let gameState = { players: [], entities: [] }

connection.on('state', (msg) => {
  gameState = msg
})

connection.on('playerJoined', (msg) => {
  gameState.players.push({ id: msg.id, name: msg.name })
})

connection.on('playerLeft', (msg) => {
  gameState.players = gameState.players.filter(p => p.id !== msg.id)
})

6) Interpolasi untuk gerakan yang mulus

Server mengirim snapshot. Lakukan interpolasi di antaranya:

class EntityInterpolator {
  constructor() {
    this.buffer = [] // { timestamp, state }
    this.renderDelay = 100 // ms behind server
  }
  
  addSnapshot(timestamp, state) {
    this.buffer.push({ timestamp, state })
    
    // Keep only recent snapshots
    while (this.buffer.length > 10) {
      this.buffer.shift()
    }
  }
  
  getState(currentTime) {
    const renderTime = currentTime - this.renderDelay
    
    // Find surrounding snapshots
    let before = null
    let after = null
    
    for (let i = 0; i < this.buffer.length - 1; i++) {
      if (this.buffer[i].timestamp <= renderTime && 
          this.buffer[i + 1].timestamp >= renderTime) {
        before = this.buffer[i]
        after = this.buffer[i + 1]
        break
      }
    }
    
    if (!before || !after) {
      return this.buffer[this.buffer.length - 1]?.state
    }
    
    // Interpolate
    const t = (renderTime - before.timestamp) / (after.timestamp - before.timestamp)
    return this.lerp(before.state, after.state, t)
  }
  
  lerp(a, b, t) {
    return {
      x: a.x + (b.x - a.x) * t,
      y: a.y + (b.y - a.y) * t,
    }
  }
}

7) Prediksi sisi klien

Agar kontrol responsif, lakukan prediksi secara lokal dan rekonsiliasi dengan server:

class PredictedPlayer {
  constructor() {
    this.position = { x: 0, y: 0 }
    this.pendingInputs = []
  }
  
  applyInput(input) {
    // Apply input locally
    if (input.left) this.position.x -= 5
    if (input.right) this.position.x += 5
    
    // Store for reconciliation
    this.pendingInputs.push({ seq: input.seq, input })
  }
  
  reconcile(serverState, lastProcessedSeq) {
    // Server confirmed position
    this.position = { ...serverState.position }
    
    // Remove confirmed inputs
    this.pendingInputs = this.pendingInputs.filter(i => i.seq > lastProcessedSeq)
    
    // Re-apply unconfirmed inputs
    for (const pending of this.pendingInputs) {
      if (pending.input.left) this.position.x -= 5
      if (pending.input.right) this.position.x += 5
    }
  }
}

8) Menangani tampilan latensi

class LatencyMonitor {
  constructor(connection) {
    this.connection = connection
    this.pingStart = 0
    this.latency = 0
    
    connection.on('pong', () => {
      this.latency = Date.now() - this.pingStart
    })
    
    setInterval(() => this.ping(), 1000)
  }
  
  ping() {
    this.pingStart = Date.now()
    this.connection.send('ping')
  }
  
  getLatency() {
    return this.latency
  }
}

9) Pesan biner untuk efisiensi

Untuk pembaruan berfrekuensi tinggi, gunakan format biner:

// Sending binary
const buffer = new ArrayBuffer(12)
const view = new DataView(buffer)
view.setFloat32(0, player.x)
view.setFloat32(4, player.y)
view.setUint32(8, inputFlags)
ws.send(buffer)

// Receiving binary
ws.binaryType = 'arraybuffer'
ws.onmessage = (e) => {
  if (e.data instanceof ArrayBuffer) {
    const view = new DataView(e.data)
    const x = view.getFloat32(0)
    const y = view.getFloat32(4)
    // ...
  }
}

10) Contoh server dasar (Node.js)

import { WebSocketServer } from 'ws'

const wss = new WebSocketServer({ port: 8080 })
const players = new Map()

wss.on('connection', (ws) => {
  const id = crypto.randomUUID()
  players.set(id, { id, x: 0, y: 0, ws })
  
  ws.on('message', (data) => {
    const msg = JSON.parse(data)
    
    if (msg.type === 'input') {
      const player = players.get(id)
      if (msg.left) player.x -= 5
      if (msg.right) player.x += 5
    }
  })
  
  ws.on('close', () => {
    players.delete(id)
    broadcast({ type: 'playerLeft', id })
  })
})

// Broadcast state 20 times/sec
setInterval(() => {
  const state = {
    type: 'state',
    players: Array.from(players.values()).map(p => ({
      id: p.id, x: p.x, y: p.y
    }))
  }
  broadcast(state)
}, 50)

function broadcast(msg) {
  const data = JSON.stringify(msg)
  for (const player of players.values()) {
    player.ws.send(data)
  }
}

Terkait

• Rilis game web yang dimuat dengan cepat
• Penanganan input game
• Web Worker untuk logika game
• COOP/COEP dan SharedArrayBuffer — header yang diperlukan untuk SharedArrayBuffer dalam konteks multipemain
• Desain Game Kooperatif pada 2026 — alasan game kooperatif "friend slop" sedang meledak dan bagaimana multipemain browser berperan di dalamnya
• Game Jam & Hackathon — game multipemain untuk jam lebih menarik perhatian

Sumber Daya Eksternal

• MDN: API WebSocket — referensi WebSocket untuk browser
• MDN: API WebRTC — koneksi peer-to-peer untuk latensi yang lebih rendah
• MDN: API WebTransport — transportasi HTTP/3 yang lebih baru dan mencapai Baseline lintas browser pada Maret 2026 setelah Safari 26.4 menyediakan dukungan (sebelumnya sudah tersedia di Chrome 97+, Edge, dan Firefox 114+). Tidak seperti satu WebSocket berbasis TCP, WebTransport berjalan di atas QUIC serta menawarkan datagram yang tidak andal dan beberapa stream independen, sehingga satu paket yang hilang tidak menyebabkan head-of-line blocking pada semua hal lainnya. Pola yang umum adalah mengirim pembaruan posisi berfrekuensi tinggi melalui datagram, sementara chat atau papan skor tetap menggunakan stream yang andal. WebSocket masih menjadi pilihan yang paling kompatibel dan semua pembahasan di atas tetap berlaku, tetapi WebTransport kini layak dipertimbangkan untuk game yang sensitif terhadap latensi.
• Dokumentasi Socket.IO — pustaka wrapper WebSocket populer
• Valve Source Multiplayer Networking — pola jaringan otoritatif yang digunakan dalam game produksi

WebXR menghadirkan VR dan AR ke browser. Pemain dapat menikmati game Anda melalui headset tanpa perlu mengunduh apa pun.

1) Periksa dukungan WebXR

async function checkXRSupport() {
  if (!navigator.xr) {
    return { vr: false, ar: false }
  }
  
  const vr = await navigator.xr.isSessionSupported('immersive-vr')
  const ar = await navigator.xr.isSessionSupported('immersive-ar')
  
  return { vr, ar }
}

// Usage
const support = await checkXRSupport()
if (support.vr) {
  showVRButton()
}

2) Memulai sesi VR

let xrSession = null
let xrRefSpace = null

async function startVR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-vr', {
      requiredFeatures: ['local-floor'],
      optionalFeatures: ['hand-tracking'],
    })
    
    xrSession.addEventListener('end', onSessionEnd)
    
    // Set up rendering
    const gl = canvas.getContext('webgl2', { xrCompatible: true })
    await xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, gl),
    })
    
    // Get reference space
    xrRefSpace = await xrSession.requestReferenceSpace('local-floor')
    
    // Start render loop
    xrSession.requestAnimationFrame(onXRFrame)
  } catch (err) {
    console.error('Failed to start VR:', err)
  }
}

function onSessionEnd() {
  xrSession = null
  xrRefSpace = null
}

3) Loop rendering XR

function onXRFrame(time, frame) {
  const session = frame.session
  session.requestAnimationFrame(onXRFrame)
  
  const pose = frame.getViewerPose(xrRefSpace)
  if (!pose) return
  
  const glLayer = session.renderState.baseLayer
  gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer)
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
  
  // Render for each eye
  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view)
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height)
    
    // Get camera matrices
    const viewMatrix = view.transform.inverse.matrix
    const projectionMatrix = view.projectionMatrix
    
    // Render scene with these matrices
    renderScene(viewMatrix, projectionMatrix)
  }
}

4) Sumber input (pengontrol)

xrSession.addEventListener('inputsourceschange', (e) => {
  for (const source of e.added) {
    console.log('Controller added:', source.handedness) // 'left' or 'right'
  }
  for (const source of e.removed) {
    console.log('Controller removed:', source.handedness)
  }
})

function processInput(frame) {
  for (const source of xrSession.inputSources) {
    if (!source.gamepad) continue
    
    const gamepad = source.gamepad
    
    // Trigger (usually index 0)
    const triggerPressed = gamepad.buttons[0]?.pressed
    const triggerValue = gamepad.buttons[0]?.value || 0
    
    // Grip (usually index 1)
    const gripPressed = gamepad.buttons[1]?.pressed
    
    // Thumbstick
    const thumbstickX = gamepad.axes[2] || 0
    const thumbstickY = gamepad.axes[3] || 0
    
    // A/B buttons (index 4, 5)
    const buttonA = gamepad.buttons[4]?.pressed
    const buttonB = gamepad.buttons[5]?.pressed
  }
}

Jangan berasumsi setiap perangkat memiliki gamepad

Kode di atas membaca source.gamepad untuk trigger dan thumbstick. Cara ini berfungsi pada headset dengan pengontrol seperti Meta Quest, tetapi tidak melakukan apa pun di Apple Vision Pro (WebXR diaktifkan secara default di Safari pada visionOS 2), Samsung Galaxy XR, dan perangkat Android XR lainnya yang menggunakan tatapan-dan-cubitan atau pelacakan tangan sebagai input utama. Pada headset tersebut, source.gamepad bernilai null dan session.inputSources tetap kosong sampai pengguna benar-benar melakukan gerakan mencubit.

Untuk satu interaksi yang dijamin tersedia di setiap perangkat, yaitu "tindakan utama", dengarkan event select alih-alih memeriksa tombol secara terus-menerus. WebXR mengirimkan selectstart, select, dan selectend baik untuk trigger pengontrol, cubitan tangan, maupun tatapan-dan-cubitan Vision Pro, sehingga satu handler dapat menangani semuanya:

xrSession.addEventListener('selectstart', (e) => {
  // e.inputSource is the controller, hand, or transient pinch
  // e.frame lets you read its targetRaySpace pose
})
xrSession.addEventListener('select', (e) => {
  // primary action completed (trigger pulled, pinch released on target)
})
xrSession.addEventListener('selectend', (e) => {})

Pertahankan kode gamepad untuk pergerakan dengan thumbstick dan tombol tambahan pada headset dengan pengontrol, tetapi lindungi kode tersebut dengan if (source.gamepad) dan arahkan interaksi inti "pilih/pegang/aktifkan" melalui event ini agar game tetap berfungsi pada perangkat yang dikendalikan dengan tangan dan tatapan.

5) Posisi pengontrol

function getControllerPose(frame, source) {
  if (!source.gripSpace) return null
  
  const pose = frame.getPose(source.gripSpace, xrRefSpace)
  if (!pose) return null
  
  return {
    position: pose.transform.position,
    orientation: pose.transform.orientation,
    matrix: pose.transform.matrix,
  }
}

function renderControllers(frame) {
  for (const source of xrSession.inputSources) {
    const pose = getControllerPose(frame, source)
    if (pose) {
      renderControllerModel(pose, source.handedness)
    }
  }
}

6) Ray casting untuk menunjuk

function getControllerRay(frame, source) {
  if (!source.targetRaySpace) return null
  
  const pose = frame.getPose(source.targetRaySpace, xrRefSpace)
  if (!pose) return null
  
  const origin = pose.transform.position
  const direction = {
    x: -pose.transform.matrix[8],
    y: -pose.transform.matrix[9],
    z: -pose.transform.matrix[10],
  }
  
  return { origin, direction }
}

function checkRayIntersection(ray, objects) {
  let closest = null
  let closestDist = Infinity
  
  for (const obj of objects) {
    const dist = rayIntersectBox(ray, obj.boundingBox)
    if (dist !== null && dist < closestDist) {
      closest = obj
      closestDist = dist
    }
  }
  
  return closest
}

7) Pergerakan teleportasi

class TeleportSystem {
  constructor() {
    this.targetPosition = null
    this.isAiming = false
  }
  
  update(frame, inputSources) {
    for (const source of inputSources) {
      if (source.handedness !== 'left') continue
      
      const gamepad = source.gamepad
      const thumbstickY = gamepad?.axes[3] || 0
      
      if (thumbstickY < -0.5) {
        // Aiming
        this.isAiming = true
        const ray = getControllerRay(frame, source)
        this.targetPosition = this.findTeleportTarget(ray)
      } else if (this.isAiming) {
        // Release - teleport
        if (this.targetPosition) {
          player.position.x = this.targetPosition.x
          player.position.z = this.targetPosition.z
        }
        this.isAiming = false
        this.targetPosition = null
      }
    }
  }
  
  findTeleportTarget(ray) {
    // Intersect with ground plane
    if (ray.direction.y >= 0) return null
    
    const t = -ray.origin.y / ray.direction.y
    if (t < 0 || t > 10) return null
    
    return {
      x: ray.origin.x + ray.direction.x * t,
      y: 0,
      z: ray.origin.z + ray.direction.z * t,
    }
  }
  
  render() {
    if (this.isAiming && this.targetPosition) {
      renderTeleportMarker(this.targetPosition)
    }
  }
}

8) Pergerakan mulus

function updateSmoothLocomotion(frame, inputSources, dt) {
  for (const source of inputSources) {
    if (source.handedness !== 'left') continue
    
    const gamepad = source.gamepad
    if (!gamepad) continue
    
    const moveX = gamepad.axes[2] || 0
    const moveY = gamepad.axes[3] || 0
    
    // Apply deadzone
    if (Math.abs(moveX) < 0.1) moveX = 0
    if (Math.abs(moveY) < 0.1) moveY = 0
    
    // Get head direction for movement
    const pose = frame.getViewerPose(xrRefSpace)
    if (!pose) continue
    
    const headMatrix = pose.transform.matrix
    const forward = { x: -headMatrix[8], z: -headMatrix[10] }
    const right = { x: headMatrix[0], z: headMatrix[2] }
    
    // Normalize to XZ plane
    const len = Math.sqrt(forward.x ** 2 + forward.z ** 2)
    forward.x /= len
    forward.z /= len
    
    const speed = 3 * dt
    player.position.x += (forward.x * -moveY + right.x * moveX) * speed
    player.position.z += (forward.z * -moveY + right.z * moveX) * speed
  }
}

9) Panduan kenyamanan VR

// Vignette during movement to reduce motion sickness
function renderComfortVignette(movementSpeed) {
  const intensity = Math.min(movementSpeed / 5, 0.5)
  if (intensity < 0.1) return
  
  // Render dark edges that increase with speed
  renderVignette(intensity)
}

// Snap turning
let snapTurnCooldown = 0

function handleSnapTurn(gamepad, dt) {
  snapTurnCooldown -= dt
  
  const thumbstickX = gamepad.axes[2] || 0
  
  if (Math.abs(thumbstickX) > 0.7 && snapTurnCooldown <= 0) {
    const angle = Math.sign(thumbstickX) * (Math.PI / 4) // 45 degrees
    player.rotation += angle
    snapTurnCooldown = 0.3 // Prevent rapid turns
  }
}

10) Penyiapan WebXR lengkap

class VRGame {
  constructor(canvas) {
    this.canvas = canvas
    this.gl = canvas.getContext('webgl2', { xrCompatible: true })
    this.session = null
    this.refSpace = null
    this.teleport = new TeleportSystem()
  }
  
  async checkSupport() {
    if (!navigator.xr) return false
    return await navigator.xr.isSessionSupported('immersive-vr')
  }
  
  async start() {
    this.session = await navigator.xr.requestSession('immersive-vr', {
      requiredFeatures: ['local-floor'],
    })
    
    await this.session.updateRenderState({
      baseLayer: new XRWebGLLayer(this.session, this.gl),
    })
    
    this.refSpace = await this.session.requestReferenceSpace('local-floor')
    this.session.addEventListener('end', () => this.onEnd())
    this.session.requestAnimationFrame((t, f) => this.onFrame(t, f))
  }
  
  onFrame(time, frame) {
    this.session.requestAnimationFrame((t, f) => this.onFrame(t, f))
    
    const dt = (time - this.lastTime) / 1000
    this.lastTime = time
    
    // Update game logic
    this.teleport.update(frame, this.session.inputSources)
    
    // Render
    const pose = frame.getViewerPose(this.refSpace)
    if (!pose) return
    
    const glLayer = this.session.renderState.baseLayer
    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, glLayer.framebuffer)
    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT)
    
    for (const view of pose.views) {
      const vp = glLayer.getViewport(view)
      this.gl.viewport(vp.x, vp.y, vp.width, vp.height)
      this.render(view.transform.inverse.matrix, view.projectionMatrix)
    }
    
    this.teleport.render()
  }
  
  render(viewMatrix, projectionMatrix) {
    // Your rendering code here
  }
  
  onEnd() {
    this.session = null
  }
}

Terkait

• Dasar-dasar WebGL
• Memulai dengan WebGPU
• Penanganan input game
• Tumpukan teknologi game web pada 2026 — posisi WebXR dalam lanskap teknologi yang lebih luas
• Three.js + USDC di browser — memuat aset 3D untuk adegan XR

Sumber Daya Eksternal

• MDN: WebXR Device API — referensi API lengkap
• Immersive Web — contoh WebXR, alat, dan tabel dukungan browser
• Panduan WebXR Three.js — konten VR dengan Three.js