Yapay zekâ kodlama asistanları, basit otomatik tamamlamadan plan yapabilen, birden fazla dosyayı düzenleyebilen, testleri çalıştırabilen ve pull request oluşturabilen otonom ajanlara dönüştü. Bu eğitimde üç önemli aracı ele alacağız: Claude Code, Cursor ve GitHub Copilot.

1) Bir aracı "ajan tabanlı" yapan nedir?

Geleneksel yapay zekâ kod tamamlama araçları, sonraki birkaç satırı önerir. Ajan tabanlı araçlar ise daha ileri gider:

Ajan tabanlı araçlar projenizin tüm yapısını anlayabilir, birden fazla dosyaya yayılan değişiklikleri planlayabilir, bu değişiklikleri uygulayabilir, testleri çalıştırabilir ve görev tamamlanana kadar yineleme yapabilir.

2) Hızlı karşılaştırma: Claude Code, Cursor ve Copilot

3) Claude Code'un temelleri

Claude Code, geniş bağlam pencerelerine sahip Opus 4.8 (güncel varsayılan modeli) üzerinde çalışır. Kurulum ve kimlik doğrulama:

# Claude Code'u yükleyin (yerel yükleyici, önerilen)
curl -fsSL https://claude.ai/install.sh | bash

# Ya da npm aracılığıyla (Node 18+ gerekir)
npm install -g @anthropic-ai/claude-code

# Kimlik doğrulama: claude'u çalıştırın ve tarayıcıdaki istemi izleyin
claude

# Projenizde başlatın
cd your-project
claude

Temel komutlar

# Kod tabanınız hakkında soru sorun
claude "Kimlik doğrulama burada nasıl uygulanmış?"

# Kod oluşturun
claude "Bir hız sınırlayıcı ara yazılımı ekle"

# Çoklu dosya yeniden düzenlemesi
claude "Kod tabanının tamamında UserService adını AuthService olarak değiştir"

# PR oluşturun
claude "Tüm API uç noktalarına girdi doğrulaması ekleyen bir PR oluştur"

Proje yapılandırması

Proje bağlamını deponuzun kökündeki bir CLAUDE.md dosyasına yerleştirin. Claude Code, her oturumun başında bu dosyayı otomatik olarak okur:

# Proje notları

- Dil: TypeScript, Prettier ile biçimlendirilir
- Testler: Vitest, tests/ içinde
- node_modules/ veya dist/ dizinlerine dokunma

Makine tarafından okunabilen ayarlar (araç izinleri, ortam değişkenleri, kancalar) .claude/settings.json dosyasına yazılır. Örneğin, yıkıcı araçlar çalıştırılmadan önce onay istemek için izinleri burada yapılandırın.

Bellek ve bağlam

Kalıcı proje bağlamı, Claude Code'un her oturumun başında yüklediği CLAUDE.md dosyalarında ve düzeltmeleriniz ile tercihlerinize göre Claude'un kendisinin güncellediği otomatik bellek deposunda tutulur. Kalıcı bağlam sağlamak için tek seferlik bir "Hatırla:" istemi vermek yerine CLAUDE.md dosyasını düzenleyin:

# CLAUDE.md
Bu bir monorepo'dur. Paylaşılan kod packages/ içinde bulunur.

Çalışma bağlamını sıfırlamak için oturum içinde /clear komutunu kullanın.

4) Cursor IDE'nin ajan tabanlı özellikleri

Cursor, ajan tabanlı iş akışları etrafında oluşturulmuştur. Temel özellikler:

Ajan modu

Composer'ı Ajan modunda açmak için Cmd+Shift+I (Mac) veya Ctrl+Shift+I (Windows/Linux) tuşlarına basın:

Ajan modu iş akışı:
1. Görevinizi açıklayın
2. Ajan bir plan oluşturur
3. Onaylar veya değiştirirsiniz
4. Ajan değişiklikleri uygular
5. İnceleyip yineleme yaparsınız

Plan modu

Karmaşık görevlerde Plan modunu açıkça kullanın:

@plan Şunlarla kullanıcı kimlik doğrulaması ekle:
- JWT belirteçleri
- Yenileme belirteci rotasyonu
- bcrypt ile parola karma işlemi
- Oturum açma denemelerinde hız sınırlama

Ajan şunları yapar:

1. Mevcut kodunuzu inceler
2. Ayrıntılı bir uygulama planı oluşturur
3. Onayınızı bekler
4. Planı adım adım uygular

Bağlam ekleme

Belirli bir bağlam eklemek için @ kullanın:

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

Bu kalıpları izleyen JWT doğrulama ara yazılımını uygula

Paralel ajanlar

Farklı dallarda birden fazla ajanı eşzamanlı olarak çalıştırın:

# Cursor'da:
1. Komut Paleti'ni açın
2. "Cursor: New Agent in Worktree"
3. Her ajan yalıtılmış olarak çalışır
4. Sonuçları yan yana karşılaştırın

Cursor 3, yerel çalışma kopyaları, git worktree'leri ve bulut ortamlarında birden fazla ajanı paralel olarak çalıştıran bir Agents Window ekledi (açmak için Cmd+Shift+P tuşlarına basıp "Agents Window" yazın). /worktree komutu her ajanı kendine ait yalıtılmış bir git worktree'sinde başlatır; /best-of-n ise aynı görevi birkaç modelde çalıştırarak çıktıları yan yana karşılaştırmanızı sağlar.

Tutarlılık kuralları

.cursor/rules/project.mdc dosyasını oluşturun:

# Proje Kuralları

## Kod Stili
- TypeScript katı modunu kullan
- Fonksiyonel bileşenleri tercih et
- Varsayılan dışa aktarımlar yerine adlandırılmış dışa aktarımları kullan

## Test
- Her özellik için test gerekir
- describe/it bloklarını kullan
- Harici servisleri taklit et

## Güvenlik
- Gizli bilgileri asla commit etme
- Tüm kullanıcı girdilerini doğrula
- Parametreli sorgular kullan

5) GitHub Copilot'ın ajan tabanlı özellikleri

Copilot, otomatik tamamlamanın ötesine geçti:

Copilot Chat

Sohbet panelini açın ve eğik çizgi komutlarını kullanın:

/explain - Seçili kodu açıkla
/fix - Seçimdeki sorunları düzelt
/tests - Testler oluştur
/doc - Dokümantasyon ekle

Kodlama ajanı (issue'dan pull request'e)

# GitHub'da:
1. Bir GitHub issue'su açın
2. Atanan kişi olarak "Copilot"ı seçin
3. Kodlama ajanı arka planda çalışır:
   issue'yu analiz eder, dosyaları düzenler, testleri çalıştırır
4. İncelemeniz için bir pull request açar

Bu özellik, VS Code veya JetBrains içinde sizinle eşzamanlı çalışan Copilot'ın IDE içi ajan modundan farklıdır.

Copilot artık otonom çalışmasını ikiye ayırıyor: ajan modu IDE'nizin (VS Code ve JetBrains) içinde eşzamanlı çalışarak hangi dosyaların düzenleneceğine karar verir, terminal komutlarını çalıştırır ve hatalar üzerinde yineleme yapar; kodlama ajanı ise bulutta eşzamansız çalışarak kendisine atanan bir issue'yu ele alır ve siz başka bir şey üzerinde çalışırken bir pull request teslim eder.

Bağlama dayalı satır içi öneriler

Copilot kod tabanınızı okur. Yorumlarla ona yardımcı olun:

// Şunları yapan kimlik doğrulama ara yazılımı:
// - Authorization başlığından JWT'yi çıkarır
// - Belirteç imzasını doğrular
// - Kullanıcıyı isteğe ekler
// - Geçersizse 401 döndürür
export function authMiddleware(req, res, next) {
  // Copilot uygulamayı oluşturur
}

6) Tüm araçlar için en iyi uygulamalar

Açık istemler yazın

❌ Kötü: "Hatayı düzelt"

✅ İyi: "Kullanıcı mevcut olmadığında UserService.getById içindeki 
null işaretçi istisnasını düzelt. İstisna fırlatmak yerine null döndür."

❌ Kötü: "Test ekle"

✅ İyi: "CartService için şu durumları kapsayan birim testleri ekle:
- Boş sepete ürün ekleme
- Ürünleri kaldırma
- İndirimlerle toplamları hesaplama
- Uç durum: negatif miktarlar"

Karmaşık görevlerde plan modunu kullanın

3 veya daha fazla dosyaya dokunan her görevde daima:

1. Önce bir plan isteyin
2. Planı inceleyin
3. Onaylayın veya değiştirin
4. Ajanın uygulamasına izin verin
5. Commit etmeden önce değişiklikleri inceleyin

Mimari bağlam sağlayın

Büyük bir çalışmadan önce ajanı bilgilendirin:

"Bu bir mikroservis mimarisidir:
- api-gateway: İstekleri yönlendirir
- auth-service: JWT, oturumlar
- user-service: Kullanıcı CRUD işlemleri
- notification-service: E-posta, anlık bildirim

Servisler Redis pub/sub aracılığıyla iletişim kurar.
Veritabanı, Prisma ORM kullanan PostgreSQL'dir."

Ajanlarla test güdümlü geliştirme

1. Önce başarısız olacak testi yazın:
   "E-posta doğrulaması bekleyen bir kullanıcı kaydı testi yaz"

2. Ajanın başarısız testi görmesini sağlayın:
   "Bu testi geçecek şekilde kayıt işlemini uygula"

3. Tüm testler geçene kadar yineleyin:
   "Kalan test hatalarını düzelt"

7) Güvenlik değerlendirmeleri

Ajan tabanlı araçların gerçek yetkileri vardır. Sınırlar belirleyin:

Onay geçitleri

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

Korumalı alan kullanımı

# Ajanları yalıtılmış ortamlarda çalıştırın
docker run -v $(pwd):/workspace -it claude-sandbox

# Ya da yalıtım için git worktree'lerini kullanın
git worktree add ../feature-branch feature-branch

Hassas dosyalar

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

Tüm değişiklikleri inceleyin

# Ajan değişikliklerini kabul etmeden önce:
git diff --stat
git diff

# Etkileşimli hazırlama kullanın
git add -p

# İnceleme olmadan asla otomatik birleştirme yapmayın

8) İşe yarayan iş akışı kalıpları

Kalıp 1: Keşfet, Planla, Uygula

Oturum 1: "Ödeme sistemi nasıl çalışıyor?"
          → Ajan araştırır, siz öğrenirsiniz

Oturum 2: "Stripe eklemek için neler gerekir?"
          → Ajan plan oluşturur

Oturum 3: "Stripe entegrasyonunu uygula"
          → Ajan planı uygular

Kalıp 2: Paralel keşif

# Paralel ajanlarla Cursor'da:

Ajan 1: "Redis ile önbelleğe alma uygula"
Ajan 2: "Memcached ile önbelleğe alma uygula"
Ajan 3: "Bellek içi LRU ile önbelleğe alma uygula"

→ Uygulamaları karşılaştırın, en iyi yaklaşımı seçin

Kalıp 3: Aşamalı geçiş

Adım 1: "Kullanımdan kaldırılmış API'nin tüm kullanımlarını belirle"
Adım 2: "Yeni API için bağdaştırıcı oluştur"
Adım 3: "A modülünü bağdaştırıcıyı kullanacak şekilde taşı"
Adım 4: "B modülünü taşı..."
...
Adım N: "Bağdaştırıcıyı kaldır, yeni API'yi doğrudan kullan"

Kalıp 4: Önce test yaklaşımıyla özellik geliştirme

1. "Kullanıcı profili düzenleme için kabul testleri yaz"
2. "Profil doğrulaması için birim testleri yaz"
3. "Testleri geçecek şekilde uygula"
4. "Entegrasyon testleri ekle"
5. "Anlaşılırlık için yeniden düzenle"

9) Hangi araç ne zaman kullanılmalı?

10) Etkinliği ölçme

Ajan tabanlı araçları değerlendirmek için şu metrikleri izleyin:

const metrics = {
  // Verimlilik
  suggestionsAccepted: 'sakladığınız önerilerin yüzdesi',
  timeToFeature: 'başlangıçtan birleştirilmiş PR aşamasına kadar geçen saat',
  linesPerHour: 'kod üretim hızı (dikkatli kullanın)',
  
  // Kalite
  bugsIntroduced: 'yapay zekâ tarafından oluşturulan koda kadar izlenen kusurlar',
  testCoverage: 'yapay zekâ tarafından oluşturulan kodun kapsamı',
  reviewChanges: 'yapay zekâ önerilerini ne ölçüde değiştirdiğiniz',
  
  // Maliyet
  apiCosts: 'yapay zekâ araçlarına yapılan aylık harcama',
  creditsUsed: 'tüketilen Cursor kredileri',
  
  // Öğrenme
  newPatternsLearned: 'yapay zekâdan öğrendiğiniz teknikler',
  codebaseUnderstanding: 'yapay zekânın öğrenmenize ne kadar yardımcı olduğu',
}

11) Yaygın hatalar

Ajana aşırı güvenmek

❌ Büyük değişiklikleri incelemeden kabul etmek
❌ Ajanların yıkıcı komutlar çalıştırmasına izin vermek
❌ Yayınlamadan önce kodu anlamamak

✅ Her değişikliği inceleyin
✅ Yayınladığınız şeyi anlayın
✅ Ajanları yerinize geçen araçlar değil, iş arkadaşları olarak kullanın

Bağlam kirliliği

❌ Alakasız bağlam içeren devasa istemler
❌ Birbiriyle ilgisiz görevler arasında bağlamı temizlememek
❌ Oluşturulan dosyaları bağlama dahil etmek

✅ İstemleri odaklı tutun
✅ Belirli @file referansları kullanın
✅ Derleme çıktılarını hariç tutun

İstem belirsizliği

❌ "Daha iyi yap"
❌ "Sorunları düzelt"
❌ "Birkaç test ekle"

✅ "Zaman karmaşıklığını O(n²)'den O(n log n)'ye düşür"
✅ "45. satırdaki null durumunu erken dönüş yaparak ele al"
✅ "Uç durumlar için testler ekle: boş girdi, maksimum uzunluk, unicode"

12) Başlangıç kontrol listesi

## Kurulum Kontrol Listesi

