KI-Programmierassistenten haben sich von einfacher Autovervollständigung zu autonomen Agenten entwickelt, die planen, mehrere Dateien bearbeiten, Tests ausführen und Pull Requests erstellen können. Dieses Tutorial behandelt die drei wichtigsten Werkzeuge: Claude Code, Cursor und GitHub Copilot.

1) Was macht ein Werkzeug „agentisch“?

Herkömmliche KI-Codevervollständigung schlägt die nächsten Zeilen vor. Agentische Werkzeuge gehen weiter:

Agentische Werkzeuge können deine gesamte Projektstruktur verstehen, Änderungen über mehrere Dateien hinweg planen, diese Änderungen ausführen, Tests starten und iterieren, bis die Aufgabe abgeschlossen ist.

2) Kurzer Vergleich: Claude Code vs. Cursor vs. Copilot

3) Grundlagen von Claude Code

Claude Code läuft auf Opus 4.8 (dem derzeitigen Standardmodell) und bietet große Kontextfenster. So installierst und authentifizierst du es:

# Claude Code installieren (nativer Installer, empfohlen)
curl -fsSL https://claude.ai/install.sh | bash

# Oder über npm (erfordert Node 18+)
npm install -g @anthropic-ai/claude-code

# Authentifizieren: claude ausführen und der Aufforderung im Browser folgen
claude

# In deinem Projekt starten
cd your-project
claude

Grundlegende Befehle

# Fragen zu deiner Codebasis stellen
claude "Wie ist die Authentifizierung hier implementiert?"

# Code generieren
claude "Füge eine Rate-Limiter-Middleware hinzu"

# Refactoring über mehrere Dateien
claude "Benenne UserService in der gesamten Codebasis in AuthService um"

# Einen PR erstellen
claude "Erstelle einen PR, der allen API-Endpunkten eine Eingabevalidierung hinzufügt"

Projektkonfiguration

Lege den Projektkontext in einer CLAUDE.md-Datei im Stammverzeichnis deines Repositorys ab. Claude Code liest sie automatisch zu Beginn jeder Sitzung:

# Projekthinweise

- Sprache: TypeScript, mit Prettier formatiert
- Tests: Vitest, in tests/
- node_modules/ und dist/ nicht verändern

Maschinenlesbare Einstellungen (Werkzeugberechtigungen, Umgebungsvariablen, Hooks) gehören in .claude/settings.json. Um beispielsweise vor der Ausführung destruktiver Werkzeuge eine Genehmigung zu verlangen, konfigurierst du dort die Berechtigungen.

Gedächtnis und Kontext

Dauerhafter Projektkontext befindet sich in CLAUDE.md-Dateien, die Claude Code zu Beginn jeder Sitzung lädt, sowie in einem automatischen Gedächtnisspeicher, den Claude anhand deiner Korrekturen und Präferenzen selbst aktualisiert. Um dauerhaften Kontext bereitzustellen, bearbeitest du CLAUDE.md, statt eine einmalige „Merke dir:“-Anweisung zu übergeben:

# CLAUDE.md
Dies ist ein Monorepo. Gemeinsam genutzter Code befindet sich in packages/.

Verwende innerhalb einer Sitzung den Befehl /clear, um den Arbeitskontext zurückzusetzen.

4) Agentische Funktionen der Cursor-IDE

Cursor wurde rund um agentische Workflows entwickelt. Zu den wichtigsten Funktionen gehören:

Agentenmodus

Drücke Cmd+Shift+I (Mac) oder Ctrl+Shift+I (Windows/Linux), um Composer im Agentenmodus zu öffnen:

Workflow im Agentenmodus:
1. Beschreibe deine Aufgabe
2. Der Agent erstellt einen Plan
3. Du genehmigst oder änderst ihn
4. Der Agent führt die Änderungen aus
5. Überprüfen und iterieren

Planungsmodus

Verwende bei komplexen Aufgaben ausdrücklich den Planungsmodus:

@plan Füge eine Benutzerauthentifizierung mit folgenden Funktionen hinzu:
- JWT-Tokens
- Rotation von Refresh-Tokens
- Passwort-Hashing mit bcrypt
- Ratenbegrenzung für Anmeldeversuche

Der Agent wird:

1. Deinen bestehenden Code untersuchen
2. Einen detaillierten Implementierungsplan erstellen
3. Auf deine Genehmigung warten
4. Den Plan Schritt für Schritt ausführen

Kontext einfügen

Verwende @, um gezielten Kontext hinzuzufügen:

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

Implementiere eine Middleware zur JWT-Verifizierung nach diesen Mustern

Parallele Agenten

Führe mehrere Agenten gleichzeitig in verschiedenen Branches aus:

# In Cursor:
1. Befehlspalette öffnen
2. "Cursor: New Agent in Worktree"
3. Jeder Agent arbeitet isoliert
4. Ergebnisse nebeneinander vergleichen

Cursor 3 hat ein Agents Window eingeführt (öffne es mit Cmd+Shift+P und anschließend „Agents Window“), das mehrere Agenten parallel über lokale Checkouts, Git-Worktrees und Cloud-Umgebungen hinweg ausführt. Der Befehl /worktree startet jeden Agenten in einem eigenen isolierten Git-Worktree, während /best-of-n dieselbe Aufgabe mit mehreren Modellen ausführt, sodass du die Ergebnisse nebeneinander vergleichen kannst.

Regeln für Konsistenz

Erstelle .cursor/rules/project.mdc:

# Projektregeln

## Codestil
- TypeScript im Strict Mode verwenden
- Funktionale Komponenten bevorzugen
- Benannte Exporte statt Standardexporten verwenden

## Tests
- Jede Funktion benötigt Tests
- describe/it-Blöcke verwenden
- Externe Dienste mocken

## Sicherheit
- Niemals Geheimnisse committen
- Alle Benutzereingaben validieren
- Parametrisierte Abfragen verwenden

5) Agentische Funktionen von GitHub Copilot

Copilot hat sich über die Autovervollständigung hinaus weiterentwickelt:

Copilot Chat

Öffne den Chatbereich und verwende Slash-Befehle:

/explain - Ausgewählten Code erklären
/fix - Probleme in der Auswahl beheben
/tests - Tests generieren
/doc - Dokumentation hinzufügen

Coding-Agent (vom Issue zum Pull Request)

# Auf GitHub:
1. Ein GitHub-Issue öffnen
2. "Copilot" als Bearbeiter zuweisen
3. Der Coding-Agent arbeitet im Hintergrund:
   Er analysiert das Issue, bearbeitet Dateien und führt Tests aus
4. Er öffnet einen Pull Request zur Überprüfung

Dies unterscheidet sich vom Agentenmodus von Copilot innerhalb der IDE, der in VS Code oder JetBrains synchron an deiner Seite arbeitet.

Copilot teilt seine autonome Arbeit inzwischen in zwei Bereiche auf: Der Agentenmodus läuft synchron in deiner IDE (VS Code und JetBrains), entscheidet, welche Dateien bearbeitet werden müssen, führt Terminalbefehle aus und iteriert bei Fehlern. Der Coding-Agent läuft dagegen asynchron in der Cloud, übernimmt ein zugewiesenes Issue und liefert einen Pull Request, während du an etwas anderem arbeitest.

Inline-Vorschläge mit Kontext

Copilot liest deine Codebasis. Unterstütze es mit Kommentaren:

// Authentifizierungs-Middleware, die:
// - das JWT aus dem Authorization-Header extrahiert
// - die Token-Signatur validiert
// - den Benutzer an die Anfrage anhängt
// - bei einem ungültigen Token 401 zurückgibt
export function authMiddleware(req, res, next) {
  // Copilot generiert die Implementierung
}

6) Best Practices für alle Werkzeuge

Klare Prompts schreiben

❌ Schlecht: "Behebe den Fehler"

✅ Gut: "Behebe die Nullzeiger-Ausnahme in UserService.getById,
wenn der Benutzer nicht existiert. Gib null zurück, statt eine Ausnahme auszulösen."

❌ Schlecht: "Füge Tests hinzu"

✅ Gut: "Füge Unit-Tests für CartService hinzu, die Folgendes abdecken:
- Artikel zu einem leeren Warenkorb hinzufügen
- Artikel entfernen
- Summen mit Rabatten berechnen
- Grenzfall: negative Mengen"

Bei komplexen Aufgaben den Planungsmodus verwenden

Bei jeder Aufgabe, die mindestens 3 Dateien betrifft:

1. Zuerst nach einem Plan fragen
2. Den Plan überprüfen
3. Genehmigen oder ändern
4. Den Agenten die Aufgabe ausführen lassen
5. Änderungen vor dem Committen überprüfen

Architekturkontext bereitstellen

Informiere den Agenten vor größeren Arbeiten:

"Dies ist eine Microservices-Architektur:
- api-gateway: Leitet Anfragen weiter
- auth-service: JWT, Sitzungen
- user-service: Benutzer-CRUD
- notification-service: E-Mail, Push-Benachrichtigungen

Die Dienste kommunizieren über Redis Pub/Sub.
Die Datenbank ist PostgreSQL mit Prisma ORM."

Testgetriebene Entwicklung mit Agenten

1. Zuerst einen fehlschlagenden Test schreiben:
   "Schreibe einen Test für die Benutzerregistrierung, der eine E-Mail-Validierung erwartet"

2. Dem Agenten den fehlschlagenden Test zeigen:
   "Implementiere die Registrierung so, dass dieser Test erfolgreich ist"

3. Iterieren, bis alle Tests erfolgreich sind:
   "Behebe die verbleibenden Testfehler"

7) Sicherheitsaspekte

Agentische Werkzeuge haben echte Befugnisse. Setze Grenzen:

Genehmigungsschranken

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

Sandboxing

# Agenten in isolierten Umgebungen ausführen
docker run -v $(pwd):/workspace -it claude-sandbox

# Oder Git-Worktrees zur Isolation verwenden
git worktree add ../feature-branch feature-branch

Vertrauliche Dateien

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

Alle Änderungen überprüfen

# Vor dem Akzeptieren von Änderungen des Agenten:
git diff --stat
git diff

# Interaktives Staging verwenden
git add -p

# Niemals ohne Überprüfung automatisch mergen

8) Bewährte Workflow-Muster

Muster 1: Erkunden, planen, ausführen

Sitzung 1: "Wie funktioniert das Zahlungssystem?"
           → Der Agent erkundet es, du lernst es kennen

Sitzung 2: "Was wäre erforderlich, um Stripe hinzuzufügen?"
           → Der Agent erstellt einen Plan

Sitzung 3: "Implementiere die Stripe-Integration"
           → Der Agent führt den Plan aus

