Tutoriels

S’abonner via RSS

Des guides pratiques pour créer des jeux web. Chaque tutoriel est autonome et contient du code prêt à copier-coller.

Bien démarrer

Principes fondamentaux d’une boucle de jeu Canvas 2D Créez une boucle de jeu indépendante de la fréquence d’images avec requestAnimationFrame, le temps delta et un pas de temps fixe, ainsi que des sprites, des collisions et une caméra. Lire la suite →

Principes fondamentaux de WebGL pour les développeurs de jeux Découvrez WebGL 2 sans abstraction en dessinant votre premier triangle avec des shaders GLSL, des tampons, des textures et une boucle de rendu. Lire la suite →

Bien démarrer avec WebGPU Configurez un périphérique WebGPU et le canevas, écrivez des shaders WGSL et affichez votre premier triangle avec l’API GPU moderne. Lire la suite →

Physique

Physique pour les jeux web Comparez Rapier, Cannon-es, Ammo.js, Matter.js et d’autres bibliothèques à l’aide de code concret afin de choisir le moteur physique adapté à votre jeu. Lire la suite →

Entrées et commandes

Gestion des entrées de jeu (clavier, souris, tactile, manette) Regroupez le clavier, la souris, le tactile et la manette dans un même objet d’état des entrées, lu à chaque image par votre boucle de jeu. Lire la suite →

API Gamepad pour les jeux web Ajoutez une prise en charge des manettes digne d’une console avec l’attribution des boutons, les zones mortes analogiques, les vibrations et le multijoueur local jusqu’à quatre joueurs. Lire la suite →

Pointer Lock pour les jeux FPS Capturez la souris pour obtenir une visée fluide dans un FPS, puis créez une caméra avec lacet et tangage, des déplacements ZQSD et une visée brute sans accélération. Lire la suite →

Graphismes et rendu

Canevas de jeu adaptatif Redimensionnez nettement votre canevas sur les écrans Retina avec devicePixelRatio, des bandes d’encadrement, une mise à l’échelle entière du pixel art et une gestion fluide du redimensionnement. Lire la suite →

Rendu du pixel art Éliminez le flou grâce à une mise à l’échelle entière et à la désactivation du lissage, puis créez des animations de sprites, des changements de palette, des cartes de tuiles et des secousses d’écran. Lire la suite →

Rendu du texte dans les jeux Affichez du texte net avec le remplissage Canvas, des polices bitmap et SDF, ainsi que des boîtes de dialogue à effet machine à écrire et des nombres de dégâts flottants. Lire la suite →

Audio

API Web Audio pour les jeux Intégrez l’API Web Audio au son de votre jeu avec un gestionnaire audio réutilisable, de la musique en boucle, une spatialisation 3D et un pool de sons. Lire la suite →

Tone.js pour l’audio des jeux Générez des effets sonores et de la musique réactive avec les synthétiseurs Tone.js afin de vous passer de fichiers audio et de varier chaque lecture. Lire la suite →

Données et stockage

Sauvegarder et charger avec IndexedDB Stockez les emplacements de sauvegarde, les paramètres et les ressources binaires dans IndexedDB grâce à des modèles asynchrones, à la sauvegarde automatique et à un stockage persistant résistant à l’éviction. Lire la suite →

Chargement progressif des ressources Chargez les ressources du jeu par niveaux de priorité avec de véritables barres de progression, une file d’attente simultanée et une mise en cache IndexedDB pour permettre aux joueurs de commencer rapidement. Lire la suite →

Performances et optimisation

Publier un jeu web qui se charge rapidement Une liste de contrôle pratique couvrant les budgets de chargement, la compression Brotli et Zstandard, les textures KTX2, le découpage du code et la mise en cache. Lire la suite →

Web Workers pour la logique de jeu Exécutez la physique, la recherche de chemin A* et la génération procédurale dans un thread d’arrière-plan à l’aide de pools de workers, d’objets transférables et d’OffscreenCanvas. Lire la suite →

Activer les threads Wasm (SharedArrayBuffer) Définissez les en-têtes COOP et COEP qui activent l’isolation interorigine afin que SharedArrayBuffer et les threads Wasm fonctionnent réellement. Lire la suite →

Réseau

Principes fondamentaux du multijoueur avec WebSocket Mettez en place un mode multijoueur en temps réel avec reconnexions, prédiction côté client, interpolation des instantanés et messages binaires transitant par un serveur faisant autorité. Lire la suite →

Mobile et plateformes

Jeux web adaptés aux appareils mobiles Ajoutez des commandes tactiles, un joystick virtuel, la gestion de la fenêtre d’affichage et de l’orientation, ainsi que des performances tenant compte de la batterie pour offrir une excellente expérience sur téléphone. Lire la suite →

PWA pour les jeux hors ligne Rendez votre jeu installable et jouable hors ligne grâce à un manifeste, à la mise en cache par service worker, aux invites de mise à jour et à la synchronisation des scores en arrière-plan. Lire la suite →

Service workers pour la mise en cache des jeux Mettez en cache les ressources du jeu avec les stratégies cache-first, network-first et stale-while-revalidate, ainsi qu’avec la gestion des versions et les requêtes par plages pour l’audio. Lire la suite →

Bonnes pratiques d’intégration dans une iframe Intégrez proprement votre jeu dans des iframes avec les autorisations appropriées, postMessage vers la page parente, le plein écran, des correctifs de focus et les SDK des plateformes. Lire la suite →

VR/XR

Principes fondamentaux de WebXR pour les jeux en VR Configurez une session VR WebXR, effectuez le rendu pour chaque œil, lisez les entrées des contrôleurs et ajoutez une locomotion par téléportation ou fluide compatible avec les casques contrôlés par les mains ou le regard. Lire la suite →

Analyses et surveillance

Analyses pour les jeux web Créez un outil de suivi des événements par lots pour les sessions, les entonnoirs de niveaux, les FPS, les erreurs, les tests A/B et la confidentialité soumise au consentement. Lire la suite →

Outils et flux de travail

Outils de programmation basés sur des agents d’IA Comparez Claude Code, Cursor et Copilot, puis découvrez les flux de travail en mode planification, les étapes d’approbation et les prompts qui permettent aux agents de modifier et de tester du code réel. Lire la suite →