Les assistants de programmation par IA ont évolué : de simples outils d’autocomplétion, ils sont devenus des agents autonomes capables de planifier, de modifier plusieurs fichiers, d’exécuter des tests et de créer des pull requests. Ce tutoriel présente les trois principaux outils : Claude Code, Cursor et GitHub Copilot.

1) Qu’est-ce qui rend un outil « agentique » ?

Les outils traditionnels de complétion de code par IA suggèrent les quelques lignes suivantes. Les outils agentiques vont plus loin :

Les outils agentiques peuvent comprendre toute la structure de votre projet, planifier des modifications dans plusieurs fichiers, les appliquer, exécuter des tests et itérer jusqu’à ce que la tâche soit terminée.

2) Comparaison rapide : Claude Code, Cursor et Copilot

3) Principes fondamentaux de Claude Code

Claude Code fonctionne avec Opus 4.8 (son modèle par défaut actuel) et de grandes fenêtres de contexte. Installez-le et authentifiez-vous :

# Installer Claude Code (programme d’installation natif recommandé)
curl -fsSL https://claude.ai/install.sh | bash

# Ou avec npm (nécessite Node 18+)
npm install -g @anthropic-ai/claude-code

# S’authentifier : exécutez claude et suivez l’invite dans le navigateur
claude

# Démarrer dans votre projet
cd your-project
claude

Commandes de base

# Poser une question sur votre base de code
claude "Comment l’authentification est-elle implémentée ici ?"

# Générer du code
claude "Ajoute un middleware de limitation de débit"

# Refactorisation multifichier
claude "Renomme UserService en AuthService dans toute la base de code"

# Créer une pull request
claude "Crée une pull request qui ajoute la validation des entrées à tous les endpoints d’API"

Configuration du projet

Placez le contexte du projet dans un fichier CLAUDE.md à la racine de votre dépôt. Claude Code le lit automatiquement au début de chaque session :

# Notes du projet

- Langage : TypeScript, formaté avec Prettier
- Tests : Vitest, dans tests/
- Ne pas modifier node_modules/ ni dist/

Les paramètres lisibles par machine (autorisations des outils, variables d’environnement, hooks) se placent dans .claude/settings.json. Par exemple, pour exiger une approbation avant l’exécution d’outils destructifs, configurez-y les autorisations.

Mémoire et contexte

Le contexte persistant du projet se trouve dans les fichiers CLAUDE.md, que Claude Code charge au début de chaque session, ainsi que dans une mémoire automatique que Claude met lui-même à jour en fonction de vos corrections et préférences. Pour lui fournir un contexte durable, modifiez CLAUDE.md plutôt que d’envoyer une instruction ponctuelle commençant par « Souviens-toi : » :

# CLAUDE.md
Ceci est un monorepo. Le code partagé se trouve dans packages/.

Utilisez la commande /clear au cours d’une session pour réinitialiser le contexte de travail.

4) Fonctionnalités agentiques de l’IDE Cursor

Cursor est conçu autour de flux de travail agentiques. Voici ses principales fonctionnalités :

Mode Agent

Appuyez sur Cmd+Shift+I (Mac) ou Ctrl+Shift+I (Windows/Linux) pour ouvrir Composer en mode Agent :

Flux de travail du mode Agent :
1. Décrivez votre tâche
2. L’agent crée un plan
3. Vous l’approuvez ou le modifiez
4. L’agent applique les modifications
5. Vérifiez et itérez

Mode Plan

Pour les tâches complexes, utilisez explicitement le mode Plan :

@plan Ajoute une authentification utilisateur avec :
- Des jetons JWT
- La rotation des jetons d’actualisation
- Le hachage des mots de passe avec bcrypt
- La limitation des tentatives de connexion

L’agent va :

1. Étudier votre code existant
2. Créer un plan d’implémentation détaillé
3. Attendre votre approbation
4. L’exécuter étape par étape

Injection de contexte

Utilisez @ pour ajouter un contexte précis :

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

Implémente un middleware de vérification JWT en suivant ces modèles

Agents parallèles

Exécutez plusieurs agents simultanément sur différentes branches :

# Dans Cursor :
1. Ouvrez la palette de commandes
2. "Cursor: New Agent in Worktree"
3. Chaque agent travaille de façon isolée
4. Comparez les résultats côte à côte

Cursor 3 a ajouté une fenêtre Agents (ouvrez-la avec Cmd+Shift+P, puis « Agents Window ») qui exécute plusieurs agents en parallèle dans des copies de travail locales, des worktrees git et des environnements cloud. La commande /worktree place chaque agent dans son propre worktree git isolé, tandis que /best-of-n exécute la même tâche avec plusieurs modèles afin que vous puissiez comparer les résultats côte à côte.

Règles de cohérence

Créez .cursor/rules/project.mdc :

# Règles du projet

## Style du code
- Utiliser le mode strict de TypeScript
- Privilégier les composants fonctionnels
- Utiliser des exports nommés, pas d’export par défaut

## Tests
- Chaque fonctionnalité doit avoir des tests
- Utiliser des blocs describe/it
- Simuler les services externes

## Sécurité
- Ne jamais committer de secrets
- Valider toutes les entrées utilisateur
- Utiliser des requêtes paramétrées

5) Fonctionnalités agentiques de GitHub Copilot

Copilot a évolué au-delà de l’autocomplétion :

Copilot Chat

Ouvrez le panneau de discussion et utilisez les commandes slash :

/explain - Expliquer le code sélectionné
/fix - Corriger les problèmes de la sélection
/tests - Générer des tests
/doc - Ajouter de la documentation

Agent de programmation (d’une issue à une pull request)

# Sur GitHub :
1. Ouvrez une issue GitHub
2. Attribuez-la à "Copilot"
3. L’agent de programmation travaille en arrière-plan :
   il analyse l’issue, modifie les fichiers et exécute les tests
4. Il ouvre une pull request afin que vous puissiez la vérifier

Cela se distingue du mode Agent de Copilot dans l’IDE, qui travaille de manière synchrone à vos côtés dans VS Code ou JetBrains.

Copilot répartit désormais son travail autonome en deux modes : le mode Agent s’exécute de manière synchrone dans votre IDE (VS Code et JetBrains), choisit les fichiers à modifier, exécute des commandes dans le terminal et itère sur les erreurs ; l’agent de programmation s’exécute de manière asynchrone dans le cloud, prend en charge une issue qui lui est attribuée et fournit une pull request pendant que vous travaillez sur autre chose.

Suggestions en ligne avec contexte

Copilot lit votre base de code. Aidez-le avec des commentaires :

// Middleware d’authentification qui :
// - Extrait le JWT de l’en-tête Authorization
// - Valide la signature du jeton
// - Associe l’utilisateur à la requête
// - Renvoie 401 si le jeton est invalide
export function authMiddleware(req, res, next) {
  // Copilot génère l’implémentation
}

6) Bonnes pratiques pour tous les outils

Rédigez des prompts clairs

❌ Mauvais : "Corrige le bug"

✅ Bon : "Corrige l’exception de pointeur nul dans UserService.getById
lorsque l’utilisateur n’existe pas. Renvoie null au lieu de lever une exception."

❌ Mauvais : "Ajoute des tests"

✅ Bon : "Ajoute des tests unitaires pour CartService couvrant :
- L’ajout d’articles à un panier vide
- La suppression d’articles
- Le calcul des totaux avec des remises
- Cas limite : quantités négatives"

Utilisez le mode Plan pour les tâches complexes

Pour toute tâche touchant au moins 3 fichiers, toujours :

1. Demander d’abord un plan
2. Examiner le plan
3. L’approuver ou le modifier
4. Laisser l’agent l’exécuter
5. Vérifier les modifications avant de committer

Fournissez le contexte architectural

Avant tout travail important, présentez l’architecture à l’agent :

"Il s’agit d’une architecture de microservices :
- api-gateway : achemine les requêtes
- auth-service : JWT, sessions
- user-service : CRUD des utilisateurs
- notification-service : e-mails, notifications push

Les services communiquent via le système pub/sub de Redis.
La base de données est PostgreSQL avec l’ORM Prisma."

Développement piloté par les tests avec des agents

1. Écrire d’abord un test qui échoue :
   "Écris un test d’inscription utilisateur qui vérifie la validation de l’adresse e-mail"

2. Laisser l’agent voir le test qui échoue :
   "Implémente l’inscription pour faire réussir ce test"

3. Itérer jusqu’à ce que tous les tests réussissent :
   "Corrige les derniers échecs de tests"

7) Considérations de sécurité

Les outils agentiques disposent de véritables pouvoirs. Définissez des limites :

Étapes d’approbation

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

Environnements isolés

# Exécuter les agents dans des environnements isolés
docker run -v $(pwd):/workspace -it claude-sandbox

# Ou utiliser des worktrees git pour les isoler
git worktree add ../feature-branch feature-branch

Fichiers sensibles

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

Vérifiez toutes les modifications

# Avant d’accepter les modifications de l’agent :
git diff --stat
git diff

# Utiliser l’ajout interactif à l’index
git add -p

# Ne jamais fusionner automatiquement sans vérification

8) Modèles de flux de travail efficaces

Modèle 1 : Explorer, planifier, exécuter

Session 1 : "Comment fonctionne le système de paiement ?"
            → L’agent explore, vous apprenez

Session 2 : "Que faudrait-il faire pour ajouter Stripe ?"
            → L’agent crée un plan

Session 3 : "Implémente l’intégration de Stripe"
            → L’agent exécute le plan

Modèle 2 : Exploration parallèle

# Dans Cursor avec des agents parallèles :

Agent 1 : "Implémente la mise en cache avec Redis"
Agent 2 : "Implémente la mise en cache avec Memcached"
Agent 3 : "Implémente la mise en cache avec un cache LRU en mémoire"

→ Comparez les implémentations et choisissez la meilleure approche

Modèle 3 : Migration progressive

Étape 1 : "Identifie toutes les utilisations de l’API obsolète"
Étape 2 : "Crée un adaptateur pour la nouvelle API"
Étape 3 : "Migre le module A pour utiliser l’adaptateur"
Étape 4 : "Migre le module B..."
...
Étape N : "Supprime l’adaptateur et utilise directement la nouvelle API"

Modèle 4 : Développement de fonctionnalités guidé par les tests

1. "Écris des tests d’acceptation pour la modification du profil utilisateur"
2. "Écris des tests unitaires pour la validation du profil"
3. "Implémente la fonctionnalité pour faire réussir les tests"
4. "Ajoute des tests d’intégration"
5. "Refactorise pour améliorer la clarté"

9) Quel outil utiliser selon la situation

10) Mesurer l’efficacité

Suivez ces indicateurs pour évaluer les outils agentiques :

const metrics = {
  // Productivité
  suggestionsAccepted: 'pourcentage de suggestions conservées',
  timeToFeature: 'nombre d’heures entre le début et la fusion de la pull request',
  linesPerHour: 'vélocité du code (à utiliser avec prudence)',
  
  // Qualité
  bugsIntroduced: 'défauts attribués au code généré par l’IA',
  testCoverage: 'couverture du code généré par l’IA',
  reviewChanges: 'ampleur de vos modifications des suggestions de l’IA',
  
  // Coût
  apiCosts: 'dépenses mensuelles en outils d’IA',
  creditsUsed: 'crédits Cursor consommés',
  
  // Apprentissage
  newPatternsLearned: 'techniques apprises grâce à l’IA',
  codebaseUnderstanding: 'mesure dans laquelle l’IA vous a aidé à apprendre',
}

11) Pièges fréquents

Accorder une confiance excessive à l’agent