Muster 2: Parallele Erkundung

# In Cursor mit parallelen Agenten:

Agent 1: "Implementiere Caching mit Redis"
Agent 2: "Implementiere Caching mit Memcached"
Agent 3: "Implementiere Caching mit einem In-Memory-LRU-Cache"

→ Implementierungen vergleichen und den besten Ansatz auswählen

Muster 3: Schrittweise Migration

Schritt 1: "Ermittle alle Verwendungen der veralteten API"
Schritt 2: "Erstelle einen Adapter für die neue API"
Schritt 3: "Migriere Modul A zur Verwendung des Adapters"
Schritt 4: "Migriere Modul B ..."
...
Schritt N: "Entferne den Adapter und verwende die neue API direkt"

Muster 4: Testorientierte Funktionsentwicklung

1. "Schreibe Akzeptanztests für die Bearbeitung von Benutzerprofilen"
2. "Schreibe Unit-Tests für die Profilvalidierung"
3. "Implementiere die Funktion so, dass die Tests erfolgreich sind"
4. "Füge Integrationstests hinzu"
5. "Führe ein Refactoring für bessere Verständlichkeit durch"

9) Wann welches Werkzeug verwenden?

10) Effektivität messen

Verfolge diese Kennzahlen, um agentische Werkzeuge zu bewerten:

const metrics = {
  // Produktivität
  suggestionsAccepted: 'Prozentsatz der Vorschläge, die du übernommen hast',
  timeToFeature: 'Stunden vom Beginn bis zum gemergten PR',
  linesPerHour: 'Codegeschwindigkeit (mit Bedacht verwenden)',
  
  // Qualität
  bugsIntroduced: 'Fehler, die auf KI-generierten Code zurückzuführen sind',
  testCoverage: 'Testabdeckung des KI-generierten Codes',
  reviewChanges: 'Umfang deiner Änderungen an KI-Vorschlägen',
  
  // Kosten
  apiCosts: 'monatliche Ausgaben für KI-Werkzeuge',
  creditsUsed: 'verbrauchte Cursor-Credits',
  
  // Lernen
  newPatternsLearned: 'Techniken, die du von der KI gelernt hast',
  codebaseUnderstanding: 'wie gut dir die KI beim Verständnis der Codebasis geholfen hat',
}

11) Häufige Fallstricke

Dem Agenten zu sehr vertrauen

❌ Große Änderungen ohne Überprüfung akzeptieren
❌ Agenten destruktive Befehle ausführen lassen
❌ Code veröffentlichen, ohne ihn zu verstehen

✅ Jede Änderung überprüfen
✅ Verstehen, was du veröffentlichst
✅ Agenten als Mitwirkende und nicht als Ersatz verwenden

Kontextverschmutzung

❌ Riesige Prompts mit irrelevantem Kontext
❌ Kontext zwischen unabhängigen Aufgaben nicht löschen
❌ Generierte Dateien in den Kontext aufnehmen

✅ Prompts fokussiert halten
✅ Gezielte @file-Verweise verwenden
✅ Build-Artefakte ausschließen

Mehrdeutige Prompts

❌ "Mach es besser"
❌ "Behebe die Probleme"
❌ "Füge einige Tests hinzu"

✅ "Reduziere die Zeitkomplexität von O(n²) auf O(n log n)"
✅ "Behandle den null-Fall in Zeile 45 durch eine vorzeitige Rückgabe"
✅ "Füge Tests für Grenzfälle hinzu: leere Eingabe, maximale Länge, Unicode"

12) Checkliste für den Einstieg

## Einrichtungscheckliste

### Claude Code
- [ ] CLI installieren: `npm install -g @anthropic/claude-code`
- [ ] Authentifizieren: `claude login`
- [ ] `.claude/config.json` erstellen
- [ ] `.claudeignore` für vertrauliche Dateien hinzufügen

### Cursor
- [ ] Von cursor.com herunterladen
- [ ] VS-Code-Einstellungen importieren
- [ ] `.cursor/rules/` konfigurieren
- [ ] `Cmd+Shift+I` für den Agentenmodus lernen

### GitHub Copilot
- [ ] Erweiterung in deiner IDE installieren
- [ ] Copilot Chat aktivieren
- [ ] Copilot Workspace für Issues ausprobieren
- [ ] `.github/copilot-instructions.md` konfigurieren

### Alle Werkzeuge
- [ ] Genehmigungsschranken für destruktive Aktionen einrichten
- [ ] Ignore-Dateien für Geheimnisse erstellen
- [ ] Überprüfungsworkflow festlegen
- [ ] Kennzahlen vom ersten Tag an erfassen

Verwandte Themen

• Ein Webspiel veröffentlichen, das schnell lädt
• Web Workers für Spiellogik
• Game Jams & Hackathons — KI-Codewerkzeuge verändern, was in einem 48-stündigen Jam möglich ist
• Webspiel-Engines im Vergleich — eine Engine auswählen, die gut zu KI-gestützten Workflows passt

Analytik hilft dir zu verstehen, was Spieler tun, wo sie hängen bleiben und was sie bei der Stange hält. Dieses Tutorial zeigt, was du verfolgen solltest und wie.

1) Was du verfolgen solltest

Engagement-Kennzahlen:

• Sitzungsstarts und Dauer
• Begonnene und abgeschlossene Level
• Genutzte Funktionen
• Bindung (Wiederbesuche)

Performance-Kennzahlen:

• Ladezeit
• Bildrate
• Speicherverbrauch
• Fehler und Abstürze

Conversion-Kennzahlen:

• Abschluss des Tutorials
• Erster Kauf
• Teilen in sozialen Netzwerken

2) Einfaches Event-Tracking

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) Sitzungen verfolgen

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

// 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) Performance überwachen

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)

Ruckler mit Long Animation Frames zuordnen

Der FPS-Zähler oben sagt dir, wann Frames wegbrechen, aber nicht warum. Die Long-Animation-Frames-API (LoAF), ausgeliefert in Chrome und Edge 123, schließt diese Lücke. Sie markiert jeden Frame, der länger als 50 ms dauert, und schlüsselt auf, welche Skripte die Verzögerung verursacht haben, sodass du Ruckler konkretem Code zuordnen kannst, statt zu raten.

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 gibt es bislang nur in Chromium (kein Firefox, kein Safari), prüfe also vor der Nutzung auf Verfügbarkeit und behalte den FPS-Zähler als browserübergreifende Basis.

6) Fehler verfolgen

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) Ladezeiten verfolgen

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