### Claude Code
- [ ] CLI'yi yükleyin: `npm install -g @anthropic/claude-code`
- [ ] Kimlik doğrulaması yapın: `claude login`
- [ ] `.claude/config.json` oluşturun
- [ ] Hassas dosyalar için `.claudeignore` ekleyin

### Cursor
- [ ] cursor.com adresinden indirin
- [ ] VS Code ayarlarını içe aktarın
- [ ] `.cursor/rules/` dizinini yapılandırın
- [ ] Ajan modu için `Cmd+Shift+I` kısayolunu öğrenin

### GitHub Copilot
- [ ] Uzantıyı IDE'nize yükleyin
- [ ] Copilot Chat'i etkinleştirin
- [ ] Issue'lar için Copilot Workspace'i deneyin
- [ ] `.github/copilot-instructions.md` dosyasını yapılandırın

### Tüm Araçlar
- [ ] Yıkıcı işlemler için onay geçitleri ayarlayın
- [ ] Gizli bilgiler için yok sayma dosyaları oluşturun
- [ ] İnceleme iş akışı oluşturun
- [ ] İlk günden itibaren metrikleri izleyin

İlgili içerikler

• Hızlı yüklenen bir web oyunu yayınlayın
• Oyun mantığı için Web Worker'lar
• Game Jam'ler ve Hackathon'lar — Yapay zekâ kod araçları, 48 saatlik bir jam'de yapılabilecekleri değiştiriyor
• Web Oyunu Motorları Karşılaştırması — yapay zekâ destekli iş akışlarıyla iyi çalışan bir motor seçme

Analizler, oyuncuların neler yaptığını, nerelerde zorlandığını ve onları oyuna bağlı tutan unsurları anlamanıza yardımcı olur. Bu eğitimde neleri ve nasıl izlemeniz gerektiğini öğreneceksiniz.

1) Neler izlenmeli?

Etkileşim metrikleri:

• Oturum başlangıçları ve süreleri
• Başlatılan ve tamamlanan seviyeler
• Kullanılan özellikler
• Oyuncu tutma oranı (geri dönüş ziyaretleri)

Performans metrikleri:

• Yükleme süresi
• Kare hızı
• Bellek kullanımı
• Hatalar ve çökmeler

Dönüşüm metrikleri:

• Eğitimi tamamlama
• İlk satın alma
• Sosyal medya paylaşımları

2) Basit etkinlik izleme

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) Oturum izleme

// 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) Oyuna özgü etkinlikler

// 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) Performans izleme

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)

Takılmaların nedenini Long Animation Frames ile belirleyin

Yukarıdaki FPS sayacı, karelerin ne zaman düştüğünü gösterir ancak neden düştüğünü göstermez. Chrome ve Edge 123 ile kullanıma sunulan Long Animation Frames API (LoAF), bu boşluğu doldurur. 50 ms'den uzun süren tüm kareleri işaretler ve gecikmeye hangi betiklerin neden olduğunu ayrıntılı olarak gösterir; böylece tahmin yürütmek yerine takılmaları belirli kodlarla ilişkilendirebilirsiniz.

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 })
}

LoAF şimdilik yalnızca Chromium tabanlı tarayıcılarda kullanılabilir (Firefox veya Safari'de yoktur). Bu nedenle kullanmadan önce özellik algılaması yapın ve tarayıcılar arası temel ölçümünüz olarak FPS sayacını kullanmaya devam edin.

6) Hata izleme

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) Yükleme süresini izleme

// 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) Huni izleme