❌ Accepter des modifications importantes sans vérification
❌ Laisser les agents exécuter des commandes destructives
❌ Ne pas comprendre le code avant de le mettre en production

✅ Vérifier chaque modification
✅ Comprendre ce que vous livrez
✅ Utiliser les agents comme collaborateurs, pas comme remplaçants

Pollution du contexte

❌ Prompts énormes contenant du contexte non pertinent
❌ Ne pas effacer le contexte entre des tâches sans rapport
❌ Inclure les fichiers générés dans le contexte

✅ Garder les prompts ciblés
✅ Utiliser des références @file précises
✅ Exclure les artefacts de compilation

Ambiguïté des prompts

❌ "Améliore-le"
❌ "Corrige les problèmes"
❌ "Ajoute quelques tests"

✅ "Réduis la complexité temporelle de O(n²) à O(n log n)"
✅ "Gère le cas null à la ligne 45 avec un retour anticipé"
✅ "Ajoute des tests pour les cas limites : entrée vide, longueur maximale, Unicode"

12) Liste de vérification pour démarrer

## Liste de vérification de la configuration

### Claude Code
- [ ] Installer la CLI : `npm install -g @anthropic/claude-code`
- [ ] S’authentifier : `claude login`
- [ ] Créer `.claude/config.json`
- [ ] Ajouter `.claudeignore` pour les fichiers sensibles

### Cursor
- [ ] Télécharger depuis cursor.com
- [ ] Importer les paramètres de VS Code
- [ ] Configurer `.cursor/rules/`
- [ ] Apprendre le raccourci `Cmd+Shift+I` pour le mode Agent

### GitHub Copilot
- [ ] Installer l’extension dans votre IDE
- [ ] Activer Copilot Chat
- [ ] Essayer Copilot Workspace pour les issues
- [ ] Configurer `.github/copilot-instructions.md`

### Tous les outils
- [ ] Configurer des étapes d’approbation pour les opérations destructives
- [ ] Créer des fichiers d’exclusion pour les secrets
- [ ] Établir un flux de vérification
- [ ] Suivre les indicateurs dès le premier jour

À découvrir aussi

• Publier un jeu web qui se charge rapidement
• Web Workers pour la logique de jeu
• Game jams et hackathons — les outils de code par IA transforment ce qu’il est possible d’accomplir pendant une game jam de 48 heures
• Comparatif des moteurs de jeux web — choisir un moteur adapté aux flux de travail assistés par l’IA

Les analyses vous aident à comprendre ce que font les joueurs, où ils rencontrent des difficultés et ce qui maintient leur intérêt. Ce tutoriel présente les données à suivre et la manière de les collecter.

1) Données à suivre

Indicateurs d’engagement :

• Débuts et durée des sessions
• Niveaux commencés et terminés
• Fonctionnalités utilisées
• Rétention (visites ultérieures)

Indicateurs de performance :

• Temps de chargement
• Fréquence d’images
• Utilisation de la mémoire
• Erreurs et plantages

Indicateurs de conversion :

• Fin du tutoriel
• Premier achat
• Partages sur les réseaux sociaux

2) Suivi simple des événements

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) Suivi des sessions

// 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) Événements propres au jeu

// 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) Suivi des performances

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)

Attribuer les saccades avec Long Animation Frames

Le compteur de FPS ci-dessus vous indique quand des images sont perdues, mais pas pourquoi. L’API Long Animation Frames (LoAF), intégrée à Chrome et Edge 123, comble cette lacune. Elle signale toute image dont le rendu prend plus de 50 ms et détaille les scripts à l’origine du retard, afin que vous puissiez attribuer les saccades à du code précis au lieu de procéder par supposition.

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

Pour l’instant, LoAF n’est disponible que dans Chromium, et non dans Firefox ou Safari. Vérifiez donc la disponibilité de la fonctionnalité avant de l’utiliser et conservez le compteur de FPS comme référence compatible avec tous les navigateurs.

6) Suivi des erreurs

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) Suivi du temps de chargement

// 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) Suivi des entonnoirs

Suivez la progression des joueurs dans les parcours clés :

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) Prise en charge des tests A/B

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

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

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