Verfolge, wie Spieler durch zentrale Abläufe kommen:

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) Unterstützung für A/B-Tests

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

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>We use analytics to improve the game. Is that okay?</p>
    <button id="accept">Accept</button>
    <button id="decline">Decline</button>
  `
  document.body.appendChild(dialog)
  
  dialog.querySelector('#accept').onclick = () => {
    analytics.setConsent(true)
    dialog.remove()
  }
  
  dialog.querySelector('#decline').onclick = () => {
    analytics.setConsent(false)
    dialog.remove()
  }
}

Alternativen von Drittanbietern

Wenn du nichts Eigenes bauen willst:

• Plausible — datenschutzorientiert, einfach
• Amplitude — Produktanalytik, Funnel
• Mixpanel — Event-Tracking, Nutzerreisen
• Sentry — speziell für Fehler-Tracking

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

Verwandt

• Ein Web-Spiel ausliefern, das schnell lädt
• Spielstände in IndexedDB
• Für Creator
• Wie du dein Spiel auf itch.io veröffentlichst — Analytik auf itch.io und Downloads verfolgen
• Strategieleitfaden zum Steam Next Fest — Wunschlisten und Demo-Conversion messen

Externe Ressourcen

• Plausible Analytics — datenschutzfreundliche, schlanke Analytik
• PostHog — quelloffene Produktanalytik mit Event-Tracking
• Sentry — Fehlerüberwachung und Absturzberichte für Web-Apps

Die Spielschleife ist der Herzschlag deines Spiels. Sie läuft ununterbrochen, aktualisiert den Spielzustand und zeichnet Frames, so schnell der Browser es erlaubt. Machst du das richtig, wird alles andere leichter. Machst du es falsch, jagst du Fehlern hinterher, die nur auf bestimmten Rechnern auftauchen.

Probier es aus (Pfeiltasten oder WASD):

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

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

function update() {
  // Game logic here
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // Drawing here
}

gameLoop()

let lastTime = 0

function gameLoop(currentTime) {
  const dt = (currentTime - lastTime) / 1000 // convert to seconds
  lastTime = currentTime
  
  update(dt)
  render()
  
  requestAnimationFrame(gameLoop)
}

function update(dt) {
  player.x += player.speed * dt // now works at any frame rate
}

requestAnimationFrame(gameLoop)

const FIXED_DT = 1 / 60 // 60 physics updates per second
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
  
  // Keep in bounds
  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)
}

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

// In update:
playerWalk.update(dt)

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

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

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

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

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

function render() {
  ctx.save()
  ctx.translate(-camera.x, -camera.y)
  
  // Draw world
  drawWorld()
  drawEntities()
  
  ctx.restore()
  
  // Draw UI (not affected by camera)
  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('PAUSED', canvas.width / 2, canvas.height / 2)
}

Wenn dein Web-Spiel (oder ein Engine-Export) WebAssembly-Threads nutzt, hängt es meist an SharedArrayBuffer. Moderne Browser verlangen dafür Cross-Origin-Isolation.

1) Kurzer Check: bist du isoliert?

Öffne die DevTools und führ das aus:

self.crossOriginIsolated

Ist das Ergebnis true, bist du im richtigen Sicherheitszustand für SharedArrayBuffer.

Offizielle Referenz:

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

2) Die zwei Header, die du brauchst

Liefere diese Response-Header für dein HTML aus (und in der Regel für die ganze App):

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

Offizielle Referenzen:

• 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) Grund Nummer 1, warum es „immer noch nicht geht": Subressourcen

Mit COEP: require-corp kann deine Seite Cross-Origin-Ressourcen nicht mehr frei einbinden.

Lädst du ein Script, Bild, Worker, Video oder Ähnliches von einer anderen Origin, muss diese Ressource ausdrücklich zustimmen, über:

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

Offizielle Referenz:

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

4) Konfigurationen zum Kopieren

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) Checkliste zur Fehlersuche

• Prüfe im Netzwerk-Panel, ob die Header auf der Dokument-Response wirklich ankommen.
• Prüfe self.crossOriginIsolated.
• Halte nach blockierten Requests Ausschau (die DevTools melden typischerweise „blocked … by COEP").
• Entferne Drittanbieter-Scripts ohne CORS/CORP oder hoste sie selbst.

Verwandt

• Ein Web-Spiel ausliefern, das schnell lädt
• Tech-Stack für Web-Spiele 2026
• Web Workers für Spiellogik — Worker nutzen, die von SharedArrayBuffer profitieren
• WebSocket-Multiplayer-Grundlagen — Multiplayer-Spiele, die Cross-Origin-Isolation brauchen
• Spiele per Iframe einbetten — wie COOP/COEP-Header Iframe-Embeds beeinflussen

Externe Ressourcen

• MDN: Cross-Origin-Opener-Policy — Referenz zum COOP-Header
• MDN: Cross-Origin-Embedder-Policy — Referenz zum COEP-Header
• web.dev: Making your website cross-origin isolated — praktischer Deployment-Leitfaden

Gute Eingabeverarbeitung entscheidet über ein Spiel. Träge Steuerung, verschluckte Eingaben oder verwirrende Tastenbelegungen frustrieren Spieler, bevor sie überhaupt den Inhalt deines Spiels sehen. Dieses Tutorial zeigt, wie du Tastatur, Maus, Touch und Gamepad einheitlich behandelst.

Probier es zuerst aus:

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

Physiksimulation erweckt Spiele zum Leben: fallende Objekte, springende Bälle, Ragdolls, Fahrzeuge und zerstörbare Umgebungen. Dieser Leitfaden behandelt die wichtigsten Physik-Bibliotheken für Web-Spiele, mit echten Codebeispielen und ehrlichen Vor- und Nachteilen.

Auf einen Blick

Legende:

• CCD = Continuous Collision Detection, verhindert, dass schnelle Objekte durch Wände tunneln
• ⚠️ Determinismus = mit festem Zeitschritt möglich, aber plattformübergreifend nicht garantiert

Kurze Empfehlungen

Ausführlicher Vergleich

3D-Physik-Engines

2D-Physik-Engines

3D-Physik-Engines

Rapier — die moderne Wahl

Rapier ist eine Physik-Engine in Rust mit JavaScript- und WASM-Bindings. Sie ist 2025 und 2026 die leistungsstärkste Option für Web-Spiele, mit 2- bis 5-facher Beschleunigung gegenüber der Version von 2024.

Installation:

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

Grundaufbau:

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)

Einbindung in die Spielschleife:

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

Kollisionserkennung:

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

Gelenke:

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

Fahrzeugcontroller:

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

Vorteile:

• Beste Leistung (WASM plus SIMD)
• Sehr genaue Kollisionserkennung
• Plattformübergreifender Determinismus (gleiche Eingaben ergeben gleiche Ausgaben)
• Aktive Entwicklung, moderne API
• Continuous Collision Detection, kein Tunneln
• Charakter- und Fahrzeugcontroller eingebaut

Nachteile:

• Größeres Bundle (~1,4 MB)
• Asynchrone Initialisierung nötig
• Komplexere API als reine JS-Alternativen
• WASM-Debugging kann heikel sein

Cannon-es — einfach und wirkungsvoll

Cannon-es ist der gepflegte Fork von Cannon.js. Reines JavaScript, leicht verständlich, gut zum Lernen und für Prototypen.

Installation:

npm install cannon-es

Grundaufbau:

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)

Spielschleife:

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

Kollisions-Events:

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

Constraints:

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

Vorteile:

• Reines JavaScript, keine WASM-Komplexität
• Kleines Bundle (~150 KB)
• Leicht zu lernen und zu debuggen
• Läuft überall
• Gute Three.js-Integration
• Gute Dokumentation

Nachteile:

• Langsamer als WASM-Alternativen
• Schwächelt bei vielen Körpern (über 100)
• Eingeschränkte Trimesh-Unterstützung
• Kein eingebautes CCD, Tunneln möglich
• Weniger aktive Entwicklung

Ammo.js — die volle Kraft von Bullet Physics

Ammo.js ist die Bullet-Physics-Engine, kompiliert nach WebAssembly. Maximaler Funktionsumfang, inklusive Soft Bodies, Fahrzeugen und fortgeschrittenen Constraints.

Installation:

npm install ammo.js
# Or use from CDN

Grundaufbau:

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
}

Soft Bodies (Stoff):

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
}

Fahrzeugphysik:

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
}

Vorteile:

• Der vollständigste Funktionsumfang
• Soft Bodies, Stoff, Seile
• Fortgeschrittene Fahrzeugphysik
• Praxiserprobt, in vielen AAA-Spielen im Einsatz
• Sehr konfigurierbar

Nachteile:

• Komplexe, geschwätzige API
• Großes Bundle
• Speicherverwaltung nötig, Objekte müssen zerstört werden
• Steile Lernkurve
• Verstreute Dokumentation
• Nicht plattformübergreifend deterministisch, nur auf demselben Gerät und mit sorgfältiger Konfiguration

Jolt — moderne 3D-Physik auf AAA-Niveau

Jolt Physics ist die Engine hinter Spielen wie Horizon Forbidden West, und JoltPhysics.js bringt sie als WASM-Port in den Browser. Sie ist ein starker Mittelweg zwischen Rapier und Ammo.js: mehr Funktionen als Rapier (Soft Bodies, Stoff, ein Fahrzeugcontroller mit Rädern) bei aktiver Pflege, die Ammo.js fehlt. Das npm-Paket heißt jolt-physics, und es gibt fertige Integrationen für React Three Fiber (@react-three/jolt) und Babylon.js.

npm install jolt-physics

Wie Rapier ist es asynchron initialisiertes WASM mit einer geschwätzigen, aber vollständigen API, die die C++-Schnittstelle spiegelt. Greif zu Jolt, wenn du Funktionen der Bullet-Klasse willst (Soft Bodies, Fahrzeuge), aber eine gepflegte, moderne Codebasis statt Ammo.js bevorzugst.

Oimo.js — leichtgewichtig und schnell

Oimo.js ist eine leichtgewichtige 3D-Physik-Engine. Gut für einfache Spiele, in denen du keine fortgeschrittenen Funktionen brauchst.

Installation:

npm install oimo

Grundaufbau:

import * as OIMO from 'oimo'

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

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

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

Spielschleife:

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

Vorteile:

• Sehr klein (~100 KB)
• Einfache API
• Gute Leistung bei einfachen Szenen
• Eingebaute Babylon.js-Unterstützung

Nachteile:

• Wenige Formen, nur Primitive
• Keine Soft Bodies
• Dünne Dokumentation
• Weniger aktive Entwicklung
• Wenige Gelenkoptionen

2D-Physik-Engines

Matter.js — schön und eingängig

Matter.js ist eine funktionsreiche 2D-Physik-Engine mit hervorragendem Rendering und guten Debug-Werkzeugen.

Installation:

npm install matter-js

Grundaufbau:

import Matter from 'matter-js'

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

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

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

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

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

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

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

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

Kollisions-Events:

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

Constraints:

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

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

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

Mausinteraktion:

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)

Vorteile:

• Schönes Standard-Rendering
• Gut zum Lernen und Prototypen
• Eingängige API
• Gute Dokumentation
• Aktive Community
• Standardmäßig deterministisch, Matter.Runner nutzt jetzt einen festen deterministischen Zeitschritt (der nicht feste Zeitschritt wurde in v0.20.0 entfernt)

Nachteile:

• Kein CCD, schnelle Objekte können tunneln, mit Substepping abmildern
• Leistungsprobleme bei vielen Körpern
• Keine WASM-Option
• Begrenzte Präzision bei komplexen Simulationen

Planck.js — Box2D für JavaScript

Planck.js ist eine vollständige Neufassung von Box2D in JavaScript. Praxiserprobte Physik, deterministisch bei festem Zeitschritt.

Installation:

npm install planck

Grundaufbau:

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

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

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

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

Spielschleife mit festem Zeitschritt:

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

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

Kollisions-Callbacks:

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

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

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

Gelenke:

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

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

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

Vorteile:

• Deterministisch mit festem Zeitschritt
• Gut dokumentiert, die Box2D-Doku gilt
• Gute Leistung
• TypeScript-Unterstützung
• Kleines Bundle

Nachteile:

• CCD erfasst keine Gelenke, schnelle über Gelenke verbundene Objekte können sich dehnen
• Steilere Lernkurve als Matter.js
• Kein eingebauter Renderer
• Box2D-Eigenheiten, der Maßstab der Einheiten zählt

p2-es — flexible 2D-Physik

p2-es ist der gepflegte Fork von p2.js. Gut für Spiele, die komplexe Constraints und Mechanismen brauchen.

Installation:

npm install p2-es

Grundaufbau:

import * as p2 from 'p2-es'

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

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

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

Fortgeschrittene Constraints:

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

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

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

Kontaktmaterialien:

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

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

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

Vorteile:

• Reichhaltiges Constraint-System
• Kontaktmaterialien
• Gut für Mechanismen und Maschinen
• Schlafende Körper, gut für die Leistung
• ES-Module, tree-shakable

Nachteile:

• Kein eingebauter Renderer
• Einige Formenpaare nicht unterstützt
• Weniger aktiv als die Alternativen
• Lücken in der Dokumentation

Tipps zur Leistung

1. Nutz einen festen Zeitschritt

const TIMESTEP = 1 / 60
let accumulator = 0

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

2. Lass inaktive Körper schlafen

Die meisten Engines unterstützen Schlafen. Schalte es ein:

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

// Rapier
bodyDesc.setCanSleep(true)

3. Nutz einfache Kollisionsformen

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

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

4. Reduziere Solver-Iterationen, vorsichtig

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

// Rapier - configured at world creation

5. Lass Physik in einem Web Worker laufen

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

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

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

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

Wann was passt

Integration mit Renderern

Three.js + Rapier

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

await RAPIER.init()

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

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

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

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

PixiJS + Matter.js

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

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

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

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

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

Typische Stolperfallen

Der Maßstab zählt

Physik-Engines arbeiten am besten mit realem Maßstab (1 Einheit = 1 Meter). Nutz nicht direkt Pixelkoordinaten.

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

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

Speicherlecks bei WASM-Engines

Räum Körper beim Entfernen immer sauber auf:

// Rapier
world.removeRigidBody(body)

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

Tunneln, wenn Objekte einander durchdringen

Schnelle Objekte können durch dünne Wände tunneln. Lösungen:

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

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

Verwandt

• WebGL-Grundlagen für Spieleentwickler
• Web Workers für Spiellogik — Physik in einen Worker-Thread auslagern
• Ein Web-Spiel ausliefern, das schnell lädt
• Canvas-2D-Spielschleife — das Muster mit festem Zeitschritt, das jede Physik-Engine nutzt
• Tech-Stack für Web-Spiele 2026 — wo Physik-Engines in den größeren Stack passen
• Web-Game-Engines im Vergleich — Engines mit eingebauter Physik

Externe Ressourcen

• Rapier documentation — offizielle Doku und Beispiele zu Rapier
• Cannon-es documentation — API-Referenz und Anleitungen
• Matter.js documentation — vollständige API-Referenz
• Planck.js documentation — Box2D für JavaScript

Die Gamepad-API bringt Controller-Unterstützung in Konsolenqualität in Web-Spiele. Unterstütze Xbox, PlayStation, Switch Pro und generische Controller.

1) Gamepads erkennen

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

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

2) Den Gamepad-Zustand abfragen

Der Gamepad-Zustand muss abgefragt werden, er kommt nicht als Event:

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

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

3) Die Standard-Tastenbelegung

Die "Standard"-Belegung (die meisten Xbox- und PlayStation-Controller):

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

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

4) Tasten und Sticks auslesen

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

5) Totzonen behandeln

Sticks ruhen selten exakt auf 0:

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

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

6) Radiale Totzone (besser für 2D-Bewegung)

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

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

7) Ein vollständiger Gamepad-Manager

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

// Usage
const gamepadManager = new GamepadManager()

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

8) Vibration und haptisches Feedback

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

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

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

9) Mehrere Spieler

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

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

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

10) Rückfall und kombinierte Eingabe

Unterstütze Tastatur und Gamepad gleichzeitig:

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

Verwandt

• Eingaben in Spielen
• Mobilfreundliche Web-Spiele
• Canvas-2D-Spielschleife
• Pointer Lock für Shooter — Gamepad mit Mausblick kombinieren
• Koop-Spieldesign — für mehrere Controller-Eingaben im lokalen Koop entwerfen

Externe Ressourcen

• MDN: Gamepad API — vollständige API-Referenz
• MDN: Using the Gamepad API — Schritt-für-Schritt-Anleitung
• Gamepad Tester — teste deine Controller-Belegung im Browser

Viele Plattformen (Itch.io, Newgrounds, Cinevva, deine eigene Seite) betten Spiele in Iframes ein. Dieses Tutorial zeigt, wie dein Spiel eingebettet gut funktioniert.

1) Grundaufbau für Einbettung

Dein Spiel sollte laufen, ohne die volle Kontrolle über die Seite zu brauchen:

<!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) Den Iframe-Kontext erkennen

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

if (isEmbedded) {
  // Adjust behavior for embedded context
  hideExternalLinks()
  adjustUIForSmallSize()
}

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

3) Nötige Iframe-Berechtigungen erlauben

Die übergeordnete Seite bestimmt, was dein Iframe darf. Übliche Berechtigungen:

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

Dein Spiel sollte mit fehlenden Berechtigungen sauber umgehen:

// Check if fullscreen is available
const canFullscreen = document.fullscreenEnabled || document.webkitFullscreenEnabled

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

4) Vollbild aus dem Iframe

Vollbild verlangt das Attribut allow="fullscreen":

async function requestFullscreen() {
  const elem = document.documentElement
  
  try {
    if (elem.requestFullscreen) {
      await elem.requestFullscreen()
    } else if (elem.webkitRequestFullscreen) {
      await elem.webkitRequestFullscreen()
    }
  } catch (err) {
    // Fullscreen not allowed - show message
    showMessage('Fullscreen not available when embedded')
  }
}

5) Mit der übergeordneten Seite kommunizieren

Nutze postMessage für sichere Kommunikation über Origins hinweg:

In deinem Spiel:

// Send message to parent
function notifyParent(type, data) {
  if (window.parent !== window) {
    window.parent.postMessage({ type, data, source: 'game' }, '*')
  }
}

// Receive messages from parent
window.addEventListener('message', (event) => {
  // Validate origin if needed
  // 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
  }
})

// Notify when game is ready
window.addEventListener('load', () => {
  notifyParent('ready', { width: 800, height: 600 })
})

// Notify on game events
function onGameOver(score) {
  notifyParent('gameover', { score })
}

In der übergeordneten Seite:

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

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

// Send commands to game
function pauseGame() {
  iframe.contentWindow.postMessage({ type: 'pause' }, '*')
}

6) Mit dem Fokus umgehen

Iframes können den Fokus verlieren, was die Tastatureingabe kaputt macht:

// Auto-focus canvas when clicked
canvas.addEventListener('click', () => {
  canvas.focus()
})

// Make canvas focusable
canvas.tabIndex = 1

// Handle focus loss
window.addEventListener('blur', () => {
  // Reset held keys
  input.left = input.right = input.up = input.down = false
  
  if (isEmbedded) {
    // Optionally pause
    // pauseGame()
  }
})

// Request focus from parent
function requestFocus() {
  notifyParent('requestFocus', {})
}

7) Auf verschiedene Einbettungsgrößen reagieren

Rechne mit unterschiedlichen Maßen:

function handleResize() {
  const width = window.innerWidth
  const height = window.innerHeight
  
  // Adjust UI based on size
  if (width < 400 || height < 300) {
    enableCompactUI()
  } else {
    enableFullUI()
  }
  
  // Scale game appropriately
  resizeCanvas(width, height)
}

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

8) Ladeanzeige für Embeds

Zeig sofort irgendetwas:

// Inline in HTML for instant display
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>Loading...</p>
    </div>
  </div>
`