Oyuncuların önemli akışlardaki ilerlemesini izleyin:

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) A/B testi desteği

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) Gizlilikle ilgili hususlar

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>Oyunu geliştirmek için analiz verileri kullanıyoruz. Bunu kabul ediyor musunuz?</p>
    <button id="accept">Kabul Et</button>
    <button id="decline">Reddet</button>
  `
  document.body.appendChild(dialog)
  
  dialog.querySelector('#accept').onclick = () => {
    analytics.setConsent(true)
    dialog.remove()
  }
  
  dialog.querySelector('#decline').onclick = () => {
    analytics.setConsent(false)
    dialog.remove()
  }
}

Üçüncü taraf alternatifleri

Kendi sisteminizi geliştirmek istemiyorsanız:

• Plausible — Gizlilik odaklı ve basit
• Amplitude — Ürün analizi ve huniler
• Mixpanel — Etkinlik izleme ve kullanıcı yolculukları
• Sentry — Özellikle hata izleme

// 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' } })

İlgili içerikler

• Hızlı yüklenen bir web oyunu yayınlayın
• IndexedDB ile oyun kayıtları
• İçerik üreticileri için
• Oyununuzu itch.io'da nasıl yayınlarsınız? — itch.io analizleri ve indirme takibi
• Steam Next Fest stratejisi — istek listelerini ve demo dönüşüm oranlarını ölçme

Harici kaynaklar

• Plausible Analytics — gizlilik dostu, hafif bir analiz aracı
• PostHog — etkinlik izleme özellikli açık kaynaklı ürün analizi
• Sentry — web uygulamaları için hata izleme ve çökme raporlama

Oyun döngüsü, oyununuzun kalbidir. Sürekli çalışarak oyun durumunu günceller ve tarayıcının izin verdiği hızda kareleri çizer. Bunu doğru kurarsanız geri kalan her şey kolaylaşır. Yanlış kurarsanız yalnızca belirli cihazlarda ortaya çıkan hataların peşinden koşarsınız.

Deneyin (ok tuşlarını veya WASD'yi kullanın):

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

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

function update() {
  // Oyun mantığı buraya
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // Çizim işlemleri buraya
}

gameLoop()

let lastTime = 0

function gameLoop(currentTime) {
  const dt = (currentTime - lastTime) / 1000 // saniyeye dönüştür
  lastTime = currentTime
  
  update(dt)
  render()
  
  requestAnimationFrame(gameLoop)
}

function update(dt) {
  player.x += player.speed * dt // artık her kare hızında çalışır
}

requestAnimationFrame(gameLoop)

const FIXED_DT = 1 / 60 // saniyede 60 fizik güncellemesi
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
  
  // Sınırlar içinde tut
  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)
}

// Girdi işleme
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)

// update içinde:
playerWalk.update(dt)

// render içinde:
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
}

// update içinde:
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)
  
  // Dünyayı çiz
  drawWorld()
  drawEntities()
  
  ctx.restore()
  
  // Arayüzü çiz (kameradan etkilenmez)
  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('DURAKLATILDI', canvas.width / 2, canvas.height / 2)
}

Web oyununuz (veya oyun motoru çıktınız) WebAssembly iş parçacıkları kullanıyorsa çoğunlukla SharedArrayBuffer özelliğine ihtiyaç duyar. Modern tarayıcılar bunun için kaynaklar arası yalıtım gerektirir.

1) Hızlı kontrol: Yalıtılmış durumda mısınız?

Geliştirici Araçları’nı açın ve şunu çalıştırın:

self.crossOriginIsolated

Sonuç true ise SharedArrayBuffer için doğru güvenlik durumundasınız.

Resmî referans:

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

2) İhtiyacınız olan iki başlık

HTML yanıtınızda (ve genellikle uygulamanızın tamamında) şu yanıt başlıklarını sunun:

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

Resmî referanslar:

• 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) “Hâlâ çalışmamasının” bir numaralı nedeni: alt kaynaklar

COEP: require-corp kullanıldığında sayfanız artık farklı kaynaklardan gelen içerikleri serbestçe gömemez.

Farklı bir kaynaktan betik, görsel, worker, video vb. yüklüyorsanız bu kaynağın aşağıdakilerden biri aracılığıyla açıkça izin vermesi gerekir:

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

Resmî referans:

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

4) Kopyala/yapıştır yapılandırmaları

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) Hata ayıklama kontrol listesi

• Ağ panelindeki belge yanıtında başlıkların bulunduğunu doğrulayın.
• self.crossOriginIsolated değerini kontrol edin.
• Engellenen istekleri arayın (Geliştirici Araçları’ndaki yaygın mesajlardan biri “blocked … by COEP” ifadesini içerir).
• CORS/CORP desteği sunmayan üçüncü taraf betiklerini kaldırın veya kendi sunucunuzda barındırın.

İlgili içerikler

• Hızlı yüklenen bir web oyunu yayınlayın
• 2026’da web oyunları için teknoloji yığını
• Oyun mantığı için Web Worker’lar — SharedArrayBuffer’dan yararlanan Worker’ları kullanma
• WebSocket ile çok oyunculu oyunların temelleri — kaynaklar arası yalıtıma ihtiyaç duyan çok oyunculu oyunlar
• Oyunları iframe ile gömme — COOP/COEP başlıklarının iframe ile gömülen içerikleri nasıl etkilediği

Harici kaynaklar

• MDN: Cross-Origin-Opener-Policy — COOP başlığı referansı
• MDN: Cross-Origin-Embedder-Policy — COEP başlığı referansı
• web.dev: Web sitenizi kaynaklar arası yalıtılmış hâle getirme — pratik dağıtım rehberi

İyi bir girdi sistemi, bir oyunu başarıya da başarısızlığa da götürebilir. Gecikmeli kontroller, algılanmayan girdiler veya kafa karıştırıcı düğme eşlemeleri, oyuncular daha oyununuzun içeriğini görmeden onları bezdirir. Bu eğitimde klavye, fare, dokunma ve oyun kumandası girdilerini birleşik bir şekilde nasıl işleyeceğinizi öğreneceksiniz.

Önce deneyin:

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
})

Fizik simülasyonu; düşen nesneler, zıplayan toplar, ragdoll karakterler, araçlar ve yok edilebilir ortamlarla oyunlara hayat verir. Bu rehber, web oyunlarında kullanılabilen başlıca fizik kütüphanelerini gerçek kod örnekleri ve dürüst artı/eksi değerlendirmeleriyle ele alıyor.

Genel bakış

Açıklamalar:

• CCD = Sürekli Çarpışma Algılama (hızlı nesnelerin duvarların içinden geçmesini önler)
• ⚠️ Belirlenimlilik = Sabit zaman adımıyla mümkün olsa da platformlar arasında garanti edilmez

Hızlı öneriler

Ayrıntılı karşılaştırma

3D Fizik Motorları

2D Fizik Motorları

3D Fizik Motorları

Rapier — Modern seçim

Rapier, JavaScript/WASM bağlayıcılarına sahip bir Rust fizik motorudur. 2024 sürümüne kıyasla 2-5 kat hız artışı sunarak 2025-2026 döneminde web oyunları için en yüksek performanslı seçenek hâline gelmiştir.

Kurulum:

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

Temel kurulum:

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)

Oyun döngüsü entegrasyonu:

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)
}

Çarpışma algılama:

// 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)
}

Eklemler:

// 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)

Araç denetleyicisi:

// 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)
}

Artıları:

• En iyi performans (WASM + SIMD)
• Mükemmel çarpışma algılama doğruluğu
• Platformlar arası belirlenimlilik (aynı girdiler = aynı çıktılar)
• Aktif geliştirme, modern API
• Sürekli çarpışma algılama (nesneler yüzeylerin içinden geçmez)
• Yerleşik karakter ve araç denetleyicileri

Eksileri:

• Daha büyük paket boyutu (~1.4 MB)
• Eşzamansız başlatma gerektirir
• Saf JS alternatiflerinden daha karmaşık API
• WASM'de hata ayıklamak zor olabilir

Cannon-es — Basit ve etkili

Cannon-es, Cannon.js'in bakımı sürdürülen çatallanmış sürümüdür. Saf JavaScript ile yazılmıştır; anlaşılması kolaydır ve öğrenme ile prototip geliştirme için idealdir.

Kurulum:

npm install cannon-es

Temel kurulum:

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)

Oyun döngüsü:

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)
}

Çarpışma olayları:

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

Kısıtlamalar:

// 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)

Artıları:

• Saf JavaScript, WASM karmaşıklığı yok
• Küçük paket boyutu (~150 KB)
• Öğrenmesi ve hata ayıklaması kolay
• Her yerde çalışır
• Güçlü Three.js entegrasyonu
• İyi dokümantasyon

Eksileri:

• WASM alternatiflerinden daha yavaş
• Çok sayıda cisimle (>100) zorlanır
• Sınırlı üçgen örgü desteği
• Yerleşik CCD yoktur (nesneler yüzeylerin içinden geçebilir)
• Geliştirme etkinliği daha düşük

Ammo.js — Bullet Physics'in tüm gücü

Ammo.js, WebAssembly'ye derlenmiş Bullet Physics motorudur. Yumuşak cisimler, araçlar ve gelişmiş kısıtlamalar dâhil en kapsamlı özellik setini sunar.

Kurulum:

npm install ammo.js
# Or use from CDN

Temel kurulum:

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
}

Yumuşak cisimler (kumaş):

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
}

Araç fiziği:

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
}

Artıları:

• En kapsamlı özellik seti
• Yumuşak cisimler, kumaşlar, halatlar
• Gelişmiş araç fiziği
• Savaş koşullarında kendini kanıtlamış teknoloji (birçok AAA oyunda kullanılır)
• Son derece özelleştirilebilir Eksileri:
• Karmaşık ve ayrıntılı API
• Büyük paket boyutu
• Bellek yönetimi gerektirir (nesneleri yok etme)
• Zorlu öğrenme süreci
• Dağınık dokümantasyon
• Platformlar arasında deterministik değildir (dikkatli yapılandırmayla yalnızca aynı cihazda)

Jolt — modern, AAA kalitesinde 3D fizik

Jolt Physics, Horizon Forbidden West gibi oyunların arkasındaki motordur; JoltPhysics.js ise onu bir WASM portu olarak tarayıcıya getirir. Rapier ile Ammo.js arasında güçlü bir orta yoldur: Rapier'den daha fazla özellik (yumuşak cisimler, kumaş, tekerlekli araç kontrolcüsü) sunarken Ammo.js'de bulunmayan aktif bakıma sahiptir. npm paketi jolt-physics'tir; React Three Fiber (@react-three/jolt) ve Babylon.js için hazır entegrasyonlar da bulunur.

npm install jolt-physics

Rapier gibi, C++ arayüzünü yansıtan ayrıntılı ama eksiksiz bir API'ye sahip, eşzamansız başlatılan bir WASM çözümüdür. Bullet sınıfı özellikler (yumuşak cisimler, araçlar) istediğiniz ancak Ammo.js yerine bakımı sürdürülen modern bir kod tabanı tercih ettiğiniz durumlarda Jolt'u kullanın.

Oimo.js — Hafif ve hızlı

Oimo.js hafif bir 3D fizik motorudur. Gelişmiş özelliklere ihtiyaç duymadığınız basit oyunlar için idealdir.

Kurulum:

npm install oimo

Temel kurulum:

import * as OIMO from 'oimo'

const world = new OIMO.World({
  timestep: 1/60,
  iterations: 8,
  broadphase: 2, // 1: kaba kuvvet, 2: süpür ve buda, 3: hacim ağacı
  worldscale: 1,
  random: true,
  gravity: [0, -9.8, 0]
})

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

// Düşen küreyi oluştur
const sphere = world.add({
  type: 'sphere',
  size: [1],
  pos: [0, 10, 0],
  move: true,
  density: 1,
  friction: 0.4,
  restitution: 0.2
})

Oyun döngüsü:

function animate() {
  world.step()
  
  // Konumu/dönüşü al
  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)
}

Artıları:

• Çok küçük (~100 KB)
• Basit API
• Temel sahnelerde iyi performans
• Yerleşik Babylon.js desteği

Eksileri:

• Sınırlı şekiller (yalnızca temel geometriler)
• Yumuşak cisim desteği yok
• Yetersiz dokümantasyon
• Daha az aktif geliştirme
• Sınırlı eklem seçenekleri

2D Fizik Motorları

Matter.js — Güzel ve sezgisel

Matter.js, mükemmel render ve hata ayıklama araçlarına sahip, özellik bakımından zengin bir 2D fizik motorudur.

Kurulum:

npm install matter-js

Temel kurulum:

import Matter from 'matter-js'

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

// Motoru oluştur
const engine = Engine.create()

// Render aracını oluştur (isteğe bağlı, hata ayıklama için harika)
const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    wireframes: false
  }
})

// Cisimleri oluştur
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
})

// Dünyaya ekle
World.add(engine.world, [ground, box, circle])

// Çalıştır
Render.run(render)
Runner.run(Runner.create(), engine)

Çarpışma olayları:

Matter.Events.on(engine, 'collisionStart', (event) => {
  event.pairs.forEach(pair => {
    console.log('Şunlar arasında çarpışma:', pair.bodyA.label, pair.bodyB.label)
  })
})

Kısıtlamalar:

// Sabitleme kısıtlaması
const pin = Matter.Constraint.create({
  pointA: { x: 400, y: 100 },
  bodyB: box,
  stiffness: 0.9
})

// Cisimler arasında yay
const spring = Matter.Constraint.create({
  bodyA: box,
  bodyB: circle,
  stiffness: 0.01,
  length: 100
})

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

Fare etkileşimi:

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)

Artıları:

• Güzel varsayılan render
• Öğrenme/prototipleme için harika
• Sezgisel API
• İyi dokümantasyon
• Aktif topluluk
• Varsayılan olarak deterministik — Matter.Runner artık sabit ve deterministik bir zaman adımı kullanıyor (sabit olmayan zaman adımı v0.20.0'da kaldırıldı)

Eksileri:

• CCD yok (hızlı nesneler diğer cisimlerin içinden geçebilir; bunu azaltmak için alt adımlama kullanın)
• Çok sayıda cisimde performans sorunları
• WASM seçeneği yok
• Karmaşık simülasyonlarda sınırlı hassasiyet

Planck.js — JavaScript için Box2D

Planck.js, Box2D'nin JavaScript ile baştan yazılmış eksiksiz bir sürümüdür. Savaşta sınanmış fizik sunar ve sabit zaman adımı kullanıldığında deterministiktir.

Kurulum:

npm install planck

Temel kurulum:

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

// Dünyayı oluştur
const world = new World({
  gravity: Vec2(0, -10)
})

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

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

Sabit zaman adımlı oyun döngüsü:

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

function gameLoop() {
  world.step(TIMESTEP, VELOCITY_ITERATIONS, POSITION_ITERATIONS)
  
  // Tüm cisimleri dolaş
  for (let body = world.getBodyList(); body; body = body.getNext()) {
    const pos = body.getPosition()
    const angle = body.getAngle()
    // Sprite'larınızı güncelleyin...
  }
  
  requestAnimationFrame(gameLoop)
}

Çarpışma geri çağrıları:

world.on('begin-contact', (contact) => {
  const fixtureA = contact.getFixtureA()
  const fixtureB = contact.getFixtureB()
  console.log('Temas başladı')
})

world.on('end-contact', (contact) => {
  console.log('Temas sona erdi')
})

world.on('pre-solve', (contact, oldManifold) => {
  // Temas burada devre dışı bırakılabilir
  // contact.setEnabled(false)
})

Eklemler:

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

// Döner eklem (menteşe)
const joint = world.createJoint(RevoluteJoint({
  bodyA: ground,
  bodyB: box,
  localAnchorA: Vec2(0, 5),
  localAnchorB: Vec2(-1, 0),
  enableMotor: true,
  maxMotorTorque: 1000,
  motorSpeed: 2
}))

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

Artıları:

• Sabit zaman adımıyla deterministik
• İyi belgelenmiş (Box2D dokümanları geçerlidir)
• İyi performans
• TypeScript desteği
• Küçük paket boyutu

Eksileri:

• CCD eklemleri işlemez; bu nedenle eklemlerle bağlanan hızlı nesneler esneyebilir
• Matter.js'e göre daha zorlu öğrenme süreci
• Yerleşik render aracı yok
• Box2D'ye özgü ayrıntılar (birim ölçeği önemlidir)

p2-es — Esnek 2D fizik

p2-es, p2.js'in bakımı sürdürülen çatallanmış sürümüdür. Karmaşık kısıtlamalara ve mekanizmalara ihtiyaç duyan oyunlar için harikadır.

Kurulum:

npm install p2-es

Temel kurulum:

import * as p2 from 'p2-es'

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

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

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

Gelişmiş kısıtlamalar:

// Dişli kısıtlaması
const gear = new p2.GearConstraint(bodyA, bodyB, {
  ratio: 2 // bodyB iki kat hızlı döner
})
world.addConstraint(gear)

// Prizmatik kısıtlama (kaydırıcı)
const prismatic = new p2.PrismaticConstraint(bodyA, bodyB, {
  localAnchorA: [0, 0],
  localAnchorB: [0, 0],
  localAxisA: [1, 0],
  disableRotationalLock: false
})
world.addConstraint(prismatic)

// Kilit kısıtlaması (kaynak)
const lock = new p2.LockConstraint(bodyA, bodyB)
world.addConstraint(lock)

Temas malzemeleri:

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)

// Şekillere uygula
iceBody.shapes[0].material = ice
rubberBody.shapes[0].material = rubber

Artıları:

• Zengin kısıtlama sistemi
• Temas malzemeleri
• Mekanizmalar/makineler için uygun
• Uyuyan cisimler (performans)
• ES modülleri, tree-shaking desteği

Eksileri:

• Yerleşik render aracı yok
• Bazı şekil çiftleri desteklenmiyor
• Alternatiflerden daha az aktif
• Dokümantasyon eksiklikleri

Performans ipuçları

1. Sabit zaman adımı kullanın

const TIMESTEP = 1 / 60
let accumulator = 0

function gameLoop(deltaTime) {
  accumulator += deltaTime
  
  while (accumulator >= TIMESTEP) {
    world.step(TIMESTEP)
    accumulator -= TIMESTEP
  }
  
  // Akıcı render için enterpolasyon yap
  const alpha = accumulator / TIMESTEP
  // lerp(previousState, currentState, alpha)
}

2. Etkin olmayan cisimleri uyutun

Çoğu motor uyku özelliğini destekler. Etkinleştirin:

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

// Rapier
bodyDesc.setCanSleep(true)

3. Basit çarpışma şekilleri kullanın

// İYİ: Basit temel geometriler
const sphere = new CANNON.Sphere(1)
const box = new CANNON.Box(new CANNON.Vec3(1, 1, 1))

// KAÇININ: Dinamik cisimler için karmaşık üçgen ağ
const trimesh = new CANNON.Trimesh(vertices, indices) // Yavaş!

4. Çözücü yinelemelerini azaltın (dikkatlice)

// Cannon-es
world.solver.iterations = 5 // Varsayılan 10

// Rapier - dünya oluşturulurken yapılandırılır

5. Fiziği bir Web Worker içinde çalıştırın

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

worker.postMessage({ type: 'step', deltaTime: 1/60 })
worker.onmessage = (e) => {
  const { positions, rotations } = e.data
  // Render nesnelerini güncelle
}

// 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())
    })
  }
}

Hangi durumda hangisini kullanmalı?

Render araçlarıyla entegrasyon

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() // fizik cismi -> mesh

function createPhysicsBox(x, y, z) {
  // Fizik
  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) {
  // Fizik
  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
  })
})

Yaygın tuzaklar

Ölçek önemlidir

Fizik motorları gerçek dünya ölçeğiyle (1 birim = 1 metre) en iyi şekilde çalışır. Piksel koordinatlarını doğrudan kullanmayın.

// KÖTÜ: Piksel konumlarını kullanmak
const body = Bodies.circle(400, 300, 50) // 50 piksel yarıçap mı?

// İYİ: Bir ölçek faktörü kullanın
const SCALE = 50 // metre başına 50 piksel
const body = Bodies.circle(8, 6, 1) // 1 metre yarıçap
// Ardından render sırasında SCALE ile çarpın

WASM motorlarında bellek sızıntıları

Cisimleri kaldırırken her zaman temizleyin:

// Rapier
world.removeRigidBody(body)

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

Tünelleme (nesnelerin birbirinin içinden geçmesi)

Hızlı hareket eden nesneler ince duvarların içinden geçebilir. Çözümler:

// Rapier: CCD'yi etkinleştir
const bodyDesc = RAPIER.RigidBodyDesc.dynamic().setCcdEnabled(true)

// Cannon-es: Daha küçük zaman adımları veya daha kalın duvarlar kullan
world.step(1/120) // 60 yerine 120 Hz

İlgili

• Oyun geliştiricileri için WebGL temelleri
• Oyun mantığı için Web Worker'lar — fizik hesaplamalarını bir Worker iş parçacığına aktarın
• Hızlı yüklenen bir web oyunu yayınlayın
• Canvas 2D oyun döngüsü — her fizik motorunun kullandığı sabit zaman adımı kalıbı
• 2026'da Web Oyunları Teknoloji Yığını — fizik motorlarının genel teknoloji yığınındaki yeri
• Web Oyun Motorları Karşılaştırması — yerleşik fizik desteğine sahip motorlar

Harici Kaynaklar

• Rapier belgeleri — resmi Rapier fizik belgeleri ve örnekleri
• Cannon-es belgeleri — API referansı ve kılavuzlar
• Matter.js belgeleri — eksiksiz API referansı
• Planck.js belgeleri — JavaScript için Box2D

Gamepad API, web oyunlarına konsol kalitesinde kontrolcü desteği getirir. Xbox, PlayStation, Switch Pro ve genel amaçlı kontrolcüleri destekleyin.

1) Gamepad'leri algılama

window.addEventListener('gamepadconnected', (e) => {
  console.log('Gamepad bağlandı:', e.gamepad.id)
  console.log('Dizin:', e.gamepad.index)
  console.log('Düğmeler:', e.gamepad.buttons.length)
  console.log('Eksenler:', e.gamepad.axes.length)
})

window.addEventListener('gamepaddisconnected', (e) => {
  console.log('Gamepad bağlantısı kesildi:', e.gamepad.id)
})

2) Gamepad durumunu yoklama

Gamepad durumu yoklanmalıdır (olay tabanlı değildir):

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

// Oyun döngünüzde çağırın
function gameLoop() {
  pollGamepads()
  update()
  render()
  requestAnimationFrame(gameLoop)
}

3) Standart düğme eşleme

"Standart" eşleme (çoğu Xbox/PlayStation kontrolcüsü):

const BUTTONS = {
  A: 0,           // Çarpı (PS) / A (Xbox)
  B: 1,           // Daire (PS) / B (Xbox)
  X: 2,           // Kare (PS) / X (Xbox)
  Y: 3,           // Üçgen (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,         // Sol çubuğa basma
  R3: 11,         // Sağ çubuğa basma
  DPAD_UP: 12,
  DPAD_DOWN: 13,
  DPAD_LEFT: 14,
  DPAD_RIGHT: 15,
  HOME: 16,       // PS düğmesi / Xbox düğmesi
}

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

4) Düğmeleri ve çubukları okuma

function processGamepad(gamepad) {
  // Düğmeler (dijital veya analog)
  const jump = gamepad.buttons[BUTTONS.A].pressed
  const shoot = gamepad.buttons[BUTTONS.X].pressed
  
  // Tetikler (analog 0-1)
  const leftTrigger = gamepad.buttons[BUTTONS.LT].value
  const rightTrigger = gamepad.buttons[BUTTONS.RT].value
  
  // Çubuklar (analog -1 ile 1 arası)
  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) Ölü bölge yönetimi

Çubuklar boşta nadiren tam olarak 0 değerinde kalır:

function applyDeadzone(value, deadzone = 0.15) {
  if (Math.abs(value) < deadzone) return 0
  
  // Kalan aralığı 0-1 ölçeğine yeniden ayarla
  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) Radyal ölü bölge (2D hareket için daha iyi)

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,
  }
}

// Kullanım
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) Eksiksiz gamepad yöneticisi

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('Bağlandı:', 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,
      
      // Ön yüz düğmeleri
      a: gp.buttons[0].pressed,
      b: gp.buttons[1].pressed,
      x: gp.buttons[2].pressed,
      y: gp.buttons[3].pressed,
      
      // Omuz düğmeleri
      lb: gp.buttons[4].pressed,
      rb: gp.buttons[5].pressed,
      
      // Tetikler (analog)
      lt: gp.buttons[6].value,
      rt: gp.buttons[7].value,
      
      // Yön düğmeleri
      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)
    }
  }
}

// Kullanım
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) Titreşim / dokunsal geri bildirim

function vibrate(gamepad, duration = 200, weakMagnitude = 0.5, strongMagnitude = 0.5) {
  if (gamepad.vibrationActuator) {
    gamepad.vibrationActuator.playEffect('dual-rumble', {
      startDelay: 0,
      duration,
      weakMagnitude,   // Yüksek frekanslı motor
      strongMagnitude, // Düşük frekanslı motor
    })
  }
}

// Kullanım
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) Birden fazla oyuncu

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) {
    // ... öncekiyle aynı
  }
}

// Oyun döngüsünde
const multiplayer = new LocalMultiplayer(4)

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

10) Yedek ve birleşik giriş

Hem klavyeyi hem de gamepad'i destekleyin:

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()
    
    // Girişleri birleştir (analog girişlerde gamepad önceliklidir)
    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()
  }
}

İlgili içerikler

• Oyun girişi yönetimi
• Mobil uyumlu web oyunları
• Canvas 2D oyun döngüsü
• FPS oyunları için Pointer Lock — gamepad'i fareyle bakış kontrolüyle birleştirme
• Eşli Oyun Tasarımı — yerel eşli oyunda birden fazla kontrolcü girişine göre tasarım yapma

Harici Kaynaklar

• MDN: Gamepad API — eksiksiz API referansı
• MDN: Gamepad API'yi Kullanma — adım adım rehber
• Gamepad Test Aracı — kontrolcü eşlemelerinizi tarayıcıda test edin

Birçok platform (Itch.io, Newgrounds, Cinevva ve kendi siteniz) oyunları iframe'ler içinde yerleştirir. Bu eğitim, oyununuzun iframe içinde sorunsuz çalışmasını nasıl sağlayacağınızı ele alır.

1) Temel yerleştirilebilir yapı

Oyununuz, sayfanın tamamını kontrol etmeyi gerektirmeden çalışmalıdır:

<!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) Iframe bağlamını algılama

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

if (isEmbedded) {
  // Davranışı yerleştirilmiş bağlama göre ayarla
  hideExternalLinks()
  adjustUIForSmallSize()
}

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

3) Gerekli iframe izinlerini sağlama

Üst sayfa, iframe'inizin neler yapabileceğini kontrol eder. Yaygın izinler:

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

Oyununuz, eksik izinleri sorunsuz biçimde ele almalıdır:

// Tam ekran özelliğinin kullanılabilir olup olmadığını kontrol et
const canFullscreen = document.fullscreenEnabled || document.webkitFullscreenEnabled

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

4) Iframe içinden tam ekrana geçme

Tam ekran için allow="fullscreen" özniteliği gerekir:

async function requestFullscreen() {
  const elem = document.documentElement
  
  try {
    if (elem.requestFullscreen) {
      await elem.requestFullscreen()
    } else if (elem.webkitRequestFullscreen) {
      await elem.webkitRequestFullscreen()
    }
  } catch (err) {
    // Tam ekrana izin verilmiyor; mesaj göster
    showMessage('Yerleştirilmiş durumdayken tam ekran kullanılamıyor')
  }
}

5) Üst sayfayla iletişim kurma

Farklı kaynaklar arasında güvenli iletişim için postMessage kullanın:

Oyununuzda:

// Üst sayfaya mesaj gönder
function notifyParent(type, data) {
  if (window.parent !== window) {
    window.parent.postMessage({ type, data, source: 'game' }, '*')
  }
}

// Üst sayfadan gelen mesajları al
window.addEventListener('message', (event) => {
  // Gerekirse kaynağı doğrula
  // 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
  }
})

// Oyun hazır olduğunda bildir
window.addEventListener('load', () => {
  notifyParent('ready', { width: 800, height: 600 })
})

// Oyun olaylarını bildir
function onGameOver(score) {
  notifyParent('gameover', { score })
}

Üst sayfada:

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

iframe.addEventListener('load', () => {
  // Oyundan gelen mesajları dinle
  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('Oyun hazır:', data)
    }
    if (type === 'gameover') {
      showScoreModal(data.score)
    }
  })
})

// Oyuna komut gönder
function pauseGame() {
  iframe.contentWindow.postMessage({ type: 'pause' }, '*')
}

6) Odağı yönetme

Iframe'ler odağı kaybederek klavye girişinin çalışmamasına neden olabilir:

// Tıklandığında canvas'a otomatik olarak odaklan
canvas.addEventListener('click', () => {
  canvas.focus()
})

// Canvas'ı odaklanabilir hâle getir
canvas.tabIndex = 1

// Odak kaybını işle
window.addEventListener('blur', () => {
  // Basılı tutulan tuşları sıfırla
  input.left = input.right = input.up = input.down = false
  
  if (isEmbedded) {
    // İsteğe bağlı olarak duraklat
    // pauseGame()
  }
})

// Üst sayfadan odak iste
function requestFocus() {
  notifyParent('requestFocus', {})
}

7) Duyarlı yerleştirme boyutu

Farklı yerleştirme boyutlarını destekleyin:

function handleResize() {
  const width = window.innerWidth
  const height = window.innerHeight
  
  // Kullanıcı arayüzünü boyuta göre ayarla
  if (width < 400 || height < 300) {
    enableCompactUI()
  } else {
    enableFullUI()
  }
  
  // Oyunu uygun şekilde ölçeklendir
  resizeCanvas(width, height)
}

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

8) Yerleştirmeler için yükleme göstergesi

Hemen bir şeyler gösterin:

// Anında görüntülemek için HTML içine yerleştir
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>Yükleniyor...</p>
    </div>
  </div>
`