10) Considérations relatives à la confidentialité

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>Nous utilisons des outils d’analyse pour améliorer le jeu. Êtes-vous d’accord ?</p>
    <button id="accept">Accepter</button>
    <button id="decline">Refuser</button>
  `
  document.body.appendChild(dialog)
  
  dialog.querySelector('#accept').onclick = () => {
    analytics.setConsent(true)
    dialog.remove()
  }
  
  dialog.querySelector('#decline').onclick = () => {
    analytics.setConsent(false)
    dialog.remove()
  }
}

Solutions tierces

Si vous ne souhaitez pas créer votre propre système :

• Plausible — Simple et axé sur la confidentialité
• Amplitude — Analyse produit et entonnoirs
• Mixpanel — Suivi des événements et parcours utilisateurs
• Sentry — Spécialisé dans le suivi des erreurs

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

À consulter également

• Publier un jeu web qui se charge rapidement
• Sauvegardes de jeu avec IndexedDB
• Pour les créateurs
• Comment lancer votre jeu sur itch.io — analyses itch.io et suivi des téléchargements
• Stratégie pour le Steam Next Fest — mesure des ajouts aux listes de souhaits et des taux de conversion de la démo

Ressources externes

• Plausible Analytics — solution d’analyse légère et respectueuse de la vie privée
• PostHog — solution d’analyse produit open source avec suivi des événements
• Sentry — suivi des erreurs et rapports de plantage pour les applications web

La boucle de jeu est le cœur de votre jeu. Elle s'exécute en continu, met à jour l'état du jeu et dessine les images aussi rapidement que le navigateur le permet. Si vous la concevez correctement, tout le reste devient plus simple. Dans le cas contraire, vous chercherez des bugs qui n'apparaissent que sur certaines machines.

Essayez (utilisez les touches fléchées ou ZQSD/WASD) :

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

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

function update() {
  // Logique du jeu ici
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // Dessin ici
}

gameLoop()

let lastTime = 0

function gameLoop(currentTime) {
  const dt = (currentTime - lastTime) / 1000 // convertir en secondes
  lastTime = currentTime
  
  update(dt)
  render()
  
  requestAnimationFrame(gameLoop)
}

function update(dt) {
  player.x += player.speed * dt // fonctionne désormais à toute fréquence d'images
}

requestAnimationFrame(gameLoop)

const FIXED_DT = 1 / 60 // 60 mises à jour physiques par seconde
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
  
  // Maintenir le joueur dans les limites
  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)
}

// Gestion des entrées
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)

// Dans update :
playerWalk.update(dt)

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

// Dans 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)
  
  // Dessiner le monde
  drawWorld()
  drawEntities()
  
  ctx.restore()
  
  // Dessiner l'interface utilisateur (non affectée par la caméra)
  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('PAUSE', canvas.width / 2, canvas.height / 2)
}

Si votre jeu web (ou l’exportation de votre moteur) utilise des threads WebAssembly, il s’appuie souvent sur SharedArrayBuffer. Les navigateurs modernes exigent pour cela une isolation interorigines.

1) Vérification rapide : votre page est-elle isolée ?

Ouvrez les outils de développement et exécutez :

self.crossOriginIsolated

Si la valeur est true, vous êtes dans l’état de sécurité requis pour utiliser SharedArrayBuffer.

Référence officielle :

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

2) Les deux en-têtes nécessaires

Envoyez ces en-têtes de réponse avec votre HTML (et généralement dans l’ensemble de votre application) :

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

Références officielles :

• 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) La principale raison pour laquelle cela « ne fonctionne toujours pas » : les sous-ressources

Avec COEP: require-corp, votre page ne peut plus intégrer librement des ressources provenant d’autres origines.

Si vous chargez un script, une image, un worker, une vidéo ou toute autre ressource depuis une autre origine, cette ressource doit explicitement autoriser son utilisation via :

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

Référence officielle :

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

4) Configurations à copier-coller

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) Liste de vérification pour le débogage

• Vérifiez que les en-têtes figurent bien dans la réponse du document, dans le panneau Réseau.
• Vérifiez la valeur de self.crossOriginIsolated.
• Recherchez les requêtes bloquées (un message courant dans les outils de développement contient « blocked … by COEP »).
• Supprimez ou auto-hébergez les scripts tiers qui ne prennent pas en charge CORS/CORP.

À lire aussi

• Publier un jeu web qui se charge rapidement
• Les technologies des jeux web en 2026
• Les Web Workers pour la logique du jeu — utiliser des Workers qui bénéficient de SharedArrayBuffer
• Les bases du multijoueur avec WebSocket — pour les jeux multijoueurs nécessitant une isolation interorigines
• Intégrer des jeux avec une iframe — comprendre l’incidence des en-têtes COOP/COEP sur les intégrations par iframe

Ressources externes

• MDN : Cross-Origin-Opener-Policy — référence sur l’en-tête COOP
• MDN : Cross-Origin-Embedder-Policy — référence sur l’en-tête COEP
• web.dev : Isoler votre site web entre les origines — guide pratique de déploiement

Une bonne gestion des entrées peut faire toute la différence dans un jeu. Des commandes qui réagissent avec retard, des entrées ignorées ou des associations de boutons déroutantes frustrent les joueurs avant même qu'ils ne découvrent le contenu de votre jeu. Ce tutoriel explique comment gérer le clavier, la souris, le tactile et les manettes de manière unifiée.

Essayez d'abord :

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

La simulation physique donne vie aux jeux : objets qui tombent, balles qui rebondissent, ragdolls, véhicules et environnements destructibles. Ce guide présente les principales bibliothèques de physique disponibles pour les jeux web, avec de véritables exemples de code et une évaluation honnête de leurs avantages et inconvénients.

Vue d’ensemble

Légende :

• CCD = détection continue des collisions (empêche les objets rapides de traverser les murs)
• ⚠️ Déterminisme = possible avec un pas de temps fixe, mais non garanti entre les différentes plateformes

Recommandations rapides

Comparaison détaillée

Moteurs physiques 3D

Moteurs physiques 2D

Moteurs physiques 3D

Rapier — Le choix moderne

Rapier est un moteur physique écrit en Rust, avec des liaisons JavaScript/WASM. C’est l’option la plus performante pour les jeux web en 2025-2026, avec des gains de vitesse de 2 à 5 fois par rapport à sa version de 2024.

Installation :

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

Configuration de base :

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)

Intégration à la boucle de jeu :

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

Détection des collisions :

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

Articulations :

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

Contrôleur de véhicule :

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

Avantages :

• Meilleures performances (WASM + SIMD)
• Excellente précision de la détection des collisions
• Déterminisme multiplateforme (mêmes entrées = mêmes sorties)
• Développement actif et API moderne
• Détection continue des collisions (aucune traversée des obstacles)
• Contrôleurs de personnage et de véhicule intégrés

Inconvénients :

• Bundle plus volumineux (~1,4 Mo)
• Initialisation asynchrone obligatoire
• API plus complexe que celles des solutions en JavaScript pur
• Le débogage de WASM peut être délicat

Cannon-es — Simple et efficace

Cannon-es est le fork maintenu de Cannon.js. Écrit entièrement en JavaScript, il est facile à comprendre et convient parfaitement à l’apprentissage et au prototypage.

Installation :

npm install cannon-es

Configuration de base :

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)

Boucle de jeu :

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

Événements de collision :

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

Contraintes :

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

Avantages :

• JavaScript pur, sans la complexité de WASM
• Bundle peu volumineux (~150 Ko)
• Facile à apprendre et à déboguer
• Fonctionne partout
• Excellente intégration avec Three.js
• Bonne documentation

Inconvénients :

• Plus lent que les solutions WASM
• Montre ses limites avec un grand nombre de corps (>100)
• Prise en charge limitée des maillages triangulés
• Aucune CCD intégrée (les objets peuvent traverser les obstacles)
• Développement moins actif

Ammo.js — Toute la puissance de Bullet Physics

Ammo.js est le moteur Bullet Physics compilé en WebAssembly. Il offre un maximum de fonctionnalités, notamment les corps souples, les véhicules et les contraintes avancées.

Installation :

npm install ammo.js
# Or use from CDN

Configuration de base :

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
}

Corps souples (tissu) :

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
}

Physique des véhicules :

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
}

Avantages :

• Ensemble de fonctionnalités le plus complet
• Corps souples, tissus et cordes
• Physique avancée des véhicules
• Éprouvé en production (utilisé dans de nombreux jeux AAA)
• Hautement configurable Inconvénients :
• API complexe et verbeuse
• Taille de bundle importante
• Gestion de la mémoire nécessaire (destruction des objets)
• Courbe d’apprentissage abrupte
• Documentation dispersée
• Pas de déterminisme multiplateforme (uniquement sur un même appareil, avec une configuration rigoureuse)

Jolt — physique 3D moderne de niveau AAA

Jolt Physics est le moteur utilisé par des jeux comme Horizon Forbidden West, et JoltPhysics.js le rend accessible dans le navigateur grâce à un portage WASM. Il constitue un excellent compromis entre Rapier et Ammo.js : davantage de fonctionnalités que Rapier (corps mous, tissus, contrôleur de véhicule à roues), avec une maintenance active qui fait défaut à Ammo.js. Le paquet npm est jolt-physics, et des intégrations prêtes à l’emploi existent pour React Three Fiber (@react-three/jolt) et Babylon.js.

npm install jolt-physics

Comme Rapier, il s’agit d’un module WASM initialisé de manière asynchrone, doté d’une API verbeuse mais complète qui reproduit l’interface C++. Choisissez Jolt si vous recherchez des fonctionnalités comparables à celles de Bullet (corps mous, véhicules), tout en préférant une base de code moderne et maintenue à Ammo.js.

Oimo.js — léger et rapide

Oimo.js est un moteur physique 3D léger. Il convient parfaitement aux jeux simples qui ne nécessitent pas de fonctionnalités avancées.

Installation :

npm install oimo

Configuration de base :

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

Boucle de jeu :

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

Avantages :

• Très léger (environ 100 Ko)
• API simple
• Bonnes performances pour les scènes basiques
• Prise en charge native de Babylon.js

Inconvénients :

• Formes limitées (primitives uniquement)
• Aucun corps mou
• Documentation peu fournie
• Développement moins actif
• Choix limité d’articulations

Moteurs physiques 2D

Matter.js — élégant et intuitif

Matter.js est un moteur physique 2D riche en fonctionnalités, doté d’excellents outils de rendu et de débogage.

Installation :

npm install matter-js

Configuration de base :

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)

Événements de collision :

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

Contraintes :

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

Interaction à la souris :

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)

Avantages :

• Beau rendu par défaut
• Excellent pour l’apprentissage et le prototypage
• API intuitive
• Bonne documentation
• Communauté active
• Déterministe par défaut — Matter.Runner utilise désormais un pas de temps fixe et déterministe (le pas de temps non fixe a été supprimé dans la version 0.20.0)

Inconvénients :

• Aucun CCD (les objets rapides peuvent traverser les obstacles — utilisez des sous-pas pour atténuer ce problème)
• Problèmes de performances avec de nombreux corps
• Aucune option WASM
• Précision limitée pour les simulations complexes

Planck.js — Box2D pour JavaScript

Planck.js est une réécriture complète de Box2D en JavaScript. Son moteur physique est éprouvé et déterministe lorsqu’un pas de temps fixe est utilisé.

Installation :

npm install planck

Configuration de base :

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

Boucle de jeu à pas de temps fixe :

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

Fonctions de rappel de collision :

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

Articulations :

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

Avantages :

• Déterministe avec un pas de temps fixe
• Bien documenté (la documentation de Box2D s’applique)
• Bonnes performances
• Prise en charge de TypeScript
• Bundle de petite taille

Inconvénients :

• Le CCD ne prend pas en charge les articulations ; les objets rapides reliés par des articulations peuvent donc s’étirer
• Courbe d’apprentissage plus abrupte que celle de Matter.js
• Aucun moteur de rendu intégré
• Particularités de Box2D (l’échelle des unités est importante)

p2-es — physique 2D flexible

p2-es est le fork maintenu de p2.js. Il convient parfaitement aux jeux qui nécessitent des contraintes et des mécanismes complexes.

Installation :

npm install p2-es

Configuration de base :

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)

Contraintes avancées :

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

Matériaux de contact :

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

Avantages :

• Système de contraintes riche
• Matériaux de contact
• Bien adapté aux mécanismes et aux machines
• Mise en veille des corps pour améliorer les performances
• Modules ES compatibles avec le tree shaking

Inconvénients :

• Aucun moteur de rendu intégré
• Certaines paires de formes ne sont pas prises en charge
• Moins actif que les autres solutions
• Lacunes dans la documentation

Conseils de performance

1. Utilisez un pas de temps fixe

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. Mettez en veille les corps inactifs

La plupart des moteurs prennent en charge la mise en veille. Activez-la :

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

// Rapier
bodyDesc.setCanSleep(true)

3. Utilisez des formes de collision simples

// 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. Réduisez le nombre d’itérations du solveur (avec prudence)

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

// Rapier - configured at world creation

5. Exécutez la simulation physique dans un Web Worker

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

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

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

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

Quel moteur choisir selon le besoin

Intégration avec les moteurs de rendu

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

Pièges courants

L’échelle est importante

Les moteurs physiques fonctionnent mieux avec une échelle réaliste (1 unité = 1 mètre). N’utilisez pas directement des coordonnées en pixels.

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

Fuites de mémoire avec les moteurs WASM

Nettoyez toujours les corps lorsque vous les supprimez :

// Rapier
world.removeRigidBody(body)

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

Effet tunnel (les objets se traversent)

Les objets se déplaçant rapidement peuvent traverser les parois fines. Solutions :

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

Articles connexes

• Fondamentaux de WebGL pour les créateurs de jeux
• Web Workers pour la logique de jeu — déchargez les calculs physiques sur un thread Worker
• Publier un jeu web qui se charge rapidement
• Boucle de jeu avec Canvas 2D — le modèle à pas de temps fixe utilisé par tous les moteurs physiques
• Les technologies des jeux web en 2026 — comment les moteurs physiques s’intègrent à l’ensemble de la pile technologique
• Comparatif des moteurs de jeux web — moteurs intégrant la gestion de la physique

Ressources externes

• Documentation de Rapier — documentation officielle et exemples sur le moteur physique Rapier
• Documentation de Cannon-es — référence de l’API et guides
• Documentation de Matter.js — référence complète de l’API
• Documentation de Planck.js — Box2D pour JavaScript

L’API Gamepad apporte aux jeux web une prise en charge des manettes digne d’une console. Prenez en charge les manettes Xbox, PlayStation, Switch Pro et génériques.

1) Détecter les manettes

window.addEventListener('gamepadconnected', (e) => {
  console.log('Manette connectée :', e.gamepad.id)
  console.log('Index :', e.gamepad.index)
  console.log('Boutons :', e.gamepad.buttons.length)
  console.log('Axes :', e.gamepad.axes.length)
})

window.addEventListener('gamepaddisconnected', (e) => {
  console.log('Manette déconnectée :', e.gamepad.id)
})

2) Interroger l’état des manettes

L’état des manettes doit être interrogé régulièrement, et non géré par des événements :

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

// À appeler dans votre boucle de jeu
function gameLoop() {
  pollGamepads()
  update()
  render()
  requestAnimationFrame(gameLoop)
}

3) Mappage standard des boutons

Le mappage « standard » pour la plupart des manettes Xbox et PlayStation :

const BUTTONS = {
  A: 0,           // Croix (PS) / A (Xbox)
  B: 1,           // Cercle (PS) / B (Xbox)
  X: 2,           // Carré (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,         // Appui sur le stick gauche
  R3: 11,         // Appui sur le stick droit
  DPAD_UP: 12,
  DPAD_DOWN: 13,
  DPAD_LEFT: 14,
  DPAD_RIGHT: 15,
  HOME: 16,       // Bouton PS / bouton Xbox
}

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

4) Lire les boutons et les sticks

function processGamepad(gamepad) {
  // Boutons (numériques ou analogiques)
  const jump = gamepad.buttons[BUTTONS.A].pressed
  const shoot = gamepad.buttons[BUTTONS.X].pressed
  
  // Gâchettes (analogiques, de 0 à 1)
  const leftTrigger = gamepad.buttons[BUTTONS.LT].value
  const rightTrigger = gamepad.buttons[BUTTONS.RT].value
  
  // Sticks (analogiques, de -1 à 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) Gérer la zone morte

Les sticks restent rarement exactement à 0 :

function applyDeadzone(value, deadzone = 0.15) {
  if (Math.abs(value) < deadzone) return 0
  
  // Remettre à l’échelle la plage restante entre 0 et 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) Zone morte radiale, mieux adaptée aux déplacements en 2D

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

// Utilisation
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) Gestionnaire de manettes complet

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('Connectée :', 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,
      
      // Boutons de façade
      a: gp.buttons[0].pressed,
      b: gp.buttons[1].pressed,
      x: gp.buttons[2].pressed,
      y: gp.buttons[3].pressed,
      
      // Boutons supérieurs
      lb: gp.buttons[4].pressed,
      rb: gp.buttons[5].pressed,
      
      // Gâchettes (analogiques)
      lt: gp.buttons[6].value,
      rt: gp.buttons[7].value,
      
      // Croix directionnelle
      dpadUp: gp.buttons[12].pressed,
      dpadDown: gp.buttons[13].pressed,
      dpadLeft: gp.buttons[14].pressed,
      dpadRight: gp.buttons[15].pressed,
      
      // Commandes système
      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)
    }
  }
}

// Utilisation
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) Vibrations et retour haptique

function vibrate(gamepad, duration = 200, weakMagnitude = 0.5, strongMagnitude = 0.5) {
  if (gamepad.vibrationActuator) {
    gamepad.vibrationActuator.playEffect('dual-rumble', {
      startDelay: 0,
      duration,
      weakMagnitude,   // Moteur haute fréquence
      strongMagnitude, // Moteur basse fréquence
    })
  }
}

// Utilisation
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) Plusieurs joueurs

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) {
    // ... comme précédemment
  }
}

// Dans la boucle de jeu
const multiplayer = new LocalMultiplayer(4)

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

10) Solution de repli et contrôles combinés

Prenez en charge à la fois le clavier et la manette :

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()
    
    // Combiner les contrôles (la manette est prioritaire pour les entrées analogiques)
    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()
  }
}

À consulter également

• Gestion des contrôles de jeu
• Jeux web adaptés aux appareils mobiles
• Boucle de jeu Canvas 2D
• Pointer Lock pour les jeux FPS — combiner une manette avec la visée à la souris
• Conception d’un jeu en coopération — concevoir des contrôles pour plusieurs manettes en coopération locale

Ressources externes

• MDN : API Gamepad — référence complète de l’API
• MDN : utiliser l’API Gamepad — guide pas à pas
• Gamepad Tester — testez le mappage de votre manette dans le navigateur

De nombreuses plateformes (Itch.io, Newgrounds, Cinevva, votre propre site) intègrent les jeux dans des iframes. Ce tutoriel explique comment garantir le bon fonctionnement de votre jeu lorsqu’il est intégré.

1) Configuration de base pour l’intégration

Votre jeu doit fonctionner sans nécessiter le contrôle total de la page :

<!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) Détecter le contexte d’une iframe

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

if (isEmbedded) {
  // Adapter le comportement au contexte d’intégration
  hideExternalLinks()
  adjustUIForSmallSize()
}

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

3) Autoriser les permissions nécessaires dans l’iframe

La page parente contrôle ce que votre iframe peut faire. Voici les permissions courantes :

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

Votre jeu doit gérer correctement les permissions manquantes :

// Vérifier si le mode plein écran est disponible
const canFullscreen = document.fullscreenEnabled || document.webkitFullscreenEnabled

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

4) Mode plein écran depuis une iframe

Le mode plein écran nécessite l’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) {
    // Plein écran non autorisé — afficher un message
    showMessage('Le mode plein écran n’est pas disponible lorsque le jeu est intégré')
  }
}

5) Communiquer avec la page parente

Utilisez postMessage pour communiquer de manière sécurisée entre différentes origines :

Dans votre jeu :

// Envoyer un message à la page parente
function notifyParent(type, data) {
  if (window.parent !== window) {
    window.parent.postMessage({ type, data, source: 'game' }, '*')
  }
}

// Recevoir les messages de la page parente
window.addEventListener('message', (event) => {
  // Valider l’origine si nécessaire
  // 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
  }
})

// Signaler que le jeu est prêt
window.addEventListener('load', () => {
  notifyParent('ready', { width: 800, height: 600 })
})

// Signaler les événements du jeu
function onGameOver(score) {
  notifyParent('gameover', { score })
}

Dans la page parente :

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

iframe.addEventListener('load', () => {
  // Écouter les messages du jeu
  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('Jeu prêt :', data)
    }
    if (type === 'gameover') {
      showScoreModal(data.score)
    }
  })
})

// Envoyer des commandes au jeu
function pauseGame() {
  iframe.contentWindow.postMessage({ type: 'pause' }, '*')
}

6) Gérer le focus

Les iframes peuvent perdre le focus, ce qui interrompt les commandes au clavier :

// Donner automatiquement le focus au canvas lors d’un clic
canvas.addEventListener('click', () => {
  canvas.focus()
})

// Rendre le canvas sélectionnable
canvas.tabIndex = 1

// Gérer la perte du focus
window.addEventListener('blur', () => {
  // Réinitialiser les touches maintenues
  input.left = input.right = input.up = input.down = false
  
  if (isEmbedded) {
    // Mettre éventuellement le jeu en pause
    // pauseGame()
  }
})

// Demander le focus à la page parente
function requestFocus() {
  notifyParent('requestFocus', {})
}

7) Dimensions adaptatives pour l’intégration

Gérez les différentes dimensions d’intégration :

function handleResize() {
  const width = window.innerWidth
  const height = window.innerHeight
  
  // Adapter l’interface à la taille disponible
  if (width < 400 || height < 300) {
    enableCompactUI()
  } else {
    enableFullUI()
  }
  
  // Redimensionner correctement le jeu
  resizeCanvas(width, height)
}

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

8) Indicateur de chargement pour les jeux intégrés

Affichez immédiatement un élément visuel :

// Intégrer directement dans le HTML pour un affichage instantané
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>Chargement...</p>
    </div>
  </div>
`