// Remove when game is ready
function hideLoading() {
  const loading = document.getElementById('loading')
  if (loading) {
    loading.style.opacity = '0'
    loading.style.transition = 'opacity 0.3s'
    setTimeout(() => loading.remove(), 300)
  }
}

9) Plattformeigene SDKs

Manche Plattformen haben eigene APIs:

Itch.io:

// No SDK required, but can use postMessage for achievements
window.parent.postMessage({ type: 'itch-achievement', data: { id: 'first-win' }}, '*')

Newgrounds:

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

Cinevva:

// Signal game is ready
window.parent.postMessage({ type: 'cinevva:ready' }, '*')

// Signal playable state
window.parent.postMessage({ type: 'cinevva:playable' }, '*')

10) Sicherheitsaspekte

// Validate message origins when sensitive
window.addEventListener('message', (event) => {
  const trustedOrigins = [
    'https://itch.io',
    'https://cinevva.com',
    'https://yoursite.com'
  ]
  
  if (!trustedOrigins.includes(event.origin)) {
    return // Ignore untrusted messages
  }
  
  // Process message...
})

// Don't expose sensitive operations via postMessage
// Only allow whitelisted commands
const allowedCommands = ['pause', 'resume', 'setVolume', 'mute']

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

Testcheckliste

• Lokal testen: Nutz einen einfachen HTTP-Server, nicht file://
• Cross-Origin: Teste mit echter Iframe-Einbettung
• Berechtigungen: Teste mit eingeschränkter Sandbox
• Fokus: Teste die Tastatur, nachdem du außerhalb des Iframes geklickt hast
• Größenänderung: Teste verschiedene Einbettungsgrößen
• Mobil: Teste Touch im eingebetteten Kontext

<!-- Test embed page -->
<!DOCTYPE html>
<html>
<body style="background: #333; padding: 20px;">
  <h1 style="color: #fff;">Embed Test</h1>
  <iframe 
    src="http://localhost:8000" 
    width="800" 
    height="600"
    allow="fullscreen; autoplay; gamepad"
  ></iframe>
</body>
</html>

Verwandt

• Ein Web-Spiel ausliefern, das schnell lädt
• Mobilfreundliche Web-Spiele
• Für Creator
• COOP/COEP und SharedArrayBuffer — Cross-Origin-Header, die die Iframe-Einbettung beeinflussen
• Wie du dein Spiel auf itch.io veröffentlichst — itch.io bettet Browser-Spiele nativ in Iframes ein

Externe Ressourcen

• MDN: iframe element — vollständige Referenz zu den Iframe-Attributen
• MDN: Permissions Policy — steuern, welche Funktionen Iframes nutzen dürfen
• MDN: postMessage API — Kommunikation zwischen Iframe und übergeordneter Seite

IndexedDB ist die beste Option für dauerhafte Spieldaten im Browser. Es kommt mit großen Datenmengen zurecht, funktioniert offline und blockiert den Haupt-Thread nicht.

1) Warum IndexedDB statt localStorage?

Für Spiele ist IndexedDB fast immer die richtige Wahl.

2) Eine Datenbank öffnen

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) Spielstand speichern

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) Spielstand laden

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) Alle Spielstände auflisten

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) Einen Spielstand löschen

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) Eine vollständige GameStorage-Klasse

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) Binärdaten ablegen (Texturen, Audio)

IndexedDB kommt mit Blobs und ArrayBuffers zurecht:

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) Muster für Autosave

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) Fehlerbehandlung und Rückfallwege

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) Spielstände vor dem Verdrängen schützen

IndexedDB bleibt nicht garantiert erhalten. Standardmäßig nutzt eine Origin "Best-Effort"-Speicher, und der Browser darf ihn räumen, wenn die Platte volläuft oder, unter Safari/WebKit, nach längerer Zeit ohne Nutzerinteraktion mit deiner Seite. Bei Spielständen sind das genau die Daten, die du nicht verlieren willst.

Fordere persistenten Speicher an, damit der Browser deine Daten nicht ohne ausdrückliche Nutzeraktion löscht:

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

Browser entscheiden anhand von Interaktionssignalen, ob sie das gewähren (wie stark der Nutzer mit deiner Seite interagiert, ob sie als PWA installiert ist), nimm also nicht an, dass es immer klappt. Du kannst auch prüfen, wie viel Platz du hast, bevor du große Spielstände oder gecachte Assets schreibst:

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

Beide APIs brauchen einen sicheren Kontext (HTTPS oder localhost).

Verwandt

• PWA für Offline-Spiele
• Service Worker fürs Spiel-Caching
• Ein Web-Spiel ausliefern, das schnell lädt
• Streaming von Assets — IndexedDB als Asset-Cache nutzen
• Analytik für Web-Spiele — Speicher- und Lademuster verfolgen, um Spielerverhalten zu verstehen

Externe Ressourcen

• MDN: IndexedDB API — vollständige API-Referenz
• MDN: Using IndexedDB — Schritt-für-Schritt-Anleitung
• idb library — ein winziger Promise-basierter IndexedDB-Wrapper

Mobil ist die größte Gaming-Plattform. Mit ein paar Anpassungen läuft dein Web-Spiel auch auf Handys und Tablets richtig gut.

1) Viewport einrichten

Zoom verhindern und saubere Skalierung sicherstellen:

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