// Oyun hazır olduğunda kaldır
function hideLoading() {
  const loading = document.getElementById('loading')
  if (loading) {
    loading.style.opacity = '0'
    loading.style.transition = 'opacity 0.3s'
    setTimeout(() => loading.remove(), 300)
  }
}

9) Platforma özgü SDK'lar

Bazı platformların kendi API'leri vardır:

Itch.io:

// SDK gerekmez ancak başarımlar için postMessage kullanılabilir
window.parent.postMessage({ type: 'itch-achievement', data: { id: 'first-win' }}, '*')

Newgrounds:

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

Cinevva:

// Oyunun hazır olduğunu bildir
window.parent.postMessage({ type: 'cinevva:ready' }, '*')

// Oynanabilir duruma geldiğini bildir
window.parent.postMessage({ type: 'cinevva:playable' }, '*')

10) Güvenlik hususları

// Hassas işlemlerde mesaj kaynaklarını doğrula
window.addEventListener('message', (event) => {
  const trustedOrigins = [
    'https://itch.io',
    'https://cinevva.com',
    'https://yoursite.com'
  ]
  
  if (!trustedOrigins.includes(event.origin)) {
    return // Güvenilmeyen mesajları yok say
  }
  
  // Mesajı işle...
})

// Hassas işlemleri postMessage üzerinden kullanıma açma
// Yalnızca izin verilenler listesindeki komutları kabul et
const allowedCommands = ['pause', 'resume', 'setVolume', 'mute']

window.addEventListener('message', (event) => {
  const { type } = event.data
  if (!allowedCommands.includes(type)) return
  
  // Komutu işle...
})

Test kontrol listesi

• Yerel test: file:// yerine basit bir HTTP sunucusu kullanın
• Farklı kaynaklar: Gerçek bir iframe yerleştirmesiyle test edin
• İzinler: Kısıtlı bir sandbox ile test edin
• Odak: Iframe'in dışına tıkladıktan sonra klavyeyi test edin
• Yeniden boyutlandırma: Farklı yerleştirme boyutlarında test edin
• Mobil: Yerleştirilmiş bağlamda dokunmatik kontrolleri test edin

<!-- Yerleştirme test sayfası -->
<!DOCTYPE html>
<html>
<body style="background: #333; padding: 20px;">
  <h1 style="color: #fff;">Yerleştirme Testi</h1>
  <iframe 
    src="http://localhost:8000" 
    width="800" 
    height="600"
    allow="fullscreen; autoplay; gamepad"
  ></iframe>
</body>
</html>

İlgili içerikler

• Hızlı yüklenen bir web oyunu yayınlayın
• Mobil uyumlu web oyunları
• İçerik üreticileri için
• COOP/COEP ve SharedArrayBuffer — iframe yerleştirmesini etkileyen farklı kaynak üstbilgileri
• Oyununuzu itch.io'da nasıl yayımlarsınız? — itch.io, tarayıcı oyunlarını yerel olarak iframe'lere yerleştirir

Harici kaynaklar

• MDN: iframe öğesi — iframe öznitelikleri için eksiksiz başvuru
• MDN: İzin Politikası — iframe'lerin hangi özellikleri kullanabileceğini kontrol etme
• MDN: postMessage API'si — iframe ile üst sayfa arasında iletişim kurma

IndexedDB, tarayıcıda kalıcı oyun verileri için en iyi seçenektir. Büyük miktarda veriyi işler, çevrimdışı çalışır ve ana iş parçacığını engellemez.

1) Neden localStorage yerine IndexedDB?

Oyunlar için IndexedDB neredeyse her zaman doğru seçimdir.

2) Veritabanı açma

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) Oyun durumunu kaydetme

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) Oyun durumunu yükleme

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) Tüm kayıtları listeleme

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) Bir kaydı silme

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) Eksiksiz bir GameStorage sınıfı

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) İkili verileri (dokular, sesler) depolama

IndexedDB, Blob'ları ve ArrayBuffer'ları destekler:

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) Otomatik kayıt kalıbı

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) Hata yönetimi ve geri dönüş seçenekleri

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) Kayıtları otomatik silinmeye karşı koruma

IndexedDB verilerinin kalıcı olacağı garanti edilmez. Bir kaynak varsayılan olarak "mümkün olan en iyi" depolamayı kullanır ve disk dolduğunda ya da Safari/WebKit'te kullanıcı sitenizle uzun süre etkileşim kurmadığında tarayıcı bu verileri silebilir. Oyun kayıtları ise tam olarak kaybetmek istemeyeceğiniz verilerdir.

Tarayıcının açık bir kullanıcı işlemi olmadan verilerinizi temizlememesi için kalıcı depolama isteyin:

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
}

Tarayıcılar bu izni etkileşim sinyallerine (kullanıcının sitenizle ne kadar etkileşim kurduğu, sitenin PWA olarak yüklenip yüklenmediği) göre verir; bu nedenle isteğin her zaman başarılı olacağını varsaymayın. Büyük kayıtları veya önbelleğe alınmış varlıkları yazmadan önce ne kadar alanınız kaldığını da kontrol edebilirsiniz:

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

Her iki API de güvenli bir bağlam (HTTPS veya localhost) gerektirir.

İlgili içerikler

• Çevrimdışı oyunlar için PWA
• Oyun önbelleğe alma için service worker'lar
• Hızlı yüklenen bir web oyunu yayınlama
• Akış tabanlı varlık yükleme — IndexedDB'yi varlık önbelleği olarak kullanma
• Web oyunları için analiz — oyuncu davranışını anlamak için kaydetme/yükleme kalıplarını izleme

Harici Kaynaklar

• MDN: IndexedDB API — eksiksiz API başvurusu
• MDN: IndexedDB'yi kullanma — adım adım kılavuz
• idb kütüphanesi — Promise tabanlı, küçük bir IndexedDB sarmalayıcısı

Mobil cihazlar en büyük oyun platformudur. Birkaç düzenlemeyle web oyununuzun telefonlarda ve tabletlerde harika çalışmasını sağlayabilirsiniz.

1) Görüntü alanı ayarları

Yakınlaştırmayı önleyin ve doğru ölçeklendirmeyi sağlayın:

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

2) Tam ekran canvas

* {
  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%;
}

Arayüzü height: 100% yerine görüntü alanı yüksekliğine göre boyutlandırıyorsanız vh yerine dinamik görüntü alanı birimleri olan dvh, svh ve lvh birimlerini tercih edin. Bu birimler, mobil tarayıcının daralıp genişleyen araç çubuğunu hesaba katar; 100vh ise bunu göz ardı eder (iOS'te 100vh, araç çubuğunun gizli olduğu yüksekliği temsil ettiğinden düzeninizin alt kısmı kırpılır). Bu birimler Baseline Widely Available durumuna ulaşmıştır ve Chrome/Edge 108+, Firefox 101+ ile Safari/iOS Safari 15.4+ tarafından desteklenmektedir; bu da kullanıcıların yaklaşık %92'sine karşılık gelir.

3) Dokunma olaylarını işleme

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)
  }
})

Oyununuzun fare veya ekran kalemiyle de çalışması gerekiyorsa dokunma olayları yerine Pointer Events (pointerdown/pointermove/pointerup) kullanmayı değerlendirin. MDN artık bunları cihazdan bağımsız tek giriş modeli olarak öneriyor: tek bir kod yolu dokunma, fare ve kalem girişlerini işlerken çoklu dokunma da pointerId üzerinden çalışmaya devam eder (yukarıda kullanılan touch.identifier karşılığıdır). Yalnızca dokunmatik giriş kullanan oyunlar için dokunma olayları hâlâ tamamen uygundur.

4) Sanal joystick

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) Dokunmatik düğmeler

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) Ekran yönünü işleme

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) Performans optimizasyonu

// 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) Pil kullanımına ilişkin hususlar

// 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()
})

Önemli bir sınırlama vardır: Fullscreen API, iPhone'daki genel öğeler için çalışmaz. iOS Safari tam ekran özelliğini yalnızca yerel video öğeleri için standart dışı webkitEnterFullscreen aracılığıyla sunar; bu nedenle documentElement.requestFullscreen() iPhone'da reddedilir. Yukarıdaki try/catch bunu sorunsuz biçimde işler. Bu nedenle oyununuzu iPhone'da gerçek tam ekran olmadan oynanabilecek şekilde tasarlayın ve tam ekranı, desteklendiği iPad, Android ve masaüstü cihazlarda ek bir iyileştirme olarak değerlendirin. screen.orientation.lock() çağrısı da iPhone'da aynı sınırlamaya sahiptir, dolayısıyla buna bağımlı olmayın.

10) Test kontrol listesi

Yayınlamadan önce:

• Dokunma tepkiselliği — Yalnızca emülatörlerde değil, gerçek cihazlarda test edin
• Çeşitli ekran boyutları — Telefon, tablet, iPad Pro
• Her iki ekran yönü — Ya da tek bir yöne kilitleyin
• Düşük donanımlı cihazlar — 2-3 yıllık telefonlarda test edin
• Yavaş ağlar — 3G simülasyonunda test edin
• iOS Safari — Ses ve tam ekranla ilgili kendine özgü davranışları vardır
• Android Chrome — En yaygın tarayıcıdır
• Kesintiler — Telefon aramaları, bildirimler
• Bellek baskısı — Arka plan sekmesinden döndükten sonra toparlanıyor mu?