// Supprimer l’indicateur lorsque le jeu est prêt
function hideLoading() {
  const loading = document.getElementById('loading')
  if (loading) {
    loading.style.opacity = '0'
    loading.style.transition = 'opacity 0.3s'
    setTimeout(() => loading.remove(), 300)
  }
}

9) SDK propres aux plateformes

Certaines plateformes disposent de leurs propres API :

Itch.io :

// Aucun SDK requis, mais postMessage peut servir pour les succès
window.parent.postMessage({ type: 'itch-achievement', data: { id: 'first-win' }}, '*')

Newgrounds :

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

Cinevva :

// Signaler que le jeu est prêt
window.parent.postMessage({ type: 'cinevva:ready' }, '*')

// Signaler que le jeu est jouable
window.parent.postMessage({ type: 'cinevva:playable' }, '*')

10) Considérations de sécurité

// Valider l’origine des messages pour les opérations sensibles
window.addEventListener('message', (event) => {
  const trustedOrigins = [
    'https://itch.io',
    'https://cinevva.com',
    'https://yoursite.com'
  ]
  
  if (!trustedOrigins.includes(event.origin)) {
    return // Ignorer les messages non fiables
  }
  
  // Traiter le message...
})

// Ne pas exposer d’opérations sensibles via postMessage
// Autoriser uniquement les commandes figurant sur la liste blanche
const allowedCommands = ['pause', 'resume', 'setVolume', 'mute']

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

Liste de vérification pour les tests

• Tests locaux : utilisez un serveur HTTP simple, et non file://
• Origines différentes : effectuez un test avec une véritable intégration dans une iframe
• Permissions : effectuez un test avec un bac à sable restrictif
• Focus : testez le clavier après avoir cliqué en dehors de l’iframe
• Redimensionnement : testez différentes tailles d’intégration
• Mobile : testez les commandes tactiles dans un contexte d’intégration

<!-- Page de test de l’intégration -->
<!DOCTYPE html>
<html>
<body style="background: #333; padding: 20px;">
  <h1 style="color: #fff;">Test d’intégration</h1>
  <iframe 
    src="http://localhost:8000" 
    width="800" 
    height="600"
    allow="fullscreen; autoplay; gamepad"
  ></iframe>
</body>
</html>

Articles connexes

• Publier un jeu web qui se charge rapidement
• Jeux web adaptés aux appareils mobiles
• Pour les créateurs
• COOP/COEP et SharedArrayBuffer — les en-têtes interorigines qui affectent l’intégration dans une iframe
• Comment lancer votre jeu sur itch.io — itch.io intègre nativement les jeux sur navigateur dans des iframes

Ressources externes

• MDN : élément iframe — référence complète des attributs d’une iframe
• MDN : politique d’autorisations — contrôle des fonctionnalités accessibles aux iframes
• MDN : API postMessage — communication entre une iframe et sa page parente

IndexedDB est la meilleure option pour stocker durablement les données d’un jeu dans le navigateur. Il gère de grandes quantités de données, fonctionne hors ligne et ne bloque pas le thread principal.

1) Pourquoi choisir IndexedDB plutôt que localStorage ?

Pour les jeux, IndexedDB est presque toujours le bon choix.

2) Ouvrir une base de données

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) Sauvegarder l’état du jeu

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) Charger l’état du jeu

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) Lister toutes les sauvegardes

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) Supprimer une sauvegarde

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) Une classe GameStorage complète

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) Stocker des données binaires (textures, audio)

IndexedDB prend en charge les Blobs et les ArrayBuffers :

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) Modèle de sauvegarde automatique

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) Gestion des erreurs et solutions de repli

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) Protéger les sauvegardes contre l’éviction

La persistance d’IndexedDB n’est pas garantie. Par défaut, une origine utilise un stockage « au mieux », que le navigateur peut évincer lorsque le disque est plein ou, avec Safari/WebKit, après une période sans interaction de l’utilisateur avec votre site. Pour des sauvegardes de jeu, ce sont précisément les données que vous ne voulez pas perdre.

Demandez un stockage persistant afin que le navigateur n’efface pas vos données sans action explicite de l’utilisateur :

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
}

Les navigateurs décident d’accorder ou non cette autorisation selon des signaux d’engagement, comme la fréquence d’interaction de l’utilisateur avec votre site ou son installation en tant que PWA. Ne supposez donc pas que la demande réussira toujours. Vous pouvez également vérifier l’espace disponible avant d’écrire de grandes sauvegardes ou de mettre des ressources en cache :

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

Ces deux API nécessitent un contexte sécurisé (HTTPS ou localhost).

À lire aussi

• PWA pour les jeux hors ligne
• Service workers pour la mise en cache des jeux
• Publier un jeu web qui se charge rapidement
• Chargement progressif des ressources — utiliser IndexedDB comme cache de ressources
• Analytique pour les jeux web — suivre les habitudes de sauvegarde et de chargement pour comprendre le comportement des joueurs

Ressources externes

• MDN : API IndexedDB — référence complète de l’API
• MDN : Utiliser IndexedDB — guide étape par étape
• Bibliothèque idb — un petit wrapper IndexedDB fondé sur les promesses

Le mobile est la plus grande plateforme de jeu. Quelques ajustements suffisent pour que votre jeu web fonctionne parfaitement sur les téléphones et les tablettes.

1) Configuration de la zone d’affichage

Empêchez le zoom et assurez une mise à l’échelle correcte :

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

2) Canvas en plein écran

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

Si vous dimensionnez l’interface en fonction de la hauteur de la zone d’affichage plutôt qu’avec height: 100%, préférez les unités dynamiques de zone d’affichage dvh, svh et lvh à vh. Elles tiennent compte de la barre d’outils rétractable du navigateur mobile, contrairement à 100vh (sur iOS, 100vh correspond à la hauteur lorsque la barre d’outils est masquée, ce qui peut couper le bas de votre mise en page). Ces unités ont atteint le statut Baseline Widely Available et sont prises en charge dans Chrome/Edge 108+, Firefox 101+ et Safari/iOS Safari 15.4+, soit environ 92 % des utilisateurs.

3) Gestion des événements tactiles

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

Si votre jeu doit également fonctionner avec une souris ou un stylet, envisagez d’utiliser les événements de pointeur (pointerdown/pointermove/pointerup) plutôt que les événements tactiles. MDN les recommande désormais comme modèle d’entrée unique et indépendant du périphérique : un seul parcours de code gère le tactile, la souris et le stylet, tandis que le multitouch reste disponible grâce à pointerId (l’équivalent de touch.identifier utilisé ci-dessus). Les événements tactiles conviennent toujours parfaitement aux jeux exclusivement tactiles.

4) Joystick virtuel

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) Boutons tactiles

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) Gestion de l’orientation

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) Optimisation des performances

// 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) Gestion de la batterie

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

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

Une limite à connaître : l’API Fullscreen ne fonctionne pas pour les éléments génériques sur iPhone. Safari sur iOS ne propose le plein écran que pour les éléments vidéo natifs (via la méthode non standard webkitEnterFullscreen). Ainsi, documentElement.requestFullscreen() échouera sur iPhone. Le bloc try/catch ci-dessus gère ce cas proprement : concevez donc votre jeu pour qu’il reste jouable sans véritable plein écran sur iPhone et considérez le plein écran comme une amélioration sur iPad, Android et les ordinateurs où il est pris en charge. L’appel screen.orientation.lock() présente la même limitation sur iPhone ; ne rendez donc pas votre jeu dépendant de cette fonctionnalité.

10) Liste de contrôle pour les tests

Avant la publication :

• Réactivité tactile — Testez sur de vrais appareils, pas uniquement dans des émulateurs
• Différentes tailles d’écran — Téléphone, tablette, iPad Pro
• Les deux orientations — Ou verrouillez-en une
• Appareils d’entrée de gamme — Testez sur des téléphones âgés de 2 à 3 ans
• Réseaux lents — Testez avec une simulation 3G
• Safari sur iOS — Présente des particularités pour l’audio et le plein écran
• Chrome sur Android — Le navigateur le plus courant
• Interruptions — Appels téléphoniques, notifications
• Pression mémoire — Le jeu récupère-t-il correctement après le passage de l’onglet en arrière-plan ?

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

Articles connexes

• Gestion des commandes de jeu
• Canvas de jeu responsive
• PWA pour les jeux hors ligne
• API Web Audio pour les jeux — gestion des restrictions audio d’iOS
• Publier un jeu web qui se charge rapidement — optimisation des temps de chargement sur les connexions mobiles
• Intégration de jeux par iframe — considérations propres à l’intégration sur mobile