2) Bildschirmfüllendes 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%;
}

Wenn du UI an der Viewport-Höhe statt an height: 100% ausrichtest, nimm die dynamischen Viewport-Einheiten dvh, svh und lvh statt vh. Sie berücksichtigen die ein- und ausfahrende Werkzeugleiste mobiler Browser, die 100vh ignoriert (unter iOS ist 100vh die Höhe bei ausgeblendeter Leiste, der untere Teil deines Layouts wird also abgeschnitten). Diese Einheiten haben Baseline Widely Available erreicht und werden in Chrome/Edge ab 108, Firefox ab 101 und Safari/iOS Safari ab 15.4 unterstützt, also von rund 92 % der Nutzer.

3) Touch-Events behandeln

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

Soll dein Spiel auch mit Maus oder Stift funktionieren, zieh Pointer Events (pointerdown/pointermove/pointerup) statt Touch-Events in Betracht. MDN empfiehlt sie inzwischen als einheitliches, geräteunabhängiges Eingabemodell: Ein Codepfad deckt Touch, Maus und Stift ab, und Multi-Touch funktioniert weiterhin über pointerId (das Gegenstück zum oben genutzten touch.identifier). Für reine Touch-Spiele sind Touch-Events aber völlig in Ordnung.

4) Virtueller 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) Touch-Buttons

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) Ausrichtung behandeln

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) Performance optimieren

// 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) Rücksicht auf den Akku

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

Ein Vorbehalt: Die Fullscreen-API funktioniert auf dem iPhone nicht für allgemeine Elemente. iOS Safari bietet Vollbild nur für native Video-Elemente (über das nicht standardisierte webkitEnterFullscreen), documentElement.requestFullscreen() schlägt auf dem iPhone also fehl. Das try/catch oben fängt das sauber ab, entwirf dein Spiel also so, dass es auf dem iPhone auch ohne echtes Vollbild spielbar ist, und behandle Vollbild als Zugabe auf iPad, Android und Desktop, wo es unterstützt wird. Der Aufruf screen.orientation.lock() hat auf dem iPhone dieselbe Einschränkung, verlass dich also nicht darauf.

10) Testcheckliste

Vor dem Ausliefern:

• Touch-Reaktion — auf echten Geräten testen, nicht nur in Emulatoren
• Verschiedene Bildschirmgrößen — Handy, Tablet, iPad Pro
• Beide Ausrichtungen — oder auf eine festlegen
• Schwache Geräte — auf 2 bis 3 Jahre alten Handys testen
• Langsame Netze — mit 3G-Simulation testen
• Safari unter iOS — hat Eigenheiten bei Audio und Vollbild
• Chrome unter Android — der häufigste Browser
• Unterbrechungen — Anrufe, Benachrichtigungen
• Speicherdruck — erholt es sich, nachdem der Tab im Hintergrund war?

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

Verwandt

• Eingaben in Spielen
• Responsives Spiel-Canvas
• PWA für Offline-Spiele
• Web-Audio-API für Spiele — mit iOS-Audiobeschränkungen umgehen
• Ein Web-Spiel ausliefern, das schnell lädt — Ladezeiten für mobile Verbindungen optimieren
• Spiele per Iframe einbetten — was beim Einbetten auf Mobilgeräten zu beachten ist

Externe Ressourcen

• MDN: Touch events — Multi-Touch behandeln
• MDN: Screen Orientation API — Ausrichtung festlegen
• MDN: Fullscreen API — Vollbild auf Mobilgeräten
• web.dev: Responsive design — responsive Muster, die auch für Spiel-UI gelten

Pixel-Art sieht großartig aus, wenn sie richtig gerendert wird, und schrecklich, wenn sie verschwimmt. Dieses Tutorial zeigt die Techniken für knackige, authentische Pixelgrafik.

1) Das Problem mit der Unschärfe

Standardmäßig glätten Browser Bilder beim Skalieren. Für Pixel-Art ist das falsch:

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

2) Einstellungen am Canvas-Kontext

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

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

Das muss nach jeder Größenänderung des Canvas und jedem Kontextwechsel neu gesetzt werden.

3) Ganzzahlige Skalierung

Pixel-Art sieht bei ganzzahligen Skalierungen am besten aus (1x, 2x, 3x, 4x):

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

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

4) Sprites an ganzzahligen Positionen zeichnen

Subpixel-Positionen erzeugen Unschärfe:

// 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) Animation mit Sprite-Sheets

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

Klassische Technik zum Umfärben von Sprites:

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) Tilemaps rendern

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) Umriss-Effekte

Umrisse machen Sprites besser sichtbar:

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

Klassischer Effekt fürs Spielgefühl:

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) Beschränkte Farbpaletten

Authentische Pixel-Art nutzt begrenzte Paletten:

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
}

Verwandt

• Canvas-2D-Spielschleife
• Responsives Spiel-Canvas
• Streaming von Assets
• Wo du kostenlose Game-Assets findest — Sprite-Sheets, Pixel-Art-Pakete und Quellen für 2D-Assets
• Textdarstellung in Spielen — Bitmap-Fonts, die zu deinem Pixel-Art-Stil passen

Die Pointer-Lock-API fängt den Mauszeiger ein und ermöglicht flüssige Kamerasteuerung im Shooter-Stil. Unverzichtbar für Ego- und Third-Person-Shooter.

1) Pointer Lock anfordern

Pointer Lock verlangt eine Nutzergeste:

const canvas = document.getElementById('game')

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

Rohe Mauseingabe (Beschleunigung abschalten)

Standardmäßig wendet der Browser die Mausbeschleunigung des Betriebssystems auf movementX/movementY an, ein schnelles Zucken und ein langsames Ziehen über dieselbe Strecke drehen die Kamera also unterschiedlich weit. Beim Zielen im Shooter willst du meist das Gegenteil: Dieselbe physische Strecke soll die Kamera immer gleich weit drehen. Fordere rohe, unbeschleunigte Bewegung an, indem du unadjustedMovement: true an requestPointerLock() übergibst:

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

Das moderne requestPointerLock() gibt ein Promise zurück, das bei Erfolg auflöst und bei Misserfolg rejectet, deshalb steht der Aufruf oben in einem try/catch. Chrome und Edge beachten unadjustedMovement seit Version 88, Safari unterstützt es seit 18.4 (März 2025), also seit derselben Version, die auch requestPointerLock auf ein Promise umgestellt hat. Ältere Browser, die kein Promise zurückgeben, funktionieren hier trotzdem, weil await einen Nicht-Promise-Wert verträgt und die unbekannte Option einfach ignoriert wird. Behalte den einfachen requestPointerLock()-Rückfall also immer.

2) Den Sperrzustand erkennen

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) Mausbewegung auslesen

Ist der Zeiger gesperrt, nutz movementX und movementY:

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) Eine Klasse für die Ego-Kamera

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

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) Ein vollständiger Ego-Controller

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

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) Schießen mit den Maustasten

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) Einstellungen zur Empfindlichkeit

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) Hinweis zum Verlassen

Zeig eine Anleitung, wie man Pointer Lock verlässt:

function showLockUI() {
  const ui = document.getElementById('lock-ui')
  
  if (document.pointerLockElement) {
    ui.innerHTML = '<p>Press ESC to unlock mouse</p>'
    ui.style.opacity = '0.5'
    setTimeout(() => ui.style.opacity = '0', 2000)
  } else {
    ui.innerHTML = '<p>Click to play</p>'
    ui.style.opacity = '1'
  }
}

document.addEventListener('pointerlockchange', showLockUI)

Eines solltest du zum Verlassen wissen: Drückt der Spieler ESC, um Pointer Lock zu beenden, verlangt der Browser eine frische Nutzergeste (einen Klick), bevor du erneut sperren kannst, und genau dafür gibt es das Overlay "Click to play". Ruft dein eigener Code dagegen document.exitPointerLock() auf (etwa um ein Ingame-Menü zu öffnen), braucht es danach keine neue Geste, du kannst also beim Schließen des Menüs programmatisch wieder sperren. Wiederholtes Drücken von ESC kann dem Browser außerdem signalisieren, erneutes Sperren zu verweigern, bis eine bewusstere Nutzeraktion kommt, versuch also kein automatisches Wiedersperren bei pointerlockchange.

Hinweise zu Iframes

Pointer Lock in Iframes verlangt das Attribut allow="pointer-lock":

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

Prüfe, ob Pointer Lock verfügbar ist:

if (!document.pointerLockElement && !('requestPointerLock' in canvas)) {
  showMessage('Mouse capture not available')
}

Verwandt

• Eingaben in Spielen
• Gamepad-API
• WebGL-Grundlagen
• WebXR-Grundlagen — VR-Steuerung für Ego-Erlebnisse
• WebGPU-Einstieg — modernes GPU-Rendering für Shooter

Externe Ressourcen

• MDN: Pointer Lock API — vollständige API-Referenz
• MDN: MouseEvent.movementX — Mausdeltas auslesen

Progressive Web Apps lassen Spieler dein Spiel installieren und offline spielen. Dieses Tutorial zeigt, wie du einem Web-Spiel PWA-Unterstützung gibst.

1) Web App Manifest

Leg manifest.json an:

{
  "name": "My Awesome Game",
  "short_name": "AwesomeGame",
  "description": "An awesome game you can play offline",
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "landscape",
  "background_color": "#1a1a2e",
  "theme_color": "#4ade80",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Verlink es in deinem HTML:

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

2) Einfacher Service Worker

Leg sw.js an:

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) Den Service Worker registrieren

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

4) Cache zuerst, Netz im Hintergrund

Für Spiele besser, weil es schnell lädt und im Hintergrund aktualisiert:

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) Versionierter Cache für Updates

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) Mit Spiel-Updates umgehen

Sag Spielern Bescheid, wenn ein Update bereitsteht:

// In main app
let refreshing = false

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

function showUpdateNotification() {
  const banner = document.createElement('div')
  banner.innerHTML = `
    <p>Game updated! Refresh to get the latest version.</p>
    <button onclick="location.reload()">Refresh</button>
  `
  banner.className = 'update-banner'
  document.body.appendChild(banner)
}

7) Offline-Erkennung

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

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

Unter iOS und iPadOS wird das Event beforeinstallprompt nie ausgelöst, der Installations-Button oben erscheint also nur in Chromium-Browsern. Auf iPhone und iPad installiert man über Teilen und dann "Zum Home-Bildschirm". Eine Änderung aus 2026 ist wissenswert: Ab Safari 26 (iOS 26 / iPadOS 26) öffnet jede zum Home-Bildschirm hinzugefügte Seite standardmäßig als Web-App, mit einem Schalter "Als Web-App öffnen", der von Haus aus aktiv ist. Eine Installierbarkeitsanforderung gibt es unter iOS nicht mehr, ein Manifest und ein Service Worker sorgen aber weiterhin für ein deutlich besseres Offline-Erlebnis.