// 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)
  }
}

İlgili içerikler

• Oyun girişlerini işleme
• Duyarlı oyun canvas'ı
• Çevrimdışı oyunlar için PWA
• Oyunlar için Web Audio API — iOS ses kısıtlamalarını işleme
• Hızlı yüklenen bir web oyunu yayınlama — mobil bağlantılar için yükleme sürelerini optimize etme
• Oyunları iframe ile yerleştirme — mobil cihazlara özgü yerleştirme hususları

Harici kaynaklar

• MDN: Dokunma olayları — çoklu dokunmayı işleme
• MDN: Screen Orientation API — ekran yönünü kilitleme
• MDN: Fullscreen API — mobil cihazlarda tam ekrana geçme
• web.dev: Duyarlı tasarım — oyun arayüzlerine uygulanabilen duyarlı tasarım kalıpları

Piksel sanatı doğru işlendiğinde harika, bulanık olduğundaysa berbat görünür. Bu eğitimde net ve özgün piksel grafikler oluşturma tekniklerini ele alacağız.

1) Bulanıklık sorunu

Tarayıcılar, varsayılan olarak ölçeklendirme sırasında görselleri yumuşatır. Bu, piksel sanatı için yanlıştır:

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

2) Canvas bağlamı ayarları

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

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

Bu ayar, canvas her yeniden boyutlandırıldığında veya bağlam her değiştiğinde yeniden yapılmalıdır.

3) Tam sayı ölçeklendirme

Piksel sanatı en iyi tam sayı ölçeklerinde (1x, 2x, 3x, 4x) görünür:

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) Sprite'ları tam sayı konumlarında çizme

Alt piksel konumları bulanıklığa neden olur:

// 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) Sprite sayfası animasyonu

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) Palet değiştirme

Sprite'ları yeniden renklendirmek için kullanılan klasik bir teknik:

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) Döşeme haritası işleme

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) Dış çizgi efektleri

Görünürlüğü artırmak için sprite'lara dış çizgiler ekleyin:

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) Ekran sarsıntısı

Klasik bir oyun hissi efekti:

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) Renk paleti kısıtlamaları

Özgün piksel sanatında sınırlı paletler kullanılır:

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
}

İlgili içerikler

• Canvas 2D oyun döngüsü
• Duyarlı oyun canvas'ı
• Akışla oyun varlığı yükleme
• Ücretsiz oyun varlıkları nerede bulunur? — sprite sayfaları, piksel sanatı paketleri ve 2D varlık kaynakları
• Oyunlarda metin işleme — piksel sanatı tarzınızla uyumlu bitmap yazı tipleri

Pointer Lock API, fare imlecini yakalayarak akıcı FPS tarzı kamera kontrollerine olanak tanır. Birinci ve üçüncü şahıs nişancı oyunları için vazgeçilmezdir.

1) Pointer lock isteme

Pointer lock için bir kullanıcı etkileşimi gerekir:

const canvas = document.getElementById('game')

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

Ham fare girdisi (ivmeyi devre dışı bırakma)

Tarayıcı varsayılan olarak işletim sisteminin fare ivmesini movementX/movementY değerlerine uygular; bu nedenle aynı mesafede yapılan hızlı bir hareket ile yavaş bir sürükleme, kamerayı farklı miktarlarda döndürür. FPS nişan alma için genellikle bunun tersini istersiniz: aynı fiziksel mesafe, kamerayı her zaman aynı miktarda döndürmelidir. requestPointerLock() işlevine unadjustedMovement: true geçirerek ham ve ivmesiz hareket isteyin:

canvas.addEventListener('click', async () => {
  try {
    await canvas.requestPointerLock({ unadjustedMovement: true })
  } catch (err) {
    // unadjustedMovement unsupported here; fall back to OS-adjusted deltas
    await canvas.requestPointerLock()
  }
})

Modern requestPointerLock(), başarı durumunda çözümlenen ve başarısızlık durumunda reddedilen bir Promise döndürür; bu nedenle yukarıdaki çağrı try/catch içine alınmıştır. Chrome ve Edge, 88. sürümden beri unadjustedMovement seçeneğini destekler; Safari ise requestPointerLock işlevinin Promise döndürmesini da düzelten 18.4 sürümünden (Mart 2025) beri desteklemektedir. Promise döndürmeyen eski tarayıcılar da burada çalışır; çünkü await, Promise olmayan bir değeri kabul eder ve bilinmeyen seçenek yok sayılır. Bu nedenle sade requestPointerLock() yedeğini her zaman koruyun.

2) Kilit durumunu algılama

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

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

3) Fare hareketini okuma

Kilitliyken movementX ve movementY değerlerini kullanın:

document.addEventListener('mousemove', (e) => {
  if (document.pointerLockElement !== canvas) return
  
  const sensitivity = 0.002
  camera.yaw -= e.movementX * sensitivity
  camera.pitch -= e.movementY * sensitivity
  
  // Clamp pitch to prevent flipping
  camera.pitch = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.pitch))
})

4) FPS kamera sınıfı

class FPSCamera {
  constructor() {
    this.position = { x: 0, y: 1.7, z: 0 } // Eye height
    this.yaw = 0      // Left/right rotation
    this.pitch = 0    // Up/down rotation
    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()
    
    // Move on XZ plane only
    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) WASD hareketi

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) Tam FPS kontrolcüsü

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)
    
    // Horizontal movement
    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
    
    // Jumping
    if (this.input.jump && this.onGround) {
      this.velocity.y = this.jumpSpeed
      this.onGround = false
    }
    
    // Gravity
    if (!this.onGround) {
      this.velocity.y += this.gravity * dt
    }
    
    // Apply velocity
    this.camera.position.x += this.velocity.x * dt
    this.camera.position.y += this.velocity.y * dt
    this.camera.position.z += this.velocity.z * dt
    
    // Simple ground collision
    if (this.camera.position.y < 1.7) {
      this.camera.position.y = 1.7
      this.velocity.y = 0
      this.onGround = true
    }
  }
}

7) Nişangâh

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
  
  // Top
  ctx.beginPath()
  ctx.moveTo(cx, cy - gap)
  ctx.lineTo(cx, cy - gap - size)
  ctx.stroke()
  
  // Bottom
  ctx.beginPath()
  ctx.moveTo(cx, cy + gap)
  ctx.lineTo(cx, cy + gap + size)
  ctx.stroke()
  
  // Left
  ctx.beginPath()
  ctx.moveTo(cx - gap, cy)
  ctx.lineTo(cx - gap - size, cy)
  ctx.stroke()
  
  // Right
  ctx.beginPath()
  ctx.moveTo(cx + gap, cy)
  ctx.lineTo(cx + gap + size, cy)
  ctx.stroke()
}

8) Fare düğmeleriyle ateş etme

document.addEventListener('mousedown', (e) => {
  if (!document.pointerLockElement) return
  
  if (e.button === 0) {
    // Left click - primary fire
    weapon.fire()
  } else if (e.button === 2) {
    // Right click - aim down sights
    weapon.aimDownSights(true)
  }
})

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

// Prevent context menu
canvas.addEventListener('contextmenu', (e) => e.preventDefault())

9) Hassasiyet ayarları

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())
  }
}

// Apply in mouse handler
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) Çıkış istemi

Pointer lock'tan çıkma talimatlarını gösterin:

function showLockUI() {
  const ui = document.getElementById('lock-ui')
  
  if (document.pointerLockElement) {
    ui.innerHTML = '<p>Farenin kilidini açmak için ESC tuşuna basın</p>'
    ui.style.opacity = '0.5'
    setTimeout(() => ui.style.opacity = '0', 2000)
  } else {
    ui.innerHTML = '<p>Oynamak için tıklayın</p>'
    ui.style.opacity = '1'
  }
}

document.addEventListener('pointerlockchange', showLockUI)

Çıkış istemi hakkında bilinmesi gereken bir nokta vardır: Oyuncu pointer lock'tan çıkmak için ESC tuşuna bastığında tarayıcı, yeniden kilitleme yapılabilmesi için yeni bir kullanıcı etkileşimi (tıklama) ister. “Oynamak için tıklayın” katmanının bulunma nedeni budur. Ancak kendi kodunuz document.exitPointerLock() işlevini çağırırsa (örneğin oyun içi bir menü açmak için), sonrasında yeniden kilitleme yapmak için yeni bir etkileşim gerekmez. Böylece menü kapandığında kilidi program aracılığıyla yeniden etkinleştirebilirsiniz. ESC tuşuna art arda basılması da tarayıcının daha bilinçli bir kullanıcı eylemi gerçekleşene kadar yeniden kilitlemeyi reddetmesine yol açabilir. Bu nedenle pointerlockchange sırasında otomatik olarak yeniden kilitlemeye çalışmayın.

Iframe ile ilgili hususlar

Iframe'lerde pointer lock için allow="pointer-lock" özniteliği gerekir:

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

Pointer lock özelliğinin kullanılabilir olup olmadığını kontrol edin:

if (!document.pointerLockElement && !('requestPointerLock' in canvas)) {
  showMessage('Fare yakalama kullanılamıyor')
}

İlgili içerikler

• Oyun girdilerini işleme
• Gamepad API
• WebGL'in temelleri
• WebXR'ın temelleri — birinci şahıs deneyimleri için VR kontrolleri
• WebGPU'ya başlangıç — FPS oyunları için modern GPU görüntü işleme

Harici Kaynaklar

• MDN: Pointer Lock API — eksiksiz API başvurusu
• MDN: MouseEvent.movementX — fare hareket farklarını okuma

Progresif Web Uygulamaları, oyuncuların oyununuzu yüklemesine ve çevrimdışı oynamasına olanak tanır. Bu eğitim, bir web oyununa PWA desteğinin nasıl ekleneceğini gösterir.

1) Web Uygulaması Manifesti

manifest.json dosyasını oluşturun:

{
  "name": "Harika Oyunum",
  "short_name": "HarikaOyun",
  "description": "Çevrimdışı oynayabileceğiniz harika bir oyun",
  "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"
    }
  ]
}

HTML dosyanızda buna bağlantı verin:

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

2) Temel service worker

sw.js dosyasını oluşturun:

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) Service worker'ı kaydetme

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) Ağ üzerinden güncellemeli önbellek öncelikli strateji

Oyunlar için daha iyidir: arka planda güncellemeler yapılırken hızlı yükleme sağlar.

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) Güncellemeler için sürümlendirilmiş önbellek

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) Oyun güncellemelerini yönetme

Bir güncelleme kullanıma sunulduğunda oyuncuları bilgilendirin:

// 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>Oyun güncellendi! En son sürümü edinmek için yenileyin.</p>
    <button onclick="location.reload()">Yenile</button>
  `
  banner.className = 'update-banner'
  document.body.appendChild(banner)
}

7) Çevrimdışı durumu algılama

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) Yükleme istemi

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
})

iOS ve iPadOS'te beforeinstallprompt olayı hiçbir zaman tetiklenmez; bu nedenle yukarıdaki yükleme düğmesi yalnızca Chromium tarayıcılarında görünür. iPhone ve iPad kullanıcıları, Paylaş'a ve ardından "Ana Ekrana Ekle" seçeneğine dokunarak yükleme yapar. 2026'da değişen ve bilinmesi gereken bir nokta var: Safari 26'dan (iOS 26 / iPadOS 26) itibaren Ana Ekran'a eklenen her site, varsayılan olarak etkin olan "Web Uygulaması Olarak Aç" seçeneğiyle birlikte varsayılan olarak bir web uygulaması şeklinde açılır. iOS'te artık yüklenebilirlik şartı yoktur; ancak manifest ve service worker sunmak yine de çok daha iyi bir çevrimdışı deneyim sağlar.

9) Liderlik tabloları için arka plan senkronizasyonu

Destek konusunda önemli bir not: Background Sync API yalnızca Chromium tarayıcılarında (Chrome, Edge, Opera, Samsung Internet) uygulanmıştır. Firefox ve Safari (iOS dâhil) bunu desteklemez; bu nedenle her zaman özellik algılama kullanın ve skorları uygulamanın bir sonraki normal yüklenişinde gönderen bir yedek yöntem bulundurun.

// 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) PWA'yı test etme

Chrome DevTools:

• Application > Service Workers
• Application > Manifest
• Application > Cache Storage
• Network > Offline onay kutusu

Lighthouse denetimi:

• PWA denetimini çalıştırın
• Yüklenebilirliği kontrol edin
• Çevrimdışı çalışma özelliğini kontrol edin

Gerçek cihazda test:

• Telefonun ana ekranına yükleyin
• Uçak modunu etkinleştirin
• Tüm özellikleri çevrimdışı test edin

İlgili içerikler

• Oyunları önbelleğe almak için service worker'lar
• IndexedDB ile oyun kayıtları
• Hızlı yüklenen bir web oyunu yayınlama
• Mobil uyumlu web oyunları — PWA oyunları için dokunmatik kontroller ve viewport yönetimi
• Akışlı varlık yükleme — service worker önbelleğiyle çalışan yükleme stratejileri

Harici Kaynaklar

• MDN: Progresif Web Uygulamaları — kapsamlı PWA belgeleri
• web.dev: PWA'yı Öğrenin — Google'ın PWA öğrenme yolu
• MDN: Web Uygulaması Manifesti — manifest dosyası referansı

Doğru şekilde ölçeklenmeyen bir tuval, farklı ekran boyutlarında bulanık görünür veya bozulur. Bu sorunu sayamayacağım kadar çok kez ayıkladım; sizi bu zahmetten kurtarayım.

Farklı ölçekleme modlarını deneyin:

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
  
  // Dahili çözünürlüğü fiziksel piksellerle eşleşecek şekilde ayarla
  canvas.width = width * dpr
  canvas.height = height * dpr
  
  // CSS boyutunu mantıksal piksellerle eşleşecek şekilde ayarla
  canvas.style.width = width + 'px'
  canvas.style.height = height + 'px'
  
  // Mantıksal piksellerle çizim yapabilmek için bağlamı ölçekle
  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) {
    // Pencere oyundan daha genişse yanlara şerit ekle
    height = windowHeight
    width = height * ASPECT
  } else {
    // Pencere oyundan daha uzunsa üste ve alta şerit ekle
    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'
  
  // Dahili çözünürlük sabit kalır
  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
  
  // Sığabilecek en büyük tam sayılı ölçeği bul
  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 // Yeniden boyutlandırıldı; projeksiyon matrislerini güncellemeniz gerekebilir
  }
  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
})

// Oyun kodunuzda responsive.width ve responsive.height kullanın

Service worker'lar, varlıkların nasıl önbelleğe alınacağını ve sunulacağını kontrol etmenizi sağlar. Oyunlar için bu, tekrar ziyaretlerde anında yükleme ve çevrimdışı destek anlamına gelir.

1) Service worker temelleri

Kök dizininizde sw.js dosyasını oluşturun:

// 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
})

Kaydedin:

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

2) Önce önbellek stratejisi (oyun varlıkları için en iyisi)

Önce önbellekten yükleyin, yalnızca önbellekte yoksa getirin:

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) Kritik varlıkları önceden önbelleğe alma

Install olayı, önceden önbelleğe alma için idealdir:

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) Dinamik içerik için önce ağ stratejisi

Değişen içerikler (liderlik tabloları, oyuncu verileri) için önce ağ stratejisini kullanın:

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) Eski içeriği sunup arka planda yenileme

Önbellekteki içeriği hemen döndürün, arka planda güncelleyin:

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) Önbellek sürümleme ve temizleme

Activate sırasında eski önbellekleri temizleyin:

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) Önbellekleri türe göre ayırma

Daha iyi yönetim için önbellekleri düzenleyin:

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) Ses/video için aralık istekleri

Baştan bilmeniz gereken bir nokta var: Cache API, kısmi yanıtları saklamaz. Bir 206 Partial Content yanıtı cache.put() işlevine ulaşırsa TypeError: Failed to execute 'put' on 'Cache': Partial response (status code 206) is unsupported hatasını verir. Bu nedenle önbelleğe alınmış medya için kalıp her zaman aynıdır: dosyanın tamamını normal bir 200 yanıtı olarak önceden önbelleğe alın (veya getirin), ardından Range başlığı içeren bir istek geldiğinde önbellekteki baytları dilimleyerek 206 yanıtını kendiniz oluşturun. Bunu kendiniz uygulamak istemiyorsanız Workbox'ın range-requests eklentisi, CacheFirst stratejisiyle eşleştirildiğinde bu dilimleme işlemini sizin için yapar.

Aralık isteklerini doğru şekilde işleyin (ses içinde ileri veya geri sarma için gereklidir):

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) Güncelleme bildirimi

Yeni bir sürüm hazır olduğunda oyunculara bildirin:

// 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>Yeni sürüm hazır!</span>
    <button onclick="location.reload()">Güncelle</button>
  `
  document.body.appendChild(banner)
}