Ressources externes

• MDN : événements tactiles — gestion du multitouch
• MDN : API Screen Orientation — verrouillage de l’orientation
• MDN : API Fullscreen — passage en plein écran sur mobile
• web.dev : design responsive — modèles responsives applicables aux interfaces de jeu

Le pixel art est magnifique lorsqu’il est correctement affiché, mais désastreux lorsqu’il est flou. Ce tutoriel présente les techniques permettant d’obtenir des graphismes en pixels nets et authentiques.

1) Le problème du flou

Par défaut, les navigateurs lissent les images lors de leur mise à l’échelle. Pour le pixel art, ce comportement est inadapté :

/* Solution CSS */
canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Solution de repli pour Firefox */
}

2) Paramètres du contexte Canvas

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

// Désactiver le lissage pour obtenir des pixels nets
ctx.imageSmoothingEnabled = false

Ce paramètre doit être réappliqué après chaque redimensionnement du canvas ou changement de contexte.

3) Mise à l’échelle par nombres entiers

Le pixel art est plus réussi avec des facteurs d’échelle entiers (1x, 2x, 3x, 4x) :

const GAME_WIDTH = 160
const GAME_HEIGHT = 144 // Résolution de la Game Boy

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) Dessiner les sprites à des positions entières

Les positions sous-pixelliques provoquent du flou :

// Mauvais : provoque du flou
ctx.drawImage(sprite, 10.5, 20.3)

// Bon : pixels nets
ctx.drawImage(sprite, Math.floor(10.5), Math.floor(20.3))

// Ou arrondir à l’entier le plus proche
ctx.drawImage(sprite, Math.round(player.x), Math.round(player.y))

5) Animation d’une feuille de sprites

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

// Utilisation
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) Remplacement de palette

Une technique classique pour recolorer les 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
}

// Créer une variante de l’ennemi
const blueEnemy = createPaletteSwap(
  enemySprite,
  [{ r: 255, g: 0, b: 0 }],    // Rouge
  [{ r: 0, g: 100, b: 255 }]   // Bleu
)

7) Rendu d’une carte de tuiles

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) Effets de contour

Ajoutez des contours aux sprites pour améliorer leur visibilité :

function drawWithOutline(ctx, image, x, y, outlineColor = '#000') {
  const offsets = [[-1, 0], [1, 0], [0, -1], [0, 1]]
  
  // Dessiner le contour
  ctx.globalCompositeOperation = 'source-over'
  for (const [ox, oy] of offsets) {
    ctx.drawImage(image, Math.round(x + ox), Math.round(y + oy))
  }
  
  // Appliquer la couleur au contour
  ctx.globalCompositeOperation = 'source-in'
  ctx.fillStyle = outlineColor
  ctx.fillRect(x - 1, y - 1, image.width + 2, image.height + 2)
  
  // Dessiner le sprite par-dessus
  ctx.globalCompositeOperation = 'source-over'
  ctx.drawImage(image, Math.round(x), Math.round(y))
}

9) Tremblement de l’écran

Un effet classique pour renforcer les sensations de jeu :

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

// Dans la fonction de rendu :
function render() {
  const shake = camera.getOffset()
  ctx.save()
  ctx.translate(shake.x, shake.y)
  // Tout dessiner...
  ctx.restore()
}

// Lors d’un impact :
camera.shake(4, 0.2) // Intensité de 4 pixels pendant 0,2 seconde

10) Contraintes de palette de couleurs

Le pixel art authentique utilise des palettes limitées :

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
}

Articles connexes

• Boucle de jeu Canvas 2D
• Canvas de jeu responsive
• Chargement progressif des ressources
• Où trouver des ressources de jeu gratuites — feuilles de sprites, packs de pixel art et sources de ressources 2D
• Rendu du texte dans les jeux — polices bitmap adaptées au style de votre pixel art

L’API Pointer Lock capture le curseur de la souris afin d’offrir des commandes de caméra fluides de type FPS. Elle est indispensable pour les jeux de tir à la première et à la troisième personne.

1) Demander le verrouillage du pointeur

Le verrouillage du pointeur nécessite une action de l’utilisateur :

const canvas = document.getElementById('game')

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

Entrée brute de la souris (désactiver l’accélération)

Par défaut, le navigateur applique l’accélération de la souris du système d’exploitation à movementX/movementY. Ainsi, un mouvement rapide et un déplacement lent sur la même distance produisent des rotations de caméra différentes. Pour viser dans un FPS, on souhaite généralement l’inverse : une même distance physique doit toujours faire pivoter la caméra du même angle. Demandez des mouvements bruts, sans accélération, en passant unadjustedMovement: true à requestPointerLock() :

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

La version moderne de requestPointerLock() renvoie une Promise qui est résolue en cas de réussite et rejetée en cas d’échec, d’où l’utilisation de try/catch autour de l’appel ci-dessus. Chrome et Edge prennent en charge unadjustedMovement depuis la version 88, et Safari depuis la version 18.4 (mars 2025), qui a également corrigé requestPointerLock afin qu’elle renvoie une Promise. Les anciens navigateurs qui ne renvoient pas de Promise fonctionnent tout de même ici, car await accepte une valeur qui n’est pas une Promise et l’option inconnue est simplement ignorée. Conservez donc toujours l’appel de secours à requestPointerLock() sans option.

2) Détecter l’état du verrouillage

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) Lire les mouvements de la souris

Lorsque le pointeur est verrouillé, utilisez movementX et 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) Classe de caméra FPS

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) Déplacement avec les touches WASD

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

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

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

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

6) Contrôleur FPS complet

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) Réticule

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) Tirer avec les boutons de la souris

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) Réglages de sensibilité

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) Indication pour quitter

Affichez les instructions permettant de quitter le verrouillage du pointeur :

function showLockUI() {
  const ui = document.getElementById('lock-ui')
  
  if (document.pointerLockElement) {
    ui.innerHTML = '<p>Appuyez sur Échap pour libérer la souris</p>'
    ui.style.opacity = '0.5'
    setTimeout(() => ui.style.opacity = '0', 2000)
  } else {
    ui.innerHTML = '<p>Cliquez pour jouer</p>'
    ui.style.opacity = '1'
  }
}

document.addEventListener('pointerlockchange', showLockUI)

À propos de cette indication : lorsque le joueur appuie sur Échap pour quitter le verrouillage du pointeur, le navigateur exige une nouvelle action de l’utilisateur (un clic) avant d’autoriser un nouveau verrouillage. C’est pourquoi la surcouche « Cliquez pour jouer » est nécessaire. En revanche, si votre propre code appelle document.exitPointerLock() (par exemple pour ouvrir un menu en jeu), aucune nouvelle action n’est nécessaire pour réactiver ensuite le verrouillage. Vous pouvez donc le rétablir par programmation lorsque le menu se ferme. Des pressions répétées sur Échap peuvent également inciter le navigateur à refuser tout nouveau verrouillage jusqu’à ce que l’utilisateur effectue une action plus explicite. N’essayez donc pas de réactiver automatiquement le verrouillage lors de pointerlockchange.

Considérations relatives aux iframes

Le verrouillage du pointeur dans les iframes nécessite l’attribut allow="pointer-lock" :

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

Vérifiez si le verrouillage du pointeur est disponible :

if (!document.pointerLockElement && !('requestPointerLock' in canvas)) {
  showMessage('La capture de la souris n’est pas disponible')
}

À lire également

• Gestion des entrées de jeu
• API Gamepad
• Principes fondamentaux de WebGL
• Notions de base de WebXR — commandes VR pour les expériences à la première personne
• Bien démarrer avec WebGPU — rendu GPU moderne pour les jeux FPS

Ressources externes

• MDN : API Pointer Lock — référence complète de l’API
• MDN : MouseEvent.movementX — lecture des déplacements relatifs de la souris

Les Progressive Web Apps permettent aux joueurs d’installer votre jeu et d’y jouer hors ligne. Ce tutoriel explique comment ajouter la prise en charge des PWA à un jeu web.

1) Manifeste d’application web

Créez manifest.json :

{
  "name": "Mon jeu génial",
  "short_name": "JeuGénial",
  "description": "Un jeu génial auquel vous pouvez jouer hors ligne",
  "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"
    }
  ]
}

Ajoutez le lien dans votre HTML :

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

2) Service worker de base

Créez sw.js :

const CACHE_NAME = 'game-v1'

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

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

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

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

3) Enregistrer le service worker

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

4) Priorité au cache avec mise à jour réseau

Une meilleure approche pour les jeux : chargement rapide et mises à jour en arrière-plan.

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

5) Cache versionné pour les mises à jour

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) Gérer les mises à jour du jeu

Informez les joueurs lorsqu’une mise à jour est disponible :

// 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>Jeu mis à jour ! Actualisez la page pour obtenir la dernière version.</p>
    <button onclick="location.reload()">Actualiser</button>
  `
  banner.className = 'update-banner'
  document.body.appendChild(banner)
}

7) Détecter le mode hors ligne

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) Invite d’installation

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

Sur iOS et iPadOS, l’événement beforeinstallprompt ne se déclenche jamais. Le bouton d’installation ci-dessus ne s’affiche donc que dans les navigateurs Chromium. Les utilisateurs d’iPhone et d’iPad installent l’application en touchant Partager, puis « Sur l’écran d’accueil ». Un changement intervenu en 2026 mérite d’être signalé : à partir de Safari 26 (iOS 26 / iPadOS 26), chaque site ajouté à l’écran d’accueil s’ouvre par défaut comme une application web, avec une option « Ouvrir comme app web » activée par défaut. Il n’existe plus d’exigence d’installabilité sur iOS, même si fournir un manifeste et un service worker offre toujours une bien meilleure expérience hors ligne.

9) Synchronisation en arrière-plan des classements

Attention à la compatibilité : l’API Background Sync n’est implémentée que dans les navigateurs Chromium (Chrome, Edge, Opera et Samsung Internet). Firefox et Safari, y compris sur iOS, ne la prennent pas en charge. Détectez donc toujours cette fonctionnalité et prévoyez une solution de repli qui envoie les scores au prochain chargement normal de l’application.

// 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) Tester la PWA

Chrome DevTools :

• Application > Service Workers
• Application > Manifest
• Application > Cache Storage
• Network > Case à cocher Offline

Audit Lighthouse :

• Exécuter l’audit PWA
• Vérifier l’installabilité
• Vérifier le fonctionnement hors ligne

Test sur un appareil réel :

• Installer le jeu sur l’écran d’accueil du téléphone
• Activer le mode avion
• Tester toutes les fonctionnalités hors ligne

À lire aussi

• Service workers pour la mise en cache des jeux
• Sauvegardes de jeu avec IndexedDB
• Publier un jeu web qui se charge rapidement
• Jeux web adaptés aux appareils mobiles — commandes tactiles et gestion de la fenêtre d’affichage pour les jeux PWA
• Chargement progressif des ressources — stratégies de chargement compatibles avec la mise en cache par service worker

Ressources externes

• MDN : Progressive Web Apps — documentation complète sur les PWA
• web.dev : découvrir les PWA — parcours d’apprentissage des PWA proposé par Google
• MDN : manifeste d’application web — référence du fichier manifeste

Un canvas qui ne se redimensionne pas correctement devient flou ou s’affiche mal selon la taille de l’écran. J’ai dû résoudre ce problème plus souvent que je ne saurais le compter, alors laissez-moi vous épargner ces difficultés.

Essayez différents modes de mise à l’échelle :

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

Les service workers vous permettent de contrôler la mise en cache et la distribution des ressources. Pour les jeux, cela signifie des chargements instantanés lors des visites suivantes et une prise en charge hors ligne.

1) Principes de base des service workers

Créez sw.js à la racine de votre projet :

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

Enregistrez-le :

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

2) Stratégie cache-first (idéale pour les ressources de jeu)

Chargez depuis le cache et ne récupérez la ressource sur le réseau que si elle n'est pas en cache :

const CACHE_NAME = 'game-assets-v1'

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

3) Prémettre en cache les ressources critiques

L'événement d'installation est idéal pour la pré-mise en cache :

const CACHE_NAME = 'game-v1'

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

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

4) Stratégie network-first pour le contenu dynamique

Utilisez la stratégie network-first pour les éléments qui changent, comme les classements et les données des joueurs :

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

Renvoyez immédiatement la version en cache et mettez-la à jour en arrière-plan :

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) Gestion des versions et nettoyage du cache

Supprimez les anciens caches lors de l'activation :

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) Séparer les caches par type

Organisez les caches pour mieux les gérer :

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) Requêtes de plage pour l'audio et la vidéo

Une chose à savoir dès le départ : l'API Cache ne stocke pas les réponses partielles. Si une réponse 206 Partial Content parvient à cache.put(), celui-ci lève l'erreur TypeError: Failed to execute 'put' on 'Cache': Partial response (status code 206) is unsupported. Le modèle à suivre pour les médias mis en cache est donc toujours le même : prémettre en cache, ou récupérer, le fichier complet sous la forme d'une réponse 200 normale, puis générer vous-même la réponse 206 en découpant les octets mis en cache lorsqu'une requête arrive avec un en-tête Range. Si vous préférez ne pas l'implémenter vous-même, le plug-in range-requests de Workbox effectue précisément ce découpage lorsqu'il est associé à une stratégie CacheFirst.

Gérez correctement les requêtes de plage, ce qui est nécessaire pour naviguer dans un fichier 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) Notification de mise à jour

Prévenez les joueurs lorsqu'une nouvelle version est prête :

// 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>Une nouvelle version est disponible !</span>
    <button onclick="location.reload()">Mettre à jour</button>
  `
  document.body.appendChild(banner)
}