9) Background Sync für Bestenlisten

Zur Unterstützung: Die Background Sync API gibt es nur in Chromium-Browsern (Chrome, Edge, Opera, Samsung Internet). Firefox und Safari (auch iOS) unterstützen sie nicht, prüfe also immer auf Verfügbarkeit und halte einen Rückfallweg bereit, der Punktstände beim nächsten normalen App-Start überträgt.

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

Chrome DevTools:

• Application > Service Workers
• Application > Manifest
• Application > Cache Storage
• Network > Checkbox Offline

Lighthouse-Audit:

• PWA-Audit ausführen
• Installierbarkeit prüfen
• Offline-Fähigkeit prüfen

Test auf echten Geräten:

• Auf dem Home-Bildschirm des Handys installieren
• Flugmodus aktivieren
• Alle Funktionen offline testen

Verwandt

• Service Worker fürs Spiel-Caching
• Spielstände in IndexedDB
• Ein Web-Spiel ausliefern, das schnell lädt
• Mobilfreundliche Web-Spiele — Touch-Steuerung und Viewport für PWA-Spiele
• Streaming von Assets — Ladestrategien, die mit Service-Worker-Caching zusammenspielen

Externe Ressourcen

• MDN: Progressive Web Apps — vollständige PWA-Dokumentation
• web.dev: Learn PWA — Googles Lernpfad zu PWAs
• MDN: Web App Manifest — Referenz zur Manifest-Datei

Ein Canvas, das nicht sauber skaliert, sieht unscharf aus oder bricht auf anderen Bildschirmgrößen. Ich habe dieses Problem öfter debuggt, als ich zählen kann, lass mich dir die Mühe ersparen.

Probier verschiedene Skalierungsmodi:

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
  
  // Set internal resolution to match physical pixels
  canvas.width = width * dpr
  canvas.height = height * dpr
  
  // Set CSS size to match logical pixels
  canvas.style.width = width + 'px'
  canvas.style.height = height + 'px'
  
  // Scale context so you can draw in logical pixels
  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) {
    // Window is wider than game, add bars on sides
    height = windowHeight
    width = height * ASPECT
  } else {
    // Window is taller than game, add bars on top/bottom
    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'
  
  // Internal resolution stays fixed
  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
  
  // Find largest integer scale that fits
  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 // Resized, you may need to update projection matrices
  }
  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
})

// In your game code, use responsive.width and responsive.height

Mit Service Workern steuerst du, wie Assets gecacht und ausgeliefert werden. Für Spiele heißt das sofortiges Laden bei Wiederbesuchen und Offline-Unterstützung.

1) Grundlagen zum Service Worker

Leg sw.js in deinem Wurzelverzeichnis an:

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

Registriere ihn:

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

2) Cache-first (am besten für Spiel-Assets)

Aus dem Cache laden und nur holen, was nicht gecacht ist:

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) Kritische Assets vorab cachen

Das Install-Event eignet sich perfekt fürs Vorab-Caching:

const CACHE_NAME = 'game-v1'

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

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

4) Network-first für dynamische Inhalte

Nimm Network-first für Dinge, die sich ändern (Bestenlisten, Spielerdaten):

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

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

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

5) Stale-while-revalidate

Sofort aus dem Cache antworten und im Hintergrund aktualisieren:

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) Cache-Versionierung und Aufräumen

Alte Caches beim Aktivieren aufräumen:

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) Getrennte Caches nach Typ

Caches ordnen macht sie leichter handhabbar:

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

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

8) Range-Requests für Audio und Video

Eines vorab: Die Cache-API speichert keine Teilantworten. Erreicht jemals eine 206-Partial-Content-Antwort cache.put(), wirft sie TypeError: Failed to execute 'put' on 'Cache': Partial response (status code 206) is unsupported. Das Muster für gecachte Medien ist deshalb immer dasselbe: Die vollständige Datei als normale 200-Antwort vorab cachen (oder holen) und die 206 dann selbst bauen, indem du die gecachten Bytes schneidest, sobald eine Anfrage mit Range-Header ankommt. Wer das nicht von Hand schreiben will, bekommt genau dieses Schneiden vom range-requests-Plugin von Workbox, kombiniert mit einer CacheFirst-Strategie.

Range-Requests sauber behandeln (nötig fürs Spulen in Audio):

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

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

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

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

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

9) Update-Hinweis

Sag Spielern, wenn eine neue Version bereitsteht:

// 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>New version available!</span>
    <button onclick="location.reload()">Update</button>
  `
  document.body.appendChild(banner)
}

10) Ein vollständiger Service Worker fürs Spiel

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

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

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

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

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

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

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

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

Verwandt

• PWA für Offline-Spiele
• Streaming von Assets
• Ein Web-Spiel ausliefern, das schnell lädt
• Web-Audio-API für Spiele — Audio-Assets fürs Offline-Spielen cachen
• Spielstände in IndexedDB — Spielzustand neben gecachten Assets sichern

Externe Ressourcen

• MDN: Service Worker API — vollständige API-Referenz
• MDN: Cache API — Referenz zur Cache-Schnittstelle
• web.dev: Service workers — Caching-Strategien und Muster
• Workbox — Googles Bibliothek für Service-Worker-Tooling

Wenn Spieler nicht in Sekunden loslegen können, springen sie ab. Dieses Tutorial ist eine praktische Checkliste, die du auf fast jeden Web-Spiel-Stack anwenden kannst (Canvas/WebGL/WebGPU, Pixi/Three/PlayCanvas, eigene Engine und so weiter).

1) Erst Budgets setzen (sonst kannst du nicht optimieren)

Wähle Budgets, die zu deinem Zielgerät passen. Ein solider Standard für ein Sofort-Spielerlebnis:

• Ausgeliefertes JS+CSS: unter ~300–500 KB gzip (kleiner ist besser)
• Kritische Assets vor der ersten Eingabe: unter ~2–5 MB komprimiert
• Zeit bis zur ersten Eingabe: unter ~3–5 Sekunden auf einem Mittelklasse-Handy

Schreib sie auf und behandle sie wie API-Verträge.

2) Das Richtige messen

In den Chrome DevTools:

• Nutze Performance, um eine Sitzung aufzuzeichnen und lange Tasks zu untersuchen.
• Nutze Network, um zu prüfen:
  • Übertragungsgröße gegen dekodierte Größe
  • Caching-Header
  • ob Assets progressiv streamen oder als ein riesiger Klumpen ankommen

In Spielbegriffen verfolgst du:

• die Zeit bis "kann sich der Spieler bewegen?"
• die Zeit bis zum "ersten sinnvollen Frame"
• die "Latenz der ersten Eingabe" (Eingabe bis Frame)

Dein Gespür für die Eingabelatenz entspricht heute einer Standardmetrik: Interaction to Next Paint (INP) hat im März 2024 First Input Delay als Core Web Vital abgelöst und misst die volle Zeit von der Eingabe bis zum nächsten Frame über alle Interaktionen hinweg, nicht nur die erste. Ziel ist ein INP unter 200 ms im 75. Perzentil, ein nützlicher externer Maßstab für die Reaktionswerte, die du ohnehin verfolgst.

3) Komprimiere alles, was geht

Stell sicher, dass dein Hosting ausliefert:

• Brotli (br) für Textassets (JS/CSS/HTML/WASM), wo verfügbar
• gzip als Rückfalloption

Wenn Host und CDN es unterstützen, ist Zstandard (zstd) inzwischen eine dritte Option für Content-Encoding. Es steckt in Chrome und Edge ab 123, Firefox ab 126 und Safari ab 26.3 (rund 80 % der Nutzer) und erreicht Brotli-nahe Raten bei geringerer Server-CPU-Last, was bei großen WASM- und JSON-Payloads hilft. Browser bewerben Accept-Encoding: zstd nur über HTTPS, halte also Brotli und gzip als Rückfall für alle anderen konfiguriert.

Bei WebAssembly-Builds ist Kompression oft der Unterschied zwischen "sofort" und "lädt nie".

4) Lade nicht die ganze Welt im Voraus

Teile dein Spiel auf in:

• Boot: minimaler Loader, Eingabe und erste Szene
• Core: die zentralen Gameplay-Systeme
• Optional: weitere Level, Kosmetik, hochauflösende Texturen, Bonus-Audio und so weiter

Lade "Optional" erst, wenn:

• der Spieler schon spielen kann, und/oder
• du weißt, dass er diese Inhalte will (etwa weil er ein Menü oder Level erreicht hat)

5) Die richtigen Asset-Formate wählen

Für die meisten Web-Spiele:

• Bilder: nimm WebP (oder AVIF, wenn du langsameres Encoding verkraftest) für UI und Hintergründe.
• Audio: nimm Ogg Vorbis für den allgemeinen Fall, teste AAC für das Apple-Ökosystem.
• Video: nimm MP4/H.264 für Kompatibilität, WebM, wo es unterstützt wird und kleiner ist.

Behalte die Dekodierkosten im Blick: "kleinerer Download" kann trotzdem "langsamer zu dekodieren" heißen.

6) Halte die erste Szene klein und berechenbar

Vermeide in deiner ersten interaktiven Szene:

• Stürme von Shader-Kompilierungen
• riesige Textur-Uploads
• prozedurale Generierung, die den Haupt-Thread blockiert
• synchrones JSON-Parsen von Megabyte-Klumpen

Speziell bei Texturen liefere KTX2 mit Basis-Universal-Superkompression statt PNG oder JPEG aus. Sie bleibt nach dem Upload GPU-komprimiert (beim Laden transkodiert zu BC7 auf dem Desktop oder ASTC auf Mobilgeräten), was das VRAM um das 4- bis 8-Fache senkt und Uploads weit günstiger macht, als ein volles PNG zu dekodieren und rohe Pixel auf die GPU zu schieben.

Wenn du schwere Arbeit erledigen musst, dann:

• verteilt über mehrere Frames, oder
• in einem Worker (wo möglich)

7) Aggressiv cachen (aber richtig)

Nutze langlebiges Caching für inhaltsadressierte Assets:

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

Für HTML-Einstiegspunkte hältst du das Caching kurz, damit du Updates sicher ausrollen kannst.

8) Mach Fehlschläge schnell und lesbar

Wenn etwas schiefgeht, zeig:

• eine klare Fehlermeldung
• einen Button zum erneuten Versuch
• einen Link zum Melden des Problems

Stille Fehlschläge zerstören Vertrauen.

9) Wenn du Wasm-Threads nutzt, versteh COOP/COEP

Hängt dein Build von SharedArrayBuffer ab (bei manchen Wasm-Threading-Setups üblich), brauchst du sehr wahrscheinlich Header für Cross-Origin-Isolation:

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

Beim COEP-Header hast du zwei Möglichkeiten. require-corp ist die strenge Variante, verlangt aber, dass jedes Cross-Origin-Asset (CDN-Texturen, Drittanbieter-Skripte) einen Cross-Origin-Resource-Policy-Header sendet, sonst wird es blockiert. Cross-Origin-Embedder-Policy: credentialless schaltet SharedArrayBuffer und Cross-Origin-Isolation ebenfalls frei, lädt Cross-Origin-Ressourcen aber ohne Zugangsdaten, statt ihre Zustimmung per CORP zu verlangen. Wenn du Assets von einem CDN ziehst, das du nicht kontrollierst, ist credentialless meist der weniger schmerzhafte Weg.

Teste früh auf deinem echten Host, denn Header und Drittanbieter-Embeds können vieles kaputt machen.

10) Mach es ohne SDK spielbar

Wenn du auf Cinevvas Creator-Workflow zielst, streb an:

• eine URL, die zuverlässig startet
• keine Pflichtanmeldung, um eine Demo zu starten
• vorhersehbare Steuerung

Dann bist du bereit für den Vertrieb, ohne zusätzliche SDKs einzubinden.

Verwandt:

• Für Spiele-Creator
• Richtlinie zu KI-generierten Inhalten
• Streaming von Assets — Muster für progressives Laden bei großen Spielen
• Service Worker fürs Spiel-Caching — Assets für sofortige Wiederbesuche cachen
• Web-Game-Engines im Vergleich — Build-Größen und Ladezeiten der Engines
• Wie du dein Spiel auf itch.io veröffentlichst — Browser-Spiele für itch.io-Embeds optimieren

Spieler warten nicht auf einen 100-MB-Download. Lade Assets schrittweise, damit sie spielen können, während der Rest im Hintergrund lädt.

1) Die Ladestrategie

Teile Assets in Stufen:

1. Kritisch — nötig, um den ersten Bildschirm zu zeigen (< 1 MB)
2. Gameplay — nötig, um zu spielen (< 10 MB)
3. Verbesserung — nett zu haben (im Hintergrund laden)

2) Ein einfacher Asset-Loader

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) Laden mit Fortschritt

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
}

Achtung: Wenn der Server die Antwort komprimiert (gzip oder Brotli, was die meisten CDNs standardmäßig tun), ist Content-Length die komprimierte Größe, während die Chunks, die du liest, bereits dekomprimiert sind. Dadurch schießt received / total über 100 % hinaus. Für einen genauen Fortschrittsbalken auf Byte-Ebene bei komprimierten Antworten lieferst du das Asset entweder unkomprimiert aus, sendest einen eigenen Header mit der unkomprimierten Größe oder weichst auf das onprogress-Event von XMLHttpRequest aus, das den echten Übertragungsfortschritt meldet.

4) Stapelweise laden mit Gesamtfortschritt

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) Loader mit Prioritätswarteschlange

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) Level nachladen

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) Große Dateien streamen

Bei großen Dateien (3D-Modelle, Audio) streamst du und verarbeitest schrittweise:

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) Geladene Assets cachen

Kombiniere das mit IndexedDB für dauerhaftes Caching:

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) Muster für einen Ladebildschirm

class LoadingScreen {
  constructor(canvas) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.progress = 0
    this.message = 'Loading...'
  }
  
  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) Best Practices

• Zeig sofort etwas — und sei es ein statisches Bild
• Lade zuerst, was sichtbar ist — Texturen für die aktuelle Ansicht
• Nutz Platzhalter — niedrig aufgelöste Bilder, die später hochgestuft werden
• Lade das nächste Level vor — während der Spieler noch spielt
• Behandle Fehler sauber — Wiederholungslogik, Rückfallwege

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

Verwandt

• Ein Web-Spiel ausliefern, das schnell lädt
• Service Worker fürs Spiel-Caching
• Spielstände in IndexedDB
• Web Workers für Spiellogik — Assets abseits des Haupt-Threads dekodieren und verarbeiten
• Wo du kostenlose Game-Assets findest — Quellen für 3D-Modelle, Texturen und Audio zum Streamen

Externe Ressourcen

• MDN: Fetch API — Antworten streamen und ReadableStream
• MDN: ReadableStream — gestreamte Datenblöcke verarbeiten
• glTF 2.0 specification — das Standardformat zum Streamen von 3D-Assets

Text ist in Spielen überall: Punktestände, Dialoge, Menüs, Schadenszahlen. Dieses Tutorial zeigt verschiedene Ansätze und wann welcher passt.

1) Grundlagen von Canvas-Text

Der einfachste Weg:

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

Brauchst du für Überschriften und HUD-Beschriftungen engere oder weitere Abstände, unterstützt der Canvas-Kontext inzwischen letterSpacing und wordSpacing direkt. Beide nehmen CSS-Längenangaben und haben 2025 browserübergreifend Baseline erreicht, du musst Glyphen also nicht mehr einzeln zeichnen, um Kerning nachzubauen:

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

Setz sie danach auf '0px' zurück, denn sie bleiben am Kontext hängen wie font und fillStyle.

2) Text mit Umriss

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) Text mit Schatten

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-Fonts rendern

Für Pixel-Art-Spiele oder ein plattformübergreifend gleiches Aussehen:

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) Vorgerenderter Text für Performance

Bei statischem Text einmal rendern und wiederverwenden:

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

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) Text mit Zeilenumbruch

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) Ein Dialogbox-System

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) Aufsteigende Schadenszahlen

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) Text in WebGL (SDF-Fonts)

Für WebGL-Spiele skalieren Signed-Distance-Field-Fonts sauber:

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

Speziell für three.js-Szenen ist troika-three-text eine gute Option. Statt einen Atlas vorzubacken, parst es .ttf-, .otf- und .woff-Dateien und erzeugt die SDF-Glyphen im laufenden Betrieb in einem Web Worker, und es kümmert sich um Kerning, Ligaturen und rechtsläufige Schriften.

Für die meisten 2D-Canvas-Spiele funktionieren Bitmap-Fonts oder vorgerenderter Canvas-Text gut.

Verwandt

• Canvas-2D-Spielschleife
• Pixel-Art-Rendering
• WebGL-Grundlagen
• Responsives Spiel-Canvas — Text mit Canvas-Auflösung und DPI skalieren
• Wo du kostenlose Game-Assets findest — Quellen für Schriften und UI-Assets

Tone.js sitzt auf der Web-Audio-API und macht synthetisiertes Audio praktikabel. Statt Audiodateien zu laden, erzeugst du Klänge programmatisch. Das heißt null Ladezeit, unendliche Variationen und Klänge, die in Echtzeit aufs Gameplay reagieren.

Probier es aus (klick die Buttons, um synthetisierte Spielklänge zu hören):

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

Guter Ton verwandelt ein Spiel. Ein stummes Spiel wirkt leblos. Die Web-Audio-API gibt dir Soundeffekte mit geringer Latenz, Musikwiedergabe und sogar räumlichen 3D-Klang, alles im Browser.

Probier es aus (klick einen Button, um synthetisierte Klänge zu hören):

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

Mit Web Workers läuft JavaScript in einem Hintergrund-Thread. Für Spiele heißt das: Physik, KI und prozedurale Generierung laufen, ohne dass Frames wegbrechen.

1) Wann Workers sinnvoll sind

Gute Kandidaten:

• Physiksimulation
• Pathfinding (A*, Navmesh)
• KI-Entscheidungen
• Prozedurale Generierung
• Asset-Verarbeitung (Bildbearbeitung, Kompression)
• Aufwendige Mathematik (FFT, Kollisionserkennung)

Weniger geeignet:

• Rendering (Workers kommen nicht direkt an DOM oder Canvas)
• Sehr kleine Aufgaben (der Thread-Overhead lohnt nicht)

2) Einen einfachen Worker erstellen

worker.js:

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

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

main.js:

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

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

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

3) Inline-Workers (ohne eigene Datei)

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) Workers als ES-Module

Du kannst Worker-Code als ES-Modul schreiben und darin import statt importScripts nutzen. Übergib dazu { type: 'module' } an den Konstruktor:

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

Im Worker kannst du dann gemeinsame Helfer für Mathematik, Kollision oder KI genauso importieren wie im Haupt-Thread, die Spiellogik wird also nicht doppelt gepflegt. Modul-Workers werden in Chrome und Edge ab 80, Safari ab 15 und Firefox ab 114 unterstützt.

5) Beispiel Physik-Worker

physics-worker.js:

const bodies = []
const FIXED_DT = 1 / 60

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

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

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

6) Transferable Objects für Performance

Große Daten lassen sich ohne Kopieren übergeben:

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

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

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

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

8) Worker-Pool für parallele Aufgaben

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

9) SharedArrayBuffer für Echtzeit-Synchronisation

Mit aktivierter Cross-Origin-Isolation kannst du Speicher teilen:

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

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

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

10) OffscreenCanvas für Workers

Rendern im Worker. OffscreenCanvas ist inzwischen als Baseline breit verfügbar, in Chrome, Edge, Firefox und Safari (Safari unterstützt es ab 17.0 auf macOS und iOS):

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

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

11) Fehlerbehandlung

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

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

Verwandt

• Ein Web-Spiel ausliefern, das schnell lädt
• Wasm-Threads (SharedArrayBuffer) aktivieren
• Canvas-2D-Spielschleife
• Physik-Bibliotheken für Spiele — Rapier oder Cannon-es in einem Worker betreiben
• Streaming von Assets — Assets abseits des Haupt-Threads dekodieren
• Tech-Stack für Web-Spiele 2026 — wo Workers in den Stack aus WebGL, WebGPU und Wasm passen

Externe Ressourcen

• MDN: Web Workers API — vollständige API-Referenz
• MDN: Using Web Workers — Schritt-für-Schritt-Anleitung
• MDN: Transferable objects — Datenübergabe ohne Kopie
• MDN: SharedArrayBuffer — geteilter Speicher zwischen Threads

WebGL gibt dir direkten GPU-Zugriff im Browser. Es ist die Grundlage für 3D-Web-Spiele und für performantes 2D. Dieses Tutorial deckt das Wesentliche ab.

1) Einen WebGL-Kontext holen

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

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

Nimm webgl2, wenn verfügbar. Es wird breit unterstützt und bietet die besseren Funktionen.

2) Die Render-Pipeline (vereinfacht)

1. Der Vertex-Shader läuft einmal pro Vertex. Er positioniert deine Geometrie.
2. Der Fragment-Shader läuft einmal pro Pixel. Er färbt die Ausgabe.
3. Buffer halten Daten (Positionen, UVs, Farben).
4. Texturen sind Bilder, die Shader abtasten.

3) Ein minimales Shader-Paar

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 kompilieren und linken

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 anlegen

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 mit Shadern verbinden

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

7) Die Spielschleife

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) Texturen laden

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) Typische Stolperfallen

• Zweierpotenz-Texturen sind in WebGL 2 nicht zwingend, Mipmaps funktionieren mit ihnen aber besser.
• Verlorener Kontext: Behandle webglcontextlost-Events. Mobile Browser räumen Kontexte bei Speicherdruck ab.
• Float-Texturen brauchen eine Prüfung auf Erweiterungen (EXT_color_buffer_float).

10) Wann eine Bibliothek sinnvoll ist

Rohes WebGL ist geschwätzig. Für die meisten Spiele lohnt ein Blick auf:

• Three.js — vollwertiges 3D
• PixiJS — schnelles 2D-Rendering
• PlayCanvas — Game-Engine mit Editor

Nimm rohes WebGL, wenn du brauchst:

• maximale Kontrolle
• einen eigenen Renderer
• ein echtes Verständnis davon, wie es funktioniert

Eine Anmerkung für 2026: WebGPU wird inzwischen in jedem großen Browser standardmäßig ausgeliefert (Chrome und Edge seit 113, Firefox 141 unter Windows und 145 unter macOS sowie Safari auf iOS 26, iPadOS 26 und macOS Tahoe 26). Die Grundlagen hier gelten weiterhin, denn Bibliotheken wie Three.js betreiben ihren WebGPU-Renderer mit automatischem WebGL-2-Fallback, WebGL 2 bleibt also die verlässliche Basis. Wenn du heute einen Renderer von Grund auf neu beginnst, lies das WebGPU-Tutorial parallel zu diesem, bevor du dich auf eine API festlegst.

Verwandt

• WebGPU für Spiele
• Canvas-2D-Spielschleife
• Ein Web-Spiel ausliefern, das schnell lädt
• Tech-Stack für Web-Spiele 2026 — wann WebGL, WebGPU oder Wasm die richtige Wahl ist
• Physik-Bibliotheken für Spiele — Physik-Engines, die über WebGL rendern
• Web-Game-Engines im Vergleich — Three.js, PixiJS, PlayCanvas und andere

Externe Ressourcen

• MDN: WebGL API — vollständige API-Referenz
• WebGL2 Fundamentals — ausführliche Tutorial-Reihe zu WebGL2
• The Book of Shaders — interaktiver Leitfaden zu GLSL-Fragment-Shadern
• Three.js documentation — das populärste WebGL-Framework

WebGPU ist der Nachfolger von WebGL. Es ist hardwarenäher, expliziter und auf moderne GPUs ausgelegt. Wenn du 2026 ein neues 3D-Projekt startest, lohnt es sich, WebGPU zu lernen.

WebGPU-Tutorial: 10 Projekte vom Setup bis zum 3D-Rendering mit Licht und Animation

1) Browser-Unterstützung prüfen

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

Stand 2026 ist WebGPU in Chrome, Edge, Firefox und Safari verfügbar.

2) Ein Device holen

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

Der Adapter steht für die physische GPU. Das Device ist deine Schnittstelle dorthin.

Beide Aufrufe können fehlschlagen. requestAdapter() liefert null, wenn das System keine nutzbare GPU hat, und requestDevice() kann rejecten. Sichere das ab, bevor du weitermachst:

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

Der Adapter ist außerdem verbraucht, sobald du ein Device daraus erzeugst. Fordere also einen neuen an, wenn du ein weiteres Device brauchst.

3) Das Canvas konfigurieren

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

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

4) Shader in WGSL schreiben

WebGPU nutzt WGSL (WebGPU Shading Language), nicht GLSL.

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

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

5) Ein Shader-Modul erstellen

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

6) Eine Render-Pipeline erstellen

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

7) Ein Frame rendern

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

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

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

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

8) Buffer in WebGPU

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

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

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

9) Bind Groups für Uniforms

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 gegen WebGL

Wann WebGPU sinnvoll ist

• Neue Projekte für moderne Browser
• Rechenlastige Aufgaben (Physik, KI, prozedurale Generierung)
• Wenn du feingranulare Kontrolle über GPU-Ressourcen brauchst

Verwandt

• WebGL-Grundlagen
• Web Workers für Spiellogik
• Ein Web-Spiel ausliefern, das schnell lädt
• Tech-Stack für Web-Spiele 2026 — Entscheidungsrahmen für WebGL, WebGPU und Wasm
• COOP/COEP und SharedArrayBuffer — nötige Header für Wasm-Threading mit WebGPU-Compute

Externe Ressourcen

• WebGPU specification — W3C-Spezifikation
• WGSL specification — Spezifikation der WebGPU Shading Language
• WebGPU Fundamentals — ausführliche Tutorial-Reihe
• Your first WebGPU app — Google-Codelab zum Mitmachen

Ein Multiplayer-Spiel mit WebSockets bauen: Serverarchitektur, Spielräume und Zustandssynchronisation

WebSockets ermöglichen Echtzeitkommunikation für Multiplayer-Spiele. Dieses Tutorial behandelt die Grundlagen auf der Client-Seite.

1) Mit einem Server verbinden

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

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

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

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

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

2) Ein Nachrichtenprotokoll entwerfen

Leg ein einfaches Protokoll fest:

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

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

3) Eine Klasse für die Verbindungsverwaltung

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) Spielereingaben senden

Sende Eingaben, keine Positionen. Lass den Server autoritativ sein:

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

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

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

5) Spielzustand empfangen

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) Interpolation für flüssige Bewegung

Der Server schickt Momentaufnahmen. Interpoliere dazwischen:

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

7) Clientseitige Vorhersage

Für reaktionsschnelle Steuerung sagst du lokal voraus und gleichst mit dem Server ab:

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

8) Latenzanzeige

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) Binärnachrichten für Effizienz

Für hochfrequente Updates nimmst du Binärdaten:

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

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

10) Ein einfacher Server (Node.js)

import { WebSocketServer } from 'ws'

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

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

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

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

Verwandt

• Ein Web-Spiel ausliefern, das schnell lädt
• Eingaben in Spielen
• Web Workers für Spiellogik
• COOP/COEP und SharedArrayBuffer — Header, die SharedArrayBuffer im Multiplayer-Kontext braucht
• Koop-Spieldesign 2026 — warum "Friend-Slop"-Koop-Spiele explodieren und wo Browser-Multiplayer hineinpasst
• Game Jams und Hackathons — Multiplayer-Jam-Spiele bekommen mehr Aufmerksamkeit

Externe Ressourcen

• MDN: WebSocket API — Referenz zur WebSocket-API im Browser
• MDN: WebRTC API — Peer-to-Peer-Verbindungen für geringere Latenz
• MDN: WebTransport API — ein neuerer HTTP/3-Transport, der im März 2026 browserübergreifend Baseline erreichte, als Safari 26.4 die Unterstützung nachlieferte (in Chrome ab 97, Edge und Firefox ab 114 war sie schon da). Anders als ein einzelner TCP-basierter WebSocket läuft WebTransport über QUIC und bietet unzuverlässige Datagramme sowie mehrere unabhängige Streams, ein verlorenes Paket blockiert also nicht alles andere am Kopf der Warteschlange. Ein gängiges Muster ist, hochfrequente Positionsupdates über Datagramme zu schicken und Chat oder Bestenlisten auf einem zuverlässigen Stream zu lassen. WebSockets sind weiterhin die kompatibelste Wahl und alles oben gilt weiter, aber WebTransport ist für latenzempfindliche Spiele inzwischen eine Überlegung wert.
• Socket.IO documentation — beliebte Wrapper-Bibliothek für WebSockets
• Valve Source Multiplayer Networking — bewährte Netzwerkmuster aus Produktionsspielen

WebXR bringt VR und AR in den Browser. Spieler erleben dein Spiel im Headset, ohne etwas herunterzuladen.

1) WebXR-Unterstützung prüfen

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

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

2) Eine VR-Sitzung starten

let xrSession = null
let xrRefSpace = null

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

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

3) Die XR-Render-Schleife

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

4) Eingabequellen (Controller)

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

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

Nimm nicht an, dass jedes Gerät ein Gamepad hat

Der Code oben liest source.gamepad für Trigger und Thumbsticks. Auf Controller-Headsets wie Meta Quest funktioniert das, auf Apple Vision Pro (WebXR ist in Safari unter visionOS 2 standardmäßig aktiv) oder Samsung Galaxy XR und anderen Android-XR-Geräten passiert dagegen nichts, weil dort Blick und Pinch oder Handtracking die primäre Eingabe sind. Auf diesen Headsets ist source.gamepad null und session.inputSources bleibt leer, bis der Nutzer tatsächlich pincht.

Für die eine Interaktion, die jedes Gerät garantiert, die "primäre Aktion", lauschst du statt auf Tastenabfragen auf die select-Events. WebXR liefert selectstart, select und selectend gleichermaßen für einen Controller-Trigger, einen Hand-Pinch und einen Vision-Pro-Blick-Pinch, ein einziger Handler deckt also alles ab:

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

Behalte den Gamepad-Code für Thumbstick-Fortbewegung und Zusatztasten auf Controller-Headsets, sichere ihn aber mit if (source.gamepad) ab und leite deine zentrale Interaktion "Auswählen, Greifen, Auslösen" über diese Events, damit das Spiel auch auf hand- und blickgesteuerten Geräten funktioniert.

5) Controller-Positionen

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) Raycasting fürs Zeigen

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) Fortbewegung per Teleport

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

8) Flüssige Fortbewegung

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

9) Komfortregeln für VR

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

// Snap turning
let snapTurnCooldown = 0

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

10) Vollständiges WebXR-Setup

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

Verwandt

• WebGL-Grundlagen
• WebGPU-Einstieg
• Eingaben in Spielen
• Tech-Stack für Web-Spiele 2026 — wo WebXR in der Werkzeuglandschaft sitzt
• Three.js und USDC im Browser — 3D-Assets für XR-Szenen laden

Externe Ressourcen

• MDN: WebXR Device API — vollständige API-Referenz
• Immersive Web — WebXR-Beispiele, Werkzeuge und Tabellen zur Browser-Unterstützung
• Three.js WebXR guide — VR-Inhalte mit Three.js