10) Eksiksiz oyun service worker'ı

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('Çevrimdışı', { 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('Çevrimdışı', { 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
}

İlgili içerikler

• Çevrimdışı oyunlar için PWA
• Varlıkları akışla yükleme
• Hızlı yüklenen bir web oyunu yayınlama
• Oyunlar için Web Audio API — çevrimdışı oyun için ses varlıklarını önbelleğe alma
• IndexedDB ile oyun kayıtları — oyun durumunu önbelleğe alınmış varlıklarla birlikte kalıcı olarak saklama

Harici Kaynaklar

• MDN: Service Worker API — eksiksiz API referansı
• MDN: Cache API — Cache arayüzü referansı
• web.dev: Service worker'lar — önbelleğe alma stratejileri ve kalıpları
• Workbox — Google'ın service worker araçları için geliştirdiği kütüphane

Oyuncular saniyeler içinde oynamaya başlayamazsa oyundan çıkar. Bu eğitim, neredeyse her web oyunu teknoloji yığınına (Canvas/WebGL/WebGPU, Pixi/Three/PlayCanvas, özel motor vb.) uygulayabileceğiniz pratik bir kontrol listesidir.

1) Önce bütçeleri belirleyin (aksi hâlde optimizasyon yapamazsınız)

Hedef cihazınıza uygun bütçeler seçin. “Anında oyna” deneyimi için iyi bir varsayılan:

• Gönderilen JS+CSS: gzip ile ~300–500 KB'ın altında (ne kadar küçükse o kadar iyi)
• İlk girdiden önce gereken kritik varlıklar: sıkıştırılmış olarak ~2–5 MB'ın altında
• İlk girdiye kadar geçen süre: orta sınıf mobil cihazlarda ~3–5 saniyenin altında

Bunları yazılı hâle getirin ve API sözleşmeleri gibi ele alın.

2) Doğru şeyleri ölçün

Chrome DevTools'ta:

• Bir oturumu kaydetmek ve uzun görevleri incelemek için Performance'ı kullanın.
• Şunları kontrol etmek için Network'ü kullanın:
  • aktarım boyutu ile açılmış boyut
  • önbelleğe alma üstbilgileri
  • varlıkların aşamalı olarak akışla mı geldiği, yoksa tek bir dev veri bloğu olarak mı ulaştığı

Oyun açısından şunları takip edin:

• “Oyuncu hareket edebiliyor mu?” süresi
• “İlk anlamlı kare” süresi
• “İlk girdi gecikmesi” (girdi → kare)

“İlk girdi gecikmesi” yaklaşımınız artık standart bir metrikle örtüşüyor: Interaction to Next Paint (INP), Mart 2024'te Core Web Vital olarak First Input Delay'in yerini aldı ve yalnızca ilk etkileşimi değil, tüm etkileşimlerde girdiden sonraki çizime kadar geçen sürenin tamamını ölçüyor. Zaten takip ettiğiniz tepki hızı değerleri için yararlı bir harici referans olan 75. yüzdelik dilimde 200 ms'nin altında INP'yi hedefleyin.

3) Sıkıştırabildiğiniz her şeyi sıkıştırın

Barındırma hizmetinizin şunları sunduğundan emin olun:

• Kullanılabilir olduğunda metin varlıkları (JS/CSS/HTML/WASM) için Brotli (br)
• Yedek seçenek olarak gzip

Barındırma hizmetiniz ve CDN'iniz destekliyorsa Zstandard (zstd) artık Content-Encoding için üçüncü bir seçenektir. Chrome ve Edge 123+, Firefox 126+ ve Safari 26.3+ sürümlerinde (kullanıcıların yaklaşık %80'inde) desteklenir ve daha düşük sunucu CPU maliyetiyle Brotli seviyesinde sıkıştırma oranlarına ulaşabilir. Bu da büyük WASM ve JSON yükleri için faydalıdır. Tarayıcılar Accept-Encoding: zstd desteğini yalnızca HTTPS üzerinden bildirir; bu nedenle diğer herkes için Brotli ve gzip'i yedek seçenekler olarak yapılandırılmış hâlde tutun.

WebAssembly derlemelerinde sıkıştırma, çoğu zaman “anında açılıyor” ile “hiç yüklenmiyor” arasındaki farktır.

4) Tüm dünyayı en başta indirmeyin

Oyununuzu şu bölümlere ayırın:

• Başlatma: minimum yükleyici + girdi + ilk sahne
• Çekirdek: ana oynanış sistemleri
• İsteğe bağlı: ek bölümler, kozmetik öğeler, yüksek çözünürlüklü dokular, bonus sesler vb.

“İsteğe bağlı” içeriği yalnızca şu durumlarda yükleyin:

• oyuncu zaten oynayabiliyorsa ve/veya
• bu içeriği istediğini biliyorsanız (ör. bir menüye/bölüme ulaştıysa)

5) Doğru varlık biçimlerini seçin

Çoğu web oyunu için:

• Görseller: Arayüzler/arka planlar için WebP'yi (veya daha yavaş kodlamayı tolere edebiliyorsanız AVIF'i) tercih edin.
• Ses: Genel kullanım için Ogg Vorbis'i tercih edin; Apple ekosistemleri için AAC'yi test edin.
• Video: Uyumluluk için MP4/H.264'ü, desteklendiğinde ve daha küçük olduğunda WebM'yi tercih edin.

Kod çözme maliyetini göz önünde bulundurun: “daha küçük indirme”, yine de “daha yavaş kod çözme” anlamına gelebilir.

6) İlk sahnenizi küçük ve deterministik tutun

İlk etkileşimli sahnenizde şunlardan kaçının:

• ani ve yoğun gölgelendirici derlemeleri
• çok büyük doku yüklemeleri
• ana iş parçacığını engelleyen prosedürel üretim
• megabaytlarca veri bloğunun senkron JSON ayrıştırması

Özellikle dokular için PNG veya JPEG yerine Basis Universal ile KTX2 süper sıkıştırmasını kullanın. Yüklemeden sonra GPU üzerinde sıkıştırılmış hâlde kalır (yükleme sırasında masaüstünde BC7'ye veya mobilde ASTC'ye dönüştürülür); böylece VRAM kullanımı 4 ila 8 kat azalır ve yüklemeler, tam boyutlu bir PNG'nin kodunu çözüp ham pikselleri GPU'ya aktarmaktan çok daha düşük maliyetli olur.

Ağır işlemler yapmanız gerekiyorsa bunları:

• karelere yayarak artımlı biçimde veya
• mümkün olduğunda bir Worker içinde gerçekleştirin.

7) Agresif ama doğru biçimde önbelleğe alın

İçerik adresli varlıklar için uzun süreli önbelleğe alma kullanın:

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

Güncellemeleri güvenle dağıtabilmek için HTML giriş noktalarının önbellek süresini kısa tutun.

8) “Hatanın” hızlı ve anlaşılır olmasını sağlayın

Bir sorun oluşursa şunları gösterin:

• açık bir hata mesajı
• yeniden deneme düğmesi
• sorunu bildirmek için bir bağlantı

Sessiz hatalar güveni yok eder.

9) Wasm iş parçacıkları kullanıyorsanız COOP/COEP'i anlayın

Derlemeniz SharedArrayBuffer'a bağlıysa (bazı Wasm iş parçacığı kurulumlarında yaygındır), büyük olasılıkla çapraz kaynak yalıtımı üstbilgilerine ihtiyacınız olacaktır:

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

COEP üstbilgisi için iki seçeneğiniz vardır. require-corp katı seçenektir ancak kaynaklar arası her varlığın (CDN dokuları, üçüncü taraf betikleri) bir Cross-Origin-Resource-Policy üstbilgisi göndermesi gerekir; aksi takdirde varlık engellenir. Cross-Origin-Embedder-Policy: credentialless da SharedArrayBuffer ve çapraz kaynak yalıtımını etkinleştirir ancak kaynaklar arası varlıkların CORP ile açıkça izin vermesini zorunlu tutmak yerine bunları kimlik bilgileri olmadan yükler. Kontrolünüzde olmayan bir CDN'den varlık alıyorsanız credentialless genellikle daha az zahmetli seçenektir.

Üstbilgiler ve üçüncü taraf yerleştirmeleri sorunlara yol açabileceğinden gerçek barındırma ortamınızda erkenden test yapın.

10) SDK olmadan oynanabilir hâle getirin

Cinevva'nın içerik üreticisi iş akışını hedefliyorsanız şunları amaçlayın:

• güvenilir biçimde açılan tek bir URL
• demoyu başlatmak için zorunlu giriş olmaması
• öngörülebilir girdi kontrolleri

Böylece ek SDK'lar entegre etmeden dağıtıma hazır olursunuz.

İlgili içerikler:

• Oyun geliştiricileri için
• Yapay zekâyla üretilen içerik politikası
• Akışla varlık yükleme — büyük oyunlar için aşamalı yükleme kalıpları
• Oyunları önbelleğe almak için service worker'lar — sonraki ziyaretlerin anında açılması için varlıkları önbelleğe alın
• Web Oyunu Motorları Karşılaştırması — motorlar arasında derleme boyutları ve yükleme süreleri
• Oyununuzu itch.io'da Nasıl Yayınlarsınız? — tarayıcı oyunlarını itch.io yerleştirmeleri için optimize etme

Oyuncular 100 MB'lık bir indirmeyi beklemez. Varlıkları aşamalı olarak yükleyin; böylece geri kalanı arka planda yüklenirken oyuncular oynamaya başlayabilir.

1) Yükleme stratejisi

Varlıkları katmanlara ayırın:

1. Kritik — İlk ekranı göstermek için gerekli (< 1 MB)
2. Oynanış — Oynamak için gerekli (< 10 MB)
3. İyileştirme — Olması faydalı olanlar (arka planda yüklenir)

2) Temel varlık yükleyici

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) İlerleme göstergesiyle yükleme

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
}

Dikkat: Sunucu yanıtı sıkıştırdığında (çoğu CDN'in varsayılan olarak yaptığı gibi gzip veya brotli ile), Content-Length sıkıştırılmış boyutu belirtirken okuduğunuz parçaların sıkıştırması zaten açılmış olur. Bu nedenle received / total değeri %100'ü aşar. Sıkıştırılmış yanıtlarda bayt düzeyinde doğru bir ilerleme çubuğu elde etmek için varlığı sıkıştırmadan sunun, sıkıştırılmamış boyutu belirten kendi üstbilginizi gönderin veya gerçek aktarım ilerlemesini bildiren XMLHttpRequest'in onprogress olayını kullanın.

4) Genel ilerleme göstergesiyle toplu yükleme

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) Öncelik kuyruklu yükleyici

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) Bölümler için tembel yükleme

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) Büyük dosyaları akışla yükleme

Büyük dosyaları (3D modeller, sesler) akışla yükleyip aşamalı olarak işleyin:

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) Yüklenen varlıkları önbelleğe alma

Kalıcı önbellekleme için IndexedDB ile birleştirin:

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) Yükleme ekranı kalıbı

class LoadingScreen {
  constructor(canvas) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.progress = 0
    this.message = 'Yükleniyor...'
  }
  
  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) En iyi uygulamalar