10) Service worker complet pour un jeu

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
}

Articles associés

• PWA pour les jeux hors ligne
• Chargement progressif des ressources
• Publier un jeu web qui se charge rapidement
• API Web Audio pour les jeux — mettre en cache les ressources audio pour jouer hors ligne
• Sauvegardes de jeu avec IndexedDB — conserver l'état du jeu avec les ressources mises en cache

Ressources externes

• MDN : API Service Worker — référence complète de l'API
• MDN : API Cache — référence de l'interface Cache
• web.dev : Service workers — stratégies et modèles de mise en cache
• Workbox — bibliothèque de Google proposant des outils pour les service workers

Si les joueurs ne peuvent pas commencer à jouer en quelques secondes, ils s’en vont. Ce tutoriel propose une check-list pratique applicable à presque toutes les piles technologiques de jeux web (Canvas/WebGL/WebGPU, Pixi/Three/PlayCanvas, moteur personnalisé, etc.).

1) Définissez d’abord des budgets (sinon vous ne pourrez pas optimiser)

Choisissez des budgets adaptés à l’appareil ciblé. Voici de bonnes valeurs par défaut pour une expérience de « jeu instantané » :

• JS+CSS transférés : moins de ~300–500 Ko avec gzip (moins, c’est mieux)
• Ressources critiques avant la première interaction : moins de ~2–5 Mo compressés
• Délai avant la première interaction : moins de ~3–5 secondes sur un appareil mobile de milieu de gamme

Notez ces valeurs et considérez-les comme des contrats d’API.

2) Mesurez les bons éléments

Dans les outils de développement Chrome :

• Utilisez Performance pour enregistrer une session et examiner les tâches longues.
• Utilisez Network pour vérifier :
  • la taille transférée par rapport à la taille décodée
  • les en-têtes de mise en cache
  • si les ressources sont diffusées progressivement ou arrivent sous la forme d’un seul énorme bloc

Pour votre jeu, mesurez :

• le délai avant que « le joueur puisse se déplacer »
• le délai avant la « première image significative »
• la « latence de la première interaction » (interaction → image)

Votre intuition concernant la « latence de la première interaction » correspond désormais à une métrique standard : Interaction to Next Paint (INP) a remplacé First Input Delay parmi les signaux web essentiels en mars 2024. Cette métrique mesure le délai complet entre une interaction et l’affichage suivant pour toutes les interactions, et pas seulement la première. Visez un INP inférieur à 200 ms au 75e centile : c’est un point de référence externe utile pour les mesures de réactivité que vous suivez déjà.

3) Compressez tout ce que vous pouvez

Assurez-vous que votre hébergement utilise :

• Brotli (br) pour les ressources textuelles (JS/CSS/HTML/WASM), lorsqu’il est disponible
• gzip comme solution de repli

Si votre hébergeur et votre CDN le permettent, Zstandard (zstd) constitue désormais une troisième option pour Content-Encoding. Il est pris en charge par Chrome et Edge 123+, Firefox 126+ et Safari 26.3+ (soit environ 80 % des utilisateurs) et peut atteindre des taux de compression comparables à ceux de Brotli tout en sollicitant moins le processeur du serveur, ce qui est utile pour les fichiers WASM et JSON volumineux. Les navigateurs n’annoncent Accept-Encoding: zstd que via HTTPS. Conservez donc Brotli et gzip comme solutions de repli pour tous les autres utilisateurs.

Pour les builds WebAssembly, la compression fait souvent toute la différence entre un chargement « instantané » et un jeu qui « ne se charge jamais ».

4) Ne téléchargez pas le monde entier dès le départ

Divisez votre jeu en plusieurs parties :

• Démarrage : chargeur minimal + contrôles + première scène
• Cœur : principaux systèmes de jeu
• Facultatif : niveaux supplémentaires, éléments cosmétiques, textures haute résolution, pistes audio bonus, etc.

Ne chargez le contenu « Facultatif » qu’une fois que :

• le joueur peut déjà jouer, et/ou
• vous savez qu’il souhaite accéder à ce contenu (par exemple, il a atteint un menu ou un niveau)

5) Choisissez les bons formats de ressources

Pour la plupart des jeux web :

• Images : privilégiez WebP (ou AVIF si vous pouvez accepter un encodage plus lent) pour l’interface et les arrière-plans.
• Audio : privilégiez Ogg Vorbis pour un usage général ; testez AAC pour les écosystèmes Apple.
• Vidéo : privilégiez MP4/H.264 pour la compatibilité et WebM lorsqu’il est pris en charge et produit des fichiers plus petits.

Surveillez le coût du décodage : un « téléchargement plus léger » peut malgré tout être « plus lent à décoder ».

6) Gardez votre première scène légère et déterministe

Évitez les éléments suivants dans votre première scène interactive :

• une compilation massive de shaders
• le transfert d’énormes textures
• une génération procédurale qui bloque le thread principal
• l’analyse JSON synchrone de fichiers de plusieurs mégaoctets

Pour les textures en particulier, utilisez KTX2 avec la supercompression Basis Universal plutôt que PNG ou JPEG. Les textures restent compressées pour le GPU après leur transfert (avec transcodage en BC7 sur ordinateur ou en ASTC sur mobile au chargement), ce qui réduit la VRAM nécessaire d’un facteur 4 à 8 et rend les transferts bien moins coûteux que le décodage d’un PNG en pleine résolution suivi de l’envoi des pixels bruts au GPU.

Si vous devez effectuer des opérations lourdes, faites-le :

• progressivement, sur plusieurs images, ou
• dans un Worker (lorsque c’est possible)

7) Mettez en cache de manière intensive (mais correcte)

Utilisez une mise en cache de longue durée pour les ressources adressées par leur contenu :

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

Pour les points d’entrée HTML, conservez une durée de mise en cache courte afin de pouvoir déployer des mises à jour en toute sécurité.

8) Rendez les échecs rapides et compréhensibles

En cas de problème, affichez :

• un message d’erreur clair
• un bouton pour réessayer
• un lien permettant de signaler le problème

Les échecs silencieux détruisent la confiance.

9) Si vous utilisez des threads Wasm, comprenez COOP/COEP

Si votre build dépend de SharedArrayBuffer (ce qui est courant avec certaines configurations multithreads Wasm), vous aurez probablement besoin d’en-têtes d’isolation interorigine :

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

Deux options s’offrent à vous pour l’en-tête COEP. require-corp est l’option stricte, mais elle impose à chaque ressource interorigine (textures provenant d’un CDN, scripts tiers) d’envoyer un en-tête Cross-Origin-Resource-Policy, sans quoi elle sera bloquée. Cross-Origin-Embedder-Policy: credentialless permet également d’activer SharedArrayBuffer et l’isolation interorigine, mais charge les ressources interorigine sans identifiants plutôt que de leur imposer une autorisation explicite via CORP. Si vous récupérez des ressources depuis un CDN que vous ne contrôlez pas, credentialless est généralement la solution la moins contraignante.

Effectuez des tests au plus tôt sur votre véritable hébergement, car les en-têtes et les intégrations tierces peuvent provoquer des dysfonctionnements.

10) Rendez le jeu jouable sans SDK

Si vous ciblez le processus de création de Cinevva, visez :

• une URL unique qui démarre de manière fiable
• aucune connexion obligatoire pour lancer une démo
• des contrôles prévisibles

Vous serez alors prêt à distribuer votre jeu sans intégrer de SDK supplémentaire.

À lire également :

• Pour les créateurs de jeux
• Politique relative au contenu généré par l’IA
• Chargement progressif des ressources — modèles de chargement progressif pour les jeux volumineux
• Service workers pour la mise en cache des jeux — mettez les ressources en cache pour des visites ultérieures instantanées
• Comparatif des moteurs de jeux web — taille des builds et temps de chargement selon les moteurs
• Comment publier votre jeu sur itch.io — optimisez les jeux pour navigateur intégrés à itch.io

Les joueurs n'attendront pas le téléchargement de 100 Mo. Chargez progressivement les ressources afin qu'ils puissent jouer pendant que le reste se charge en arrière-plan.

1) La stratégie de chargement

Répartissez les ressources en plusieurs catégories :

1. Critiques — Nécessaires pour afficher le premier écran (< 1 Mo)
2. Gameplay — Nécessaires pour jouer (< 10 Mo)
3. Améliorations — Facultatives (à charger en arrière-plan)

2) Chargeur de ressources de base

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) Chargement avec suivi de la progression

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
}

Attention : lorsque le serveur compresse la réponse (avec gzip ou brotli, comme le font la plupart des CDN par défaut), Content-Length correspond à la taille compressée, tandis que les fragments lus sont déjà décompressés. Le rapport received / total dépasse alors 100 %. Pour obtenir une barre de progression précise au niveau des octets avec les réponses compressées, servez la ressource sans compression, envoyez votre propre en-tête indiquant la taille décompressée ou utilisez l'événement onprogress de XMLHttpRequest, qui indique la progression réelle du transfert.

4) Chargement par lots avec progression globale

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
}

// Utilisation
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(`Chargement : ${Math.round(progress * 100)}% (${name})`)
})

5) Chargeur avec file d'attente prioritaire

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

// Utilisation
const loader = new PriorityLoader()
loader.add('critical.png', 10)  // Charger en premier
loader.add('optional.png', 1)   // Charger plus tard

6) Chargement différé des niveaux

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) {
    // Charger uniquement ce qui est nécessaire pour ce niveau
    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)
    // Les ressources peuvent être récupérées par le ramasse-miettes
  }
}

7) Streaming de fichiers volumineux