• Hemen bir şey gösterin — statik bir görsel bile olabilir
• Önce görünür olanları yükleyin — mevcut görünümün dokuları
• Yer tutucular kullanın — sonradan yüksek çözünürlüklü sürümleriyle değiştirilen düşük çözünürlüklü görseller
• Sonraki bölümü önceden getirin — oyuncu hâlâ oynarken
• Hataları sorunsuz yönetin — yeniden deneme mantığı ve yedek seçenekler

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)))
    }
  }
}

İlgili içerikler

• Hızlı yüklenen bir web oyunu yayınlayın
• Oyun önbelleklemesi için service worker'lar
• IndexedDB ile oyun kayıtları
• Oyun mantığı için Web Worker'lar — varlıkların kodunu ana iş parçacığı dışında çözüp işleyin
• Ücretsiz oyun varlıkları nerede bulunur? — akışla yükleyebileceğiniz 3D modeller, dokular ve sesler için kaynaklar

Harici kaynaklar

• MDN: Fetch API — yanıtları akışla alma ve ReadableStream
• MDN: ReadableStream — akışla gelen veri parçalarını işleme
• glTF 2.0 teknik şartnamesi — 3D varlıkları akışla yüklemek için standart biçim

Metinler oyunların her yerindedir: skorlar, diyaloglar, menüler ve hasar sayıları. Bu eğitimde farklı yaklaşımları ve her birinin ne zaman kullanılacağını ele alacağız.

1) Canvas metninin temelleri

En basit yaklaşım:

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

Başlıklar ve HUD etiketleri için daha dar veya geniş aralıklara ihtiyacınız varsa Canvas bağlamı artık letterSpacing ve wordSpacing özelliklerini doğrudan destekliyor. Her ikisi de CSS uzunluk dizeleri kabul eder ve 2025'te tarayıcılar arası Baseline desteğine ulaştı. Bu nedenle karakter aralığını taklit etmek için glifleri artık tek tek çizmeniz gerekmez:

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

Bu değerler font ve fillStyle gibi bağlamda kalıcı olduğundan işiniz bittiğinde ikisini de '0px' değerine sıfırlayın.

2) Konturlu metin

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) Gölgeli metin

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

4) Bitmap yazı tipi oluşturma

Piksel sanatlı oyunlar veya platformlar arasında tutarlı bir görünüm için:

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
  }
}

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

5) Performans için önceden oluşturulmuş metin

Sabit metinleri bir kez oluşturup yeniden kullanın:

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
}

// Create once
const titleImage = createTextImage('MY GAME', '48px Impact', '#fff')

// Draw many times (fast)
ctx.drawImage(titleImage, x, y)

6) Daktilo efekti

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) Sözcük kaydırmalı metin

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) Diyalog kutusu sistemi

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) {
    // Box background
    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'
    ctx.fillRect(this.x, this.y, this.width, this.height)
    
    // Border
    ctx.strokeStyle = '#fff'
    ctx.lineWidth = 2
    ctx.strokeRect(this.x, this.y, this.width, this.height)
    
    // Text
    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
      )
    }
    
    // Continue indicator
    if (this.isComplete()) {
      ctx.fillText('▼', this.x + this.width - 24, this.y + this.height - 24)
    }
  }
}

9) Havada süzülen hasar sayıları

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
  }
}

// Manager
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) WebGL metni (SDF yazı tipleri)

WebGL oyunlarında Signed Distance Field yazı tipleri ölçeklendirildiğinde netliğini korur:

// SDF shader fragment
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);
  }
`

// Libraries like msdf-bmfont-xml can generate SDF font atlases

Özellikle three.js sahneleri için troika-three-text iyi bir seçenektir. Önceden bir atlas hazırlamak yerine .ttf/.otf/.woff dosyalarını ayrıştırır, SDF gliflerini bir web worker içinde anında oluşturur ve karakter aralığını, bitişik harfleri ve sağdan sola yazılan alfabeleri sizin yerinize işler.

Çoğu 2D Canvas oyunu için bitmap yazı tipleri veya önceden oluşturulmuş Canvas metinleri iyi sonuç verir.

İlgili içerikler

• Canvas 2D oyun döngüsü
• Piksel sanat oluşturma
• WebGL'in temelleri
• Duyarlı oyun canvas'ı — metni canvas çözünürlüğü ve DPI ile ölçeklendirme
• Ücretsiz oyun varlıkları nerede bulunur? — yazı tipi ve kullanıcı arayüzü varlık kaynakları

Tone.js, Web Audio API üzerine kuruludur ve sentezlenmiş sesleri pratik hâle getirir. Ses dosyaları yüklemek yerine sesleri programlı olarak üretirsiniz. Bu da sıfır yükleme süresi, sonsuz çeşitlilik ve oynanışa gerçek zamanlı tepki verebilen sesler anlamına gelir.

Deneyin (sentezlenmiş oyun seslerini duymak için düğmelere tıklayın):

<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 ready')
}, { once: true })

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

// Play a note
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
  
  // Master volume control
  sfxGain = new Tone.Gain(0.7).toDestination()
  
  // Soft synth for melodic sounds
  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 for deep impacts
  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 for texture
  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)

// Chain: 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 on beat 1
  if (beatInMeasure === 0) {
    bassSynth.triggerAttackRelease(chord.root, '4n', now, 0.6)
  }
  
  // Kick drum - only when energy is high
  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)
}

// Game events affect energy
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()
}

İyi sesler bir oyunu dönüştürür. Sessiz bir oyun cansız hissettirir. Web Audio API; düşük gecikmeli ses efektleri, müzik çalma ve hatta 3B uzamsal ses özelliklerini doğrudan tarayıcıda kullanmanızı sağlar.

Deneyin (sentezlenmiş sesleri duymak için bir düğmeye tıklayın):

let audioCtx = null

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

// Initialize on first interaction
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, JavaScript'i bir arka plan iş parçacığında çalıştırmanızı sağlar. Oyunlarda bu, fizik, yapay zekâ ve prosedürel üretimin kare kaybına yol açmadan çalışabileceği anlamına gelir.

1) Workers ne zaman kullanılmalı?

Uygun kullanım alanları:

• Fizik simülasyonu
• Yol bulma (A*, navmesh)
• Yapay zekâ karar verme
• Prosedürel üretim
• Varlık işleme (görüntü düzenleme, sıkıştırma)
• Karmaşık matematiksel işlemler (FFT, çarpışma algılama)

Şunlar için ideal değildir:

• Render işlemleri (Workers, DOM/Canvas'a doğrudan erişemez)
• Çok küçük görevler (iş parçacığı ek yüküne değmez)

2) Temel bir Worker oluşturma

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) {
  // Yoğun işlem burada
  return input * 2
}

main.js:

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

worker.onmessage = (e) => {
  const { type, data } = e.data
  if (type === 'result') {
    console.log('Sonuç alındı:', data)
  }
}

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

3) Satır içi Workers (ayrı dosya olmadan)

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) ES modülü Workers

Worker kodunu bir ES modülü olarak yazabilir ve importScripts yerine içinde import kullanabilirsiniz. Oluşturucuya { type: 'module' } iletin:

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

Ardından Worker içinde paylaşılan matematik, çarpışma veya yapay zekâ yardımcılarını ana iş parçacığında olduğu gibi import edebilirsiniz; böylece oyun mantığı yinelenmez. Modül Workers, Chrome ve Edge 80+, Safari 15+ ve Firefox 114+ sürümlerinde desteklenir.

5) Fizik Worker örneği

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) {
  // Fizik dünyasını başlat
}

function step() {
  // Fiziği güncelle
  for (const body of bodies) {
    body.vy += 9.8 * FIXED_DT // Yer çekimi
    body.x += body.vx * FIXED_DT
    body.y += body.vy * FIXED_DT
  }
  
  // Konumları geri gönder
  self.postMessage({
    type: 'positions',
    data: bodies.map(b => ({ id: b.id, x: b.x, y: b.y, rotation: b.rotation }))
  })
}

6) Performans için aktarılabilir nesneler

Büyük veriler kopyalanmadan aktarılabilir:

// Ana iş parçacığı
const positions = new Float32Array(1000)
worker.postMessage(positions, [positions.buffer])
// positions artık burada kullanılamaz (aktarıldı)

// Worker
self.onmessage = (e) => {
  const positions = e.data
  // Konumlarla çalış
  self.postMessage(positions, [positions.buffer])
}

7) Yol bulma Worker'ı

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* uygulaması
  const openSet = [start]
  const cameFrom = new Map()
  const gScore = new Map()
  gScore.set(key(start), 0)
  
  while (openSet.length > 0) {
    // ... A* mantığı
  }
  
  return reconstructPath(cameFrom, end)
}

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

8) Paralel görevler için Worker havuzu

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) Gerçek zamanlı senkronizasyon için SharedArrayBuffer

Kaynaklar arası yalıtım etkinleştirildiğinde belleği paylaşabilirsiniz:

// Ana iş parçacığı
const shared = new SharedArrayBuffer(1024)
const positions = new Float32Array(shared)

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

// Worker, paylaşılan belleği doğrudan okur/yazar
// Konum güncellemelerinde postMessage ek yükü yoktur

10) Workers için OffscreenCanvas

Render işlemlerini bir Worker içinde gerçekleştirin. OffscreenCanvas artık Chrome, Edge, Firefox ve Safari genelinde Baseline Widely Available durumundadır (Safari desteği macOS ve iOS'ta 17.0 sürümüyle eklendi):

// Ana iş parçacığı
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)
    // Çiz...
    requestAnimationFrame(render)
  }
  render()
}

11) Hata yönetimi

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

// Worker içinde
self.onerror = (e) => {
  self.postMessage({ type: 'error', message: e.message })
}

İlgili içerikler

• Hızlı yüklenen bir web oyunu yayınlayın
• Wasm iş parçacıklarını etkinleştirin (SharedArrayBuffer)
• Canvas 2D oyun döngüsü
• Oyun fiziği kütüphaneleri — Rapier veya Cannon-es'i bir Worker içinde çalıştırma
• Akışla varlık yükleme — varlıkları ana iş parçacığı dışında çözme
• 2026'da Web Oyunları Teknoloji Yığını — Workers'ın WebGL/WebGPU/Wasm yığınına nasıl uyduğu

Harici Kaynaklar

• MDN: Web Workers API — eksiksiz API referansı
• MDN: Web Workers Kullanımı — adım adım kılavuz
• MDN: Aktarılabilir nesneler — sıfır kopyalı veri aktarımı
• MDN: SharedArrayBuffer — iş parçacıkları arasında paylaşılan bellek

WebGL, tarayıcıda GPU'ya doğrudan erişim sağlar. 3D ve yüksek performanslı 2D web oyunlarının temelini oluşturur. Bu eğitimde temel konuları ele alacağız.

1) WebGL bağlamı oluşturma

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

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

Kullanılabildiğinde webgl2yi tercih edin; yaygın biçimde desteklenir ve daha gelişmiş özellikler sunar.

2) Render hattı (basitleştirilmiş)

1. Vertex shader, her vertex için bir kez çalışır. Geometrinizi konumlandırır.
2. Fragment shader, her piksel için bir kez çalışır. Çıktıyı renklendirir.
3. Buffer'lar verileri (konumlar, UV'ler, renkler) tutar.
4. Dokular, shader'ların örneklediği görsellerdir.

3) Minimal bir shader çifti

Vertex shader:

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

Fragment shader:

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

4) Shader'ları derleme ve bağlama

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) Buffer oluşturma

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) Buffer'ları shader'lara bağlama

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

7) Oyun döngüsü

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) Doku yükleme

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) Sık karşılaşılan sorunlar

• İkinin kuvveti boyutundaki dokular WebGL 2'de kesinlikle gerekli değildir ancak mipmap'ler bunlarla daha iyi çalışır.
• Bağlam kaybı: webglcontextlost olaylarını yönetin; mobil tarayıcılar bellek baskısı altında bağlamları bellekten çıkarabilir.
• Float dokular için uzantı kontrolleri (EXT_color_buffer_float) gerekir.

10) Ne zaman bir kütüphane kullanılmalı?

Saf WebGL ile kod yazmak çok ayrıntılıdır. Çoğu oyun için şunları değerlendirin:

• Three.js — tam özellikli 3D
• PixiJS — hızlı 2D render
• PlayCanvas — editörlü oyun motoru

Saf WebGL'yi şu durumlarda kullanın:

• maksimum kontrole ihtiyacınız varsa
• özel bir render sistemi geliştiriyorsanız
• sistemin gerçekte nasıl çalıştığını öğrenmek istiyorsanız

2026 için bir not: WebGPU artık tüm büyük tarayıcılarda varsayılan olarak sunuluyor (Chrome ve Edge'de 113. sürümden, Firefox'ta Windows için 141. ve macOS için 145. sürümden itibaren; ayrıca iOS 26, iPadOS 26 ve macOS Tahoe 26'daki Safari'de). Three.js gibi kütüphaneler WebGPU render sistemlerini otomatik WebGL 2 geri dönüşüyle çalıştırdığından, buradaki temeller hâlâ geçerlidir ve WebGL 2 güvenilir temel olmaya devam eder. Bugün sıfırdan yeni bir render sistemi geliştirmeye başlıyorsanız bir API'ye karar vermeden önce WebGPU eğitimini de bununla birlikte okuyun.

İlgili içerikler

• Oyunlar için WebGPU
• Canvas 2D oyun döngüsü
• Hızlı yüklenen bir web oyunu yayınlama
• 2026'da Web Oyunları Teknoloji Yığını — WebGL, WebGPU ve Wasm arasında ne zaman seçim yapılmalı?
• Oyun fiziği kütüphaneleri — WebGL üzerinden render yapan fizik motorları
• Web Oyun Motorları Karşılaştırması — Three.js, PixiJS, PlayCanvas ve diğerleri

Harici Kaynaklar

• MDN: WebGL API'si — eksiksiz API referansı
• WebGL2 Temelleri — ayrıntılı WebGL2 eğitim serisi
• Shader Kitabı — GLSL fragment shader'ları için etkileşimli rehber
• Three.js dokümantasyonu — en popüler WebGL çatısı

WebGPU, WebGL'nin halefidir. Daha düşük seviyeli, daha açık ve modern GPU'lar için tasarlanmış bir API'dir. 2026'da yeni bir 3D projeye başlıyorsanız WebGPU'yu öğrenmeye değer.

WebGPU Eğitimi: Kurulumdan aydınlatmalı ve animasyonlu 3D işlemeye kadar uzanan 10 proje

1) Tarayıcı desteğini kontrol edin

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

2026 itibarıyla WebGPU; Chrome, Edge, Firefox ve Safari'de kullanılabilir.

2) Bir cihaz edinin

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

Bağdaştırıcı, fiziksel GPU'yu temsil eder. Cihaz ise onunla iletişim kurmanızı sağlayan arayüzdür.

Her iki çağrı da başarısız olabilir. Sistemde kullanılabilir bir GPU olmadığında requestAdapter() değeri null döndürür ve requestDevice() çağrısı reddedilebilir; bu nedenle devam etmeden önce bunlara karşı önlem alın:

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

Bir bağdaştırıcıdan cihaz oluşturduğunuzda bağdaştırıcı da tüketilir; bu nedenle başka bir cihaza ihtiyacınız varsa yeni bir bağdaştırıcı isteyin.

3) Tuvali yapılandırın

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

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

4) Gölgelendiricileri WGSL ile yazın

WebGPU, GLSL yerine WGSL'yi (WebGPU Gölgelendirme Dili) kullanır.

@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) Bir gölgelendirici modülü oluşturun

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

6) Bir işleme işlem hattı oluşturun

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

7) Bir kare işleyin

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) WebGPU'da tamponlar

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) Tekbiçimli değişkenler için bağlama grupları

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 ve WebGL karşılaştırması

WebGPU ne zaman kullanılmalı?

• Modern tarayıcıları hedefleyen yeni projelerde
• Yoğun hesaplama gerektiren iş yüklerinde (fizik, yapay zekâ, prosedürel üretim)
• GPU kaynakları üzerinde ayrıntılı denetime ihtiyaç duyduğunuzda

İlgili içerikler

• WebGL'nin temelleri
• Oyun mantığı için Web Workers
• Hızlı yüklenen bir web oyunu yayınlayın
• 2026'da Web Oyunları Teknoloji Yığını — WebGL, WebGPU ve Wasm arasında seçim yapmak için karar çerçevesi
• COOP/COEP ve SharedArrayBuffer — WebGPU hesaplamayla Wasm iş parçacığı kullanımı için gerekli üst bilgiler

Harici Kaynaklar

• WebGPU belirtimi — W3C belirtimi
• WGSL belirtimi — WebGPU Gölgelendirme Dili belirtimi
• WebGPU'nun Temelleri — ayrıntılı eğitim serisi
• İlk WebGPU uygulamanız — adım adım Google Codelab rehberi

WebSocket ile çok oyunculu oyun geliştirme: sunucu mimarisi, oyun odaları ve durum senkronizasyonu

WebSocket'ler, çok oyunculu oyunlarda gerçek zamanlı iletişimi mümkün kılar. Bu eğitim, istemci tarafındaki temel konuları ele alır.

1) Bir sunucuya bağlanma

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

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

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

ws.onclose = () => {
  console.log('Bağlantı kesildi')
}

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

2) Mesaj protokolü tasarımı

Basit bir protokol tanımlayın:

// İstemci -> Sunucu
{ type: 'join', name: 'Player1' }
{ type: 'input', keys: { left: true, jump: true } }
{ type: 'chat', message: 'Merhaba!' }

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

3) Bağlantı yöneticisi sınıfı

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) Oyuncu girdilerini gönderme

Konumları değil, girdileri gönderin. Yetkili taraf sunucu olsun:

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++,
  })
}

// Girdiyi sabit bir hızda gönder (ör. saniyede 20 kez)
setInterval(() => {
  sendInput(currentInput)
}, 50)

5) Oyun durumunu alma

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) Akıcı hareket için enterpolasyon

Sunucu anlık durum görüntüleri gönderir. Bunların arasında enterpolasyon yapın:

class EntityInterpolator {
  constructor() {
    this.buffer = [] // { zaman damgası, durum }
    this.renderDelay = 100 // sunucunun ms cinsinden gerisinde
  }
  
  addSnapshot(timestamp, state) {
    this.buffer.push({ timestamp, state })
    
    // Yalnızca son anlık durum görüntülerini tut
    while (this.buffer.length > 10) {
      this.buffer.shift()
    }
  }
  
  getState(currentTime) {
    const renderTime = currentTime - this.renderDelay
    
    // Çevreleyen anlık durum görüntülerini bul
    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
    }
    
    // Enterpolasyon yap
    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) İstemci taraflı tahmin

Kontrollerin hızlı tepki vermesi için yerel olarak tahmin yapın ve sunucuyla uzlaştırın:

class PredictedPlayer {
  constructor() {
    this.position = { x: 0, y: 0 }
    this.pendingInputs = []
  }
  
  applyInput(input) {
    // Girdiyi yerel olarak uygula
    if (input.left) this.position.x -= 5
    if (input.right) this.position.x += 5
    
    // Uzlaştırma için sakla
    this.pendingInputs.push({ seq: input.seq, input })
  }
  
  reconcile(serverState, lastProcessedSeq) {
    // Sunucu tarafından doğrulanan konum
    this.position = { ...serverState.position }
    
    // Doğrulanan girdileri kaldır
    this.pendingInputs = this.pendingInputs.filter(i => i.seq > lastProcessedSeq)
    
    // Doğrulanmamış girdileri yeniden uygula
    for (const pending of this.pendingInputs) {
      if (pending.input.left) this.position.x -= 5
      if (pending.input.right) this.position.x += 5
    }
  }
}

8) Gecikme göstergesini yönetme

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) Verimlilik için ikili mesajlar

Yüksek frekanslı güncellemelerde ikili verileri kullanın:

// İkili veri gönderme
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)

// İkili veri alma
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) Temel sunucu örneği (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 })
  })
})

// Durumu saniyede 20 kez yayınla
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)
  }
}

İlgili içerikler

• Hızlı yüklenen bir web oyunu yayınlayın
• Oyun girdilerini yönetme
• Oyun mantığı için Web Workers
• COOP/COEP ve SharedArrayBuffer — çok oyunculu bağlamlarda SharedArrayBuffer için gerekli başlıklar
• 2026'da eşli oyun tasarımı — "friend slop" eşli oyunların neden hızla yayıldığı ve tarayıcı tabanlı çok oyunculu oyunların bu alandaki yeri
• Game Jam'ler ve Hackathon'lar — çok oyunculu jam oyunları daha fazla ilgi görür

Harici kaynaklar

• MDN: WebSocket API'si — tarayıcı WebSocket referansı
• MDN: WebRTC API'si — daha düşük gecikme için eşler arası bağlantılar
• MDN: WebTransport API'si — Safari 26.4'ün destek sunmasıyla Mart 2026'da tarayıcılar arası Baseline düzeyine ulaşan daha yeni bir HTTP/3 aktarım teknolojisi (Chrome 97+, Edge ve Firefox 114+ sürümlerinde zaten destekleniyordu). TCP tabanlı tek bir WebSocket bağlantısının aksine WebTransport, QUIC üzerinden çalışır; güvenilir olmayan datagramların yanı sıra birbirinden bağımsız birden fazla akış sunar. Böylece düşen tek bir paket, diğer tüm verileri sıra başı engellemesine maruz bırakmaz. Yaygın bir yaklaşım, yüksek frekanslı konum güncellemelerini datagramlar üzerinden gönderirken sohbeti veya skor tablolarını güvenilir bir akışta tutmaktır. WebSocket'ler hâlâ en uyumlu seçenektir ve yukarıdaki her şey geçerliliğini korur; ancak gecikmeye duyarlı oyunlarda artık WebTransport da değerlendirilmeye değer.
• Socket.IO belgeleri — popüler WebSocket sarmalayıcı kütüphanesi
• Valve Source Çok Oyunculu Ağ İletişimi — yayınlanmış oyunlarda kullanılan yetkili ağ iletişimi kalıpları

WebXR, VR ve AR'ı tarayıcıya getirir. Oyuncular hiçbir şey indirmeden oyununuzu bir başlıkla deneyimleyebilir.

1) WebXR desteğini kontrol etme

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 }
}

// Kullanım
const support = await checkXRSupport()
if (support.vr) {
  showVRButton()
}

2) VR oturumu başlatma

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)
    
    // Görüntü oluşturmayı ayarla
    const gl = canvas.getContext('webgl2', { xrCompatible: true })
    await xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, gl),
    })
    
    // Referans uzayını al
    xrRefSpace = await xrSession.requestReferenceSpace('local-floor')
    
    // Görüntü oluşturma döngüsünü başlat
    xrSession.requestAnimationFrame(onXRFrame)
  } catch (err) {
    console.error('VR başlatılamadı:', err)
  }
}

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

3) XR görüntü oluşturma döngüsü

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)
  
  // Her göz için görüntü oluştur
  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view)
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height)
    
    // Kamera matrislerini al
    const viewMatrix = view.transform.inverse.matrix
    const projectionMatrix = view.projectionMatrix
    
    // Sahneyi bu matrislerle oluştur
    renderScene(viewMatrix, projectionMatrix)
  }
}

4) Giriş kaynakları (kontrolcüler)

xrSession.addEventListener('inputsourceschange', (e) => {
  for (const source of e.added) {
    console.log('Kontrolcü eklendi:', source.handedness) // 'left' veya 'right'
  }
  for (const source of e.removed) {
    console.log('Kontrolcü kaldırıldı:', source.handedness)
  }
})

function processInput(frame) {
  for (const source of xrSession.inputSources) {
    if (!source.gamepad) continue
    
    const gamepad = source.gamepad
    
    // Tetik (genellikle indeks 0)
    const triggerPressed = gamepad.buttons[0]?.pressed
    const triggerValue = gamepad.buttons[0]?.value || 0
    
    // Kavrama (genellikle indeks 1)
    const gripPressed = gamepad.buttons[1]?.pressed
    
    // Başparmak çubuğu
    const thumbstickX = gamepad.axes[2] || 0
    const thumbstickY = gamepad.axes[3] || 0
    
    // A/B düğmeleri (indeks 4, 5)
    const buttonA = gamepad.buttons[4]?.pressed
    const buttonB = gamepad.buttons[5]?.pressed
  }
}

Her cihazda gamepad bulunduğunu varsaymayın

Yukarıdaki kod, tetikler ve başparmak çubukları için source.gamepad değerini okur. Bu, Meta Quest gibi kontrolcülü başlıklarda çalışır ancak birincil girişin bakış ve parmak kıstırma ya da el takibi olduğu Apple Vision Pro'da (WebXR, visionOS 2 Safari'de varsayılan olarak etkindir), Samsung Galaxy XR'da ve diğer Android XR cihazlarında hiçbir şey yapmaz. Bu başlıklarda source.gamepad null değerindedir ve kullanıcı gerçekten parmaklarını kıstırana kadar session.inputSources boş kalır.

Her cihazın garanti ettiği tek etkileşim olan “birincil eylem” için düğmeleri sürekli denetlemek yerine select olaylarını dinleyin. WebXR; bir kontrolcü tetiği, el hareketiyle parmak kıstırma ve Vision Pro'daki bakış ve parmak kıstırma için aynı şekilde selectstart, select ve selectend olaylarını gönderir. Böylece tek bir işleyici bunların tümünü kapsar:

xrSession.addEventListener('selectstart', (e) => {
  // e.inputSource kontrolcü, el veya geçici parmak kıstırma girişidir
  // e.frame, targetRaySpace pozunu okumanızı sağlar
})
xrSession.addEventListener('select', (e) => {
  // birincil eylem tamamlandı (tetik çekildi, hedef üzerindeki parmak kıstırma bırakıldı)
})
xrSession.addEventListener('selectend', (e) => {})

Kontrolcülü başlıklarda başparmak çubuğuyla hareket ve ek düğmeler için gamepad kodunu koruyun ancak bunu if (source.gamepad) koşulunun arkasına alın. Temel “seç/kavra/etkinleştir” etkileşiminizi bu olaylar üzerinden yönlendirin; böylece oyun el ve bakışla kontrol edilen cihazlarda da çalışır.

5) Kontrolcü konumları

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) İşaretleme için ışın gönderimi

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) Işınlanarak hareket

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) {
        // Nişan alma
        this.isAiming = true
        const ray = getControllerRay(frame, source)
        this.targetPosition = this.findTeleportTarget(ray)
      } else if (this.isAiming) {
        // Bırak — ışınlan
        if (this.targetPosition) {
          player.position.x = this.targetPosition.x
          player.position.z = this.targetPosition.z
        }
        this.isAiming = false
        this.targetPosition = null
      }
    }
  }
  
  findTeleportTarget(ray) {
    // Zemin düzlemiyle kesiştir
    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) Akıcı hareket

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
    
    // Ölü bölge uygula
    if (Math.abs(moveX) < 0.1) moveX = 0
    if (Math.abs(moveY) < 0.1) moveY = 0
    
    // Hareket için baş yönünü al
    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] }
    
    // XZ düzlemine göre normalleştir
    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) VR konfor yönergeleri

// Hareket hastalığını azaltmak için hareket sırasında vinyet
function renderComfortVignette(movementSpeed) {
  const intensity = Math.min(movementSpeed / 5, 0.5)
  if (intensity < 0.1) return
  
  // Hızla birlikte koyulaşan kenarları oluştur
  renderVignette(intensity)
}

// Kademeli dönüş
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 derece
    player.rotation += angle
    snapTurnCooldown = 0.3 // Hızlı dönüşleri önle
  }
}

10) Eksiksiz WebXR kurulumu

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
    
    // Oyun mantığını güncelle
    this.teleport.update(frame, this.session.inputSources)
    
    // Görüntüyü oluştur
    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) {
    // Görüntü oluşturma kodunuz buraya gelir
  }
  
  onEnd() {
    this.session = null
  }
}

İlgili içerikler

• WebGL temelleri
• WebGPU'ya başlangıç
• Oyun girişlerini işleme
• 2026'da Web Oyunları Teknoloji Yığını — WebXR'ın daha geniş teknoloji dünyasındaki yeri
• Tarayıcıda Three.js + USDC — XR sahneleri için 3D varlıkları yükleme

Harici Kaynaklar

• MDN: WebXR Device API — eksiksiz API referansı
• Immersive Web — WebXR örnekleri, araçları ve tarayıcı destek tabloları
• Three.js WebXR rehberi — Three.js ile VR içerikleri