Pour les fichiers volumineux (modèles 3D, audio), utilisez le streaming et traitez-les progressivement :

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

// Pour l'audio : utiliser Media Source Extensions
// Pour la 3D : traiter les données du maillage à mesure qu'elles arrivent

8) Mise en cache des ressources chargées

Associez le chargeur à IndexedDB pour une mise en cache persistante :

class CachedLoader {
  constructor() {
    this.memCache = new Map()
    this.dbName = 'AssetCache'
  }
  
  async loadImage(url) {
    // Vérifier la mémoire
    if (this.memCache.has(url)) return this.memCache.get(url)
    
    // Vérifier IndexedDB
    const cached = await this.getFromDB(url)
    if (cached) {
      const img = await this.blobToImage(cached)
      this.memCache.set(url, img)
      return img
    }
    
    // Récupérer et mettre en 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)
    })
  }
  
  // Méthodes IndexedDB...
}

9) Modèle d'écran de chargement

class LoadingScreen {
  constructor(canvas) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.progress = 0
    this.message = 'Chargement...'
  }
  
  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)
    
    // Barre de progression
    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)
    
    // Texte
    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) Bonnes pratiques

• Affichez immédiatement quelque chose — même une image statique
• Chargez d'abord ce qui est visible — les textures de la vue actuelle
• Utilisez des espaces réservés — des images en basse résolution remplacées ensuite
• Préchargez le niveau suivant — pendant que le joueur joue encore
• Gérez les échecs sans interrompre l'expérience — nouvelles tentatives et solutions de repli

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

Articles connexes

• Publier un jeu web qui se charge rapidement
• Service workers pour la mise en cache des jeux
• Sauvegardes de jeu avec IndexedDB
• Web Workers pour la logique de jeu — décodez et traitez les ressources en dehors du thread principal
• Où trouver des ressources de jeu gratuites — sources de modèles 3D, de textures et de contenus audio à diffuser en streaming

Ressources externes

• MDN : API Fetch — réponses en streaming et ReadableStream
• MDN : ReadableStream — traitement des fragments de données diffusés en streaming
• Spécification glTF 2.0 — le format standard pour la diffusion en streaming de ressources 3D

Le texte est omniprésent dans les jeux : scores, dialogues, menus, nombres de dégâts. Ce tutoriel présente différentes approches et explique quand utiliser chacune d’elles.

1) Principes de base du texte Canvas

L’approche la plus simple :

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

Si vous avez besoin d’un espacement plus serré ou plus large pour les titres et les libellés de l’interface, le contexte Canvas prend désormais directement en charge letterSpacing et wordSpacing. Ces deux propriétés acceptent des chaînes de longueur CSS et ont atteint le niveau Baseline commun à tous les navigateurs en 2025. Il n’est donc plus nécessaire de dessiner les glyphes un par un pour simuler le crénage :

ctx.font = '24px sans-serif'
ctx.letterSpacing = '2px'
ctx.wordSpacing = '6px'
ctx.fillText('FIN DE PARTIE', 100, 100)

Réinitialisez-les à '0px' lorsque vous avez terminé, car elles restent définies dans le contexte, comme font et fillStyle.

2) Texte avec contour

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, 'FIN DE PARTIE', 400, 300, '#fff', '#000', 3)

3) Texte avec ombre

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

4) Rendu avec une police bitmap

Pour les jeux en pixel art ou pour obtenir un rendu homogène sur toutes les plateformes :

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

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

5) Texte pré-rendu pour de meilleures performances

Pour du texte statique, effectuez le rendu une seule fois, puis réutilisez-le :

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
}

// Créer une seule fois
const titleImage = createTextImage('MON JEU', '48px Impact', '#fff')

// Dessiner de nombreuses fois (rapide)
ctx.drawImage(titleImage, x, y)

6) Effet machine à écrire

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) Texte avec retour à la ligne automatique

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) Système de boîte de dialogue

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) {
    // Arrière-plan de la boîte
    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'
    ctx.fillRect(this.x, this.y, this.width, this.height)
    
    // Bordure
    ctx.strokeStyle = '#fff'
    ctx.lineWidth = 2
    ctx.strokeRect(this.x, this.y, this.width, this.height)
    
    // Texte
    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
      )
    }
    
    // Indicateur de continuation
    if (this.isComplete()) {
      ctx.fillText('▼', this.x + this.width - 24, this.y + this.height - 24)
    }
  }
}

9) Nombres de dégâts flottants

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

// Gestionnaire
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) Texte WebGL (polices SDF)

Pour les jeux WebGL, les polices à champ de distance signé (SDF) conservent un rendu net à toutes les échelles :

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

// Des bibliothèques comme msdf-bmfont-xml peuvent générer des atlas de polices SDF

Pour les scènes three.js en particulier, troika-three-text est une bonne option. Au lieu de précalculer un atlas, cette bibliothèque analyse les fichiers .ttf/.otf/.woff et génère les glyphes SDF à la volée dans un web worker. Elle gère également le crénage, les ligatures et les systèmes d’écriture de droite à gauche.

Pour la plupart des jeux Canvas 2D, les polices bitmap ou le texte Canvas pré-rendu fonctionnent bien.

Articles connexes

• Boucle de jeu Canvas 2D
• Rendu du pixel art
• Principes fondamentaux de WebGL
• Canvas de jeu adaptatif — mise à l’échelle du texte selon la résolution du canvas et la densité de pixels
• Où trouver des ressources de jeu gratuites — sources de polices et de ressources d’interface utilisateur

Tone.js s’appuie sur l’API Web Audio et facilite l’utilisation de sons synthétisés. Au lieu de charger des fichiers audio, vous générez les sons par programmation. Vous bénéficiez ainsi d’un temps de chargement nul, de variations infinies et de sons capables de réagir au gameplay en temps réel.

Essayez (cliquez sur les boutons pour écouter des sons de jeu synthétisés) :

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

Un bon rendu sonore transforme un jeu. Un jeu silencieux semble sans vie. La Web Audio API permet de produire des effets sonores à faible latence, de lire de la musique et même de créer un son spatial 3D, le tout dans le navigateur.

Essayez-la (cliquez sur un bouton pour écouter des sons synthétisés) :

let audioCtx = null

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

// Initialiser lors de la première 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)
}

Les Web Workers permettent d’exécuter du JavaScript dans un thread en arrière-plan. Pour les jeux, cela signifie que la physique, l’IA et la génération procédurale peuvent s’exécuter sans provoquer de chutes de framerate.

1) Quand utiliser des Workers

Cas adaptés :

• Simulation physique
• Recherche de chemin (A*, navmesh)
• Prise de décision par l’IA
• Génération procédurale
• Traitement des ressources (manipulation d’images, compression)
• Calculs mathématiques complexes (FFT, détection de collisions)

Cas moins adaptés :

• Rendu (les Workers ne peuvent pas accéder directement au DOM ou au Canvas)
• Très petites tâches (le surcoût lié au thread n’en vaut pas la peine)

2) Créer un Worker simple

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) Workers intégrés au code (sans fichier séparé)

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 sous forme de modules ES

Vous pouvez écrire le code du worker sous forme de module ES et y utiliser import au lieu de importScripts. Transmettez { type: 'module' } au constructeur :

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

Dans le worker, vous pouvez ensuite utiliser import pour les utilitaires partagés de mathématiques, de collisions ou d’IA, comme dans le thread principal, afin de ne pas dupliquer la logique du jeu. Les workers de type module sont pris en charge par Chrome et Edge 80+, Safari 15+ et Firefox 114+.

5) Exemple de Worker pour la physique

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) Objets transférables pour améliorer les performances

Les grandes quantités de données peuvent être transférées sans copie :

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

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

7) Worker de recherche de chemin

pathfinding-worker.js :

let grid = null

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

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

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

8) Pool de Workers pour les tâches parallèles

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 pour la synchronisation en temps réel

Lorsque l’isolation entre origines est activée, vous pouvez partager la mémoire :

// 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 pour les Workers

Effectuez le rendu dans un Worker. OffscreenCanvas est désormais largement disponible selon le référentiel Baseline dans Chrome, Edge, Firefox et Safari (Safari l’a pris en charge à partir de la version 17.0 sur macOS et 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) Gestion des erreurs

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

À lire aussi

• Publier un jeu web qui se charge rapidement
• Activer les threads Wasm (SharedArrayBuffer)
• Boucle de jeu avec Canvas 2D
• Bibliothèques de physique pour les jeux — exécuter Rapier ou Cannon-es dans un Worker
• Chargement progressif des ressources — décoder les ressources en dehors du thread principal
• Stack technique des jeux web en 2026 — comment les Workers s’intègrent à la stack WebGL/WebGPU/Wasm

Ressources externes

• MDN : API Web Workers — référence complète de l’API
• MDN : utiliser les Web Workers — guide étape par étape
• MDN : objets transférables — transfert de données sans copie
• MDN : SharedArrayBuffer — mémoire partagée entre les threads

WebGL vous donne un accès direct au GPU dans le navigateur. C’est la base des jeux web en 3D, ainsi que des jeux 2D performants. Ce tutoriel couvre les notions essentielles.

1) Obtenir un contexte WebGL

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

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

Privilégiez webgl2 lorsqu’il est disponible : il est largement pris en charge et offre de meilleures fonctionnalités.

2) Le pipeline de rendu (simplifié)

1. Le vertex shader s’exécute une fois par sommet. Il positionne votre géométrie.
2. Le fragment shader s’exécute une fois par pixel. Il colore le résultat.
3. Les tampons contiennent les données (positions, coordonnées UV, couleurs).
4. Les textures sont des images échantillonnées par les shaders.

3) Une paire minimale de shaders

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) Compiler et lier les shaders

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) Créer des tampons

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) Relier les tampons aux shaders

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

7) La boucle de jeu

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) Charger des textures

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) Pièges courants

• Les textures dont les dimensions sont des puissances de deux ne sont pas strictement obligatoires dans WebGL 2, mais les mipmaps fonctionnent mieux avec elles.
• Perte du contexte : gérez les événements webglcontextlost — les navigateurs mobiles libèrent les contextes lorsqu’ils manquent de mémoire.
• Les textures en virgule flottante nécessitent de vérifier la présence d’extensions (EXT_color_buffer_float).

10) Quand utiliser une bibliothèque

WebGL brut est verbeux. Pour la plupart des jeux, envisagez :

• Three.js — solution 3D complète
• PixiJS — rendu 2D rapide
• PlayCanvas — moteur de jeu avec éditeur

Utilisez WebGL brut lorsque vous avez besoin :

• d’un contrôle maximal
• d’un moteur de rendu personnalisé
• de comprendre comment les choses fonctionnent réellement

Une remarque pour 2026 : WebGPU est désormais activé par défaut dans tous les principaux navigateurs (Chrome et Edge depuis la version 113, Firefox 141 sous Windows et 145 sous macOS, ainsi que Safari sur iOS 26, iPadOS 26 et macOS Tahoe 26). Les principes fondamentaux présentés ici restent valables, puisque des bibliothèques comme Three.js utilisent leur moteur de rendu WebGPU avec un repli automatique vers WebGL 2. WebGL 2 demeure donc la référence fiable. Si vous commencez aujourd’hui un nouveau moteur de rendu à partir de zéro, lisez le tutoriel WebGPU en parallèle de celui-ci avant de choisir définitivement une API.

À lire aussi

• WebGPU pour les jeux
• Boucle de jeu avec Canvas 2D
• Publier un jeu web qui se charge rapidement
• Stack technique des jeux web en 2026 — quand choisir WebGL, WebGPU ou Wasm
• Bibliothèques de physique pour les jeux — moteurs physiques dont le rendu passe par WebGL
• Comparatif des moteurs de jeux web — Three.js, PixiJS, PlayCanvas et les autres

Ressources externes

• MDN : API WebGL — référence complète de l’API
• Principes fondamentaux de WebGL2 — série de tutoriels approfondis sur WebGL2
• The Book of Shaders — guide interactif des fragment shaders GLSL
• Documentation de Three.js — le framework WebGL le plus populaire

WebGPU succède à WebGL. Il est de plus bas niveau, plus explicite et conçu pour les GPU modernes. Si vous démarrez un nouveau projet 3D en 2026, WebGPU mérite d'être appris.

Tutoriel WebGPU : 10 projets couvrant toutes les étapes, de la configuration au rendu 3D avec éclairage et animation

1) Vérifier la compatibilité du navigateur

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

En 2026, WebGPU est disponible dans Chrome, Edge, Firefox et Safari.

2) Obtenir un périphérique

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

L'adaptateur représente le GPU physique. Le périphérique constitue votre interface avec celui-ci.

Les deux appels peuvent échouer. requestAdapter() renvoie null lorsque le système ne dispose d'aucun GPU utilisable, et requestDevice() peut rejeter la promesse. Prévoyez donc ces cas avant de poursuivre :

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

L'adaptateur est également consommé dès que vous créez un périphérique à partir de celui-ci. Demandez donc un nouvel adaptateur si vous avez besoin d'un autre périphérique.

3) Configurer le canevas

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

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

4) Écrire des shaders en WGSL

WebGPU utilise WGSL (WebGPU Shading Language), et non 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) Créer un module de shader

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

6) Créer un pipeline de rendu

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

7) Effectuer le rendu d'une image

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) Les tampons dans 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) Groupes de liaison pour les variables uniformes

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

Quand utiliser WebGPU

• Nouveaux projets ciblant les navigateurs modernes
• Charges de travail intensives en calcul (physique, IA, génération procédurale)
• Lorsque vous avez besoin d'un contrôle précis sur les ressources GPU

À lire aussi

• Principes fondamentaux de WebGL
• Web Workers pour la logique de jeu
• Publier un jeu web qui se charge rapidement
• Pile technologique des jeux web en 2026 — cadre de décision pour choisir entre WebGL, WebGPU et Wasm
• COOP/COEP et SharedArrayBuffer — en-têtes requis pour le multithreading Wasm avec les calculs WebGPU

Ressources externes

• Spécification WebGPU — spécification du W3C
• Spécification WGSL — spécification du langage WebGPU Shading Language
• Principes fondamentaux de WebGPU — série de tutoriels approfondis
• Votre première application WebGPU — tutoriel guidé Google Codelab

Créer un jeu multijoueur avec WebSocket : architecture serveur, salons de jeu et synchronisation de l’état

WebSocket permet une communication en temps réel pour les jeux multijoueurs. Ce tutoriel présente les principes fondamentaux côté client.

1) Se connecter à un serveur

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) Concevoir le protocole de messages

Définissez un protocole simple :

// 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) Classe de gestion des connexions

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) Envoyer les commandes du joueur

Envoyez les commandes, pas les positions. Laissez le serveur faire autorité :

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) Recevoir l’état du jeu

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 pour des mouvements fluides

Le serveur envoie des instantanés. Interpolez entre eux :

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) Prédiction côté client

Pour des commandes réactives, effectuez une prédiction locale puis réconciliez-la avec le serveur :

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) Afficher la latence

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) Messages binaires pour plus d’efficacité

Pour les mises à jour à haute fréquence, utilisez le format binaire :

// 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) Exemple de serveur simple (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)
  }
}

À lire aussi

• Publier un jeu web qui se charge rapidement
• Gestion des commandes de jeu
• Web Workers pour la logique de jeu
• COOP/COEP et SharedArrayBuffer — les en-têtes requis pour SharedArrayBuffer dans les contextes multijoueurs
• Conception de jeux coopératifs en 2026 — pourquoi les jeux coopératifs de type « friend slop » explosent et comment le multijoueur dans le navigateur s’intègre à cette tendance
• Game jams et hackathons — les jeux multijoueurs créés lors de jams attirent davantage l’attention

Ressources externes

• MDN : API WebSocket — référence de WebSocket dans le navigateur
• MDN : API WebRTC — connexions pair à pair pour réduire la latence
• MDN : API WebTransport — un protocole de transport HTTP/3 plus récent, devenu compatible avec l’ensemble des navigateurs de référence en mars 2026 lorsque Safari 26.4 a ajouté sa prise en charge (il était déjà disponible dans Chrome 97+, Edge et Firefox 114+). Contrairement à une connexion WebSocket unique basée sur TCP, WebTransport fonctionne sur QUIC et propose des datagrammes non fiables ainsi que plusieurs flux indépendants. Ainsi, la perte d’un paquet ne bloque pas tous les autres par attente en tête de file. Une approche courante consiste à envoyer les mises à jour fréquentes de position par datagrammes, tout en conservant le chat ou les tableaux des scores sur un flux fiable. WebSocket reste le choix le plus compatible et tout ce qui précède reste valable, mais WebTransport mérite désormais d’être envisagé pour les jeux sensibles à la latence.
• Documentation de Socket.IO — bibliothèque populaire servant de surcouche à WebSocket
• Réseau multijoueur de Valve Source — modèles de réseau faisant autorité utilisés dans les jeux en production

WebXR apporte la VR et l’AR au navigateur. Les joueurs peuvent découvrir votre jeu dans un casque sans rien télécharger.

1) Vérifier la prise en charge de WebXR

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

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

2) Démarrer une session VR

let xrSession = null
let xrRefSpace = null

async function startVR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-vr', {
      requiredFeatures: ['local-floor'],
      optionalFeatures: ['hand-tracking'],
    })
    
    xrSession.addEventListener('end', onSessionEnd)
    
    // Configurer le rendu
    const gl = canvas.getContext('webgl2', { xrCompatible: true })
    await xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, gl),
    })
    
    // Obtenir l’espace de référence
    xrRefSpace = await xrSession.requestReferenceSpace('local-floor')
    
    // Démarrer la boucle de rendu
    xrSession.requestAnimationFrame(onXRFrame)
  } catch (err) {
    console.error('Failed to start VR:', err)
  }
}

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

3) La boucle de rendu XR

function onXRFrame(time, frame) {
  const session = frame.session
  session.requestAnimationFrame(onXRFrame)
  
  const pose = frame.getViewerPose(xrRefSpace)
  if (!pose) return
  
  const glLayer = session.renderState.baseLayer
  gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer)
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
  
  // Effectuer le rendu pour chaque œil
  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view)
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height)
    
    // Obtenir les matrices de la caméra
    const viewMatrix = view.transform.inverse.matrix
    const projectionMatrix = view.projectionMatrix
    
    // Effectuer le rendu de la scène avec ces matrices
    renderScene(viewMatrix, projectionMatrix)
  }
}

4) Sources d’entrée (contrôleurs)

xrSession.addEventListener('inputsourceschange', (e) => {
  for (const source of e.added) {
    console.log('Controller added:', source.handedness) // 'left' ou '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
    
    // Gâchette (généralement à l’index 0)
    const triggerPressed = gamepad.buttons[0]?.pressed
    const triggerValue = gamepad.buttons[0]?.value || 0
    
    // Poignée (généralement à l’index 1)
    const gripPressed = gamepad.buttons[1]?.pressed
    
    // Stick analogique
    const thumbstickX = gamepad.axes[2] || 0
    const thumbstickY = gamepad.axes[3] || 0
    
    // Boutons A/B (index 4, 5)
    const buttonA = gamepad.buttons[4]?.pressed
    const buttonB = gamepad.buttons[5]?.pressed
  }
}

Ne supposez pas que chaque appareil possède une manette

Le code ci-dessus lit source.gamepad pour les gâchettes et les sticks analogiques. Cela fonctionne sur les casques avec contrôleurs comme le Meta Quest, mais ne produit aucun effet sur l’Apple Vision Pro (WebXR est activé par défaut dans Safari sous visionOS 2), le Samsung Galaxy XR et les autres appareils Android XR, où le regard et le pincement ou le suivi des mains constituent les principales méthodes d’entrée. Sur ces casques, source.gamepad vaut null et session.inputSources reste vide jusqu’à ce que l’utilisateur effectue réellement un pincement.

Pour la seule interaction garantie par tous les appareils, l’« action principale », écoutez les événements select au lieu d’interroger les boutons. WebXR émet selectstart, select et selectend aussi bien pour la gâchette d’un contrôleur, un pincement de la main ou une interaction par regard et pincement sur Vision Pro. Un seul gestionnaire suffit donc à les prendre tous en charge :

xrSession.addEventListener('selectstart', (e) => {
  // e.inputSource est le contrôleur, la main ou le pincement transitoire
  // e.frame permet de lire la pose de son targetRaySpace
})
xrSession.addEventListener('select', (e) => {
  // action principale terminée (gâchette pressée, pincement relâché sur la cible)
})
xrSession.addEventListener('selectend', (e) => {})

Conservez le code de la manette pour les déplacements au stick analogique et les boutons supplémentaires sur les casques avec contrôleurs, mais conditionnez-le avec if (source.gamepad) et faites passer votre interaction principale de « sélection/saisie/activation » par ces événements afin que le jeu fonctionne toujours sur les appareils pilotés par les mains et le regard.

5) Positions des contrôleurs

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) Lancer de rayons pour le pointage

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) Déplacement par téléportation

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) {
        // Visée
        this.isAiming = true
        const ray = getControllerRay(frame, source)
        this.targetPosition = this.findTeleportTarget(ray)
      } else if (this.isAiming) {
        // Relâchement : téléportation
        if (this.targetPosition) {
          player.position.x = this.targetPosition.x
          player.position.z = this.targetPosition.z
        }
        this.isAiming = false
        this.targetPosition = null
      }
    }
  }
  
  findTeleportTarget(ray) {
    // Calculer l’intersection avec le plan du sol
    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) Déplacement fluide

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
    
    // Appliquer une zone morte
    if (Math.abs(moveX) < 0.1) moveX = 0
    if (Math.abs(moveY) < 0.1) moveY = 0
    
    // Obtenir la direction de la tête pour le déplacement
    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] }
    
    // Normaliser sur le plan XZ
    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) Recommandations pour le confort en VR

// Ajouter une vignette pendant le déplacement pour réduire le mal des transports
function renderComfortVignette(movementSpeed) {
  const intensity = Math.min(movementSpeed / 5, 0.5)
  if (intensity < 0.1) return
  
  // Afficher des bords sombres dont l’intensité augmente avec la vitesse
  renderVignette(intensity)
}

// Rotation par paliers
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 degrés
    player.rotation += angle
    snapTurnCooldown = 0.3 // Empêcher les rotations trop rapides
  }
}

10) Configuration WebXR complète

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
    
    // Mettre à jour la logique du jeu
    this.teleport.update(frame, this.session.inputSources)
    
    // Effectuer le rendu
    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) {
    // Votre code de rendu ici
  }
  
  onEnd() {
    this.session = null
  }
}

À lire aussi

• Principes fondamentaux de WebGL
• Premiers pas avec WebGPU
• Gestion des entrées de jeu
• Stack technique des jeux web en 2026 — la place de WebXR dans l’écosystème technologique au sens large
• Three.js + USDC dans le navigateur — charger des ressources 3D pour les scènes XR

Ressources externes

• MDN : API WebXR Device — référence complète de l’API
• Immersive Web — exemples WebXR, outils et tableaux de compatibilité des navigateurs
• Guide WebXR de Three.js — créer du contenu VR avec Three.js