Objectifs
- Comprendre les principales étapes de conception d’un jeu vidéo.
- Structurer une application interactive en JavaScript.
- Mettre en place une boucle de jeu et un système de rendu graphique.
- Gérer les interactions, les animations, les collisions et les médias.
- Concevoir des niveaux et intégrer des algorithmes adaptés aux mécaniques du jeu.
Compétences visées
- Développer un jeu vidéo 2D avec JavaScript et Canvas.
- Concevoir une architecture séparant les données, les calculs et le rendu.
- Créer une boucle de jeu performante avec requestAnimationFrame.
- Gérer les entrées utilisateur, les collisions, les sprites et les animations.
- Structurer des niveaux et stocker leurs données au format JSON.
- Mettre en œuvre des algorithmes de déplacement et de génération simples.
Pré-requis
Maîtriser JavaScript, les fonctions, les objets, les événements et les principales structures de contrôle. Avoir suivi la formation JavaScript avancé : programmation orientée objet ou disposer d’un niveau équivalent.
Quel profil ?
Cette formation s’adresse aux développeurs JavaScript, développeurs front-end et à toute personne souhaitant découvrir la conception de jeux vidéo et d’applications interactives dans le navigateur.
Formations associées
Au programme de la formation
Concevoir des applications et des jeux vidéo en JavaScript
Introduction au développement de jeux vidéo Web
- Histoire et évolution du jeu vidéo sur navigateur
- Les différents genres de jeux vidéo 2D
- Les étapes de conception d'un jeu
- Choisir les bonnes technologies
- Les APIs modernes du navigateur
- Le moteur JavaScript et son environnement d'exécution
Concevoir un projet de jeu
- Analyser les besoins et les mécaniques de jeu
- Structurer un projet avant de coder
- Décomposer un problème en algorithmes
- Organiser les ressources du projet
- Choisir une architecture adaptée
Les technologies du navigateur
- HTML et CSS au service du jeu
- Le DOM et les APIs du navigateur
- Canvas 2D et SVG
- Audio et vidéo
- JSON et stockage des données
- Communication avec un serveur via Fetch
- Les outils de développement et de débogage
Développer un moteur de jeu en JavaScript
- Organisation du code avec ES6
- Classes et modules JavaScript
- Programmation orientée objet
- Créer une boucle de jeu avec
requestAnimationFrame() - Gérer le temps et les animations
- Traiter les entrées clavier, souris et tactiles
- Structurer les données du jeu
Architecture d'un moteur 2D
- Séparer le rendu, les calculs et les données
- Créer un système de scènes
- Développer une interface utilisateur (HUD)
- Charger les ressources du jeu
- Gérer les sprites et les feuilles de sprites
- Créer des bibliothèques réutilisables
Enrichir le jeu
- Ajouter des animations
- Créer un système sonore
- Gérer les effets visuels
- Créer des menus et écrans d'introduction
- Enregistrer les scores et les sauvegardes
- Introduction à l'intelligence artificielle
- Introduction à la physique 2D
Concevoir les niveaux
- Créer des cartes et des niveaux
- Notions de level design
- Utiliser des cartes au format JSON
- Développer un éditeur de niveaux simple
- Charger dynamiquement les cartes
Les principaux rendus 2D
- Vue de dessus (Top Down)
- Vue aérienne (Bird's Eye)
- Vue de profil
- Vue isométrique
- Effet Mode 7
- Introduction au raycasting (2.5D)
Les algorithmes incontournables
- Grilles et systèmes de tuiles
- Scrolling
- Détection des collisions
- Pathfinding (A*)
- Flood Fill
- Systèmes de particules
- Génération procédurale de labyrinthes
- Génération de cavernes
- Génération de donjons
Étude de moteurs simples
- Quiz interactif
- Pong
- Taquin
- Memory
- Tic-Tac-Toe
- Snake
- Doodle Jump
- Frogger
- Démineur
Étude de moteurs intermédiaires
- Tetris
- Asteroids
- Space Invaders
- Pac-Man
- Bejeweled
- Blackjack
- Jeu de course 2D
Étude de moteurs avancés
- Jeu de plateforme avec tuiles et scrolling
- Moteur de rendu par raycasting (FPS 2.5D)
- Analyse de l'architecture et des algorithmes utilisés
Projet de fin de formation
- Concevoir un mini-jeu complet
- Mettre en œuvre un moteur 2D
- Intégrer sprites, sons et animations
- Créer plusieurs niveaux
- Structurer le code et préparer son évolution
Comment se déroule la formation ?
Chaque notion est abordée de manière concrète, puis appliquée à travers des exercices et des cas pratiques. Les groupes sont limités à 8 participants pour favoriser les échanges et permettre un accompagnement adapté à chacun.
Un support pédagogique est remis à l'issue de la formation pour retrouver facilement les notions abordées.
Comment les acquis sont-ils évalués ?
En fin de parcours, une évaluation permet de mesurer l'atteinte des objectifs pédagogiques. Selon la formation, elle peut prendre la forme d'un questionnaire, d'un exercice pratique ou d'une certification.
Le suivi est formalisé par une feuille d'émargement et une évaluation des compétences.
Autres formations de la même catégorie
Apprenez les fondamentaux du HTML5 et du CSS3 afin de créer des pages Web modernes, structurées, responsives et conformes aux standards du Web.
Approfondissez votre maîtrise du HTML5, du CSS3 et de JavaScript afin de concevoir des interfaces Web modernes, responsives et interactives.
Apprenez les fondamentaux de JavaScript afin de créer des pages Web interactives, manipuler le DOM et développer vos premières fonctionnalités côté client.
Approfondissez votre maîtrise de JavaScript en découvrant la programmation orientée objet, les design patterns et les techniques utilisées dans le développement d’applications Web modernes.
Apprenez à concevoir des interfaces Web responsives, ergonomiques et adaptées aux usages actuels sur ordinateur, tablette et smartphone.
Apprenez les fondamentaux de PHP et MySQL pour créer des sites Web dynamiques, traiter des formulaires et exploiter une base de données.
Approfondissez votre maîtrise de PHP et MySQL afin de développer des applications Web plus robustes, maintenables et évolutives.
Apprenez à développer un thème WordPress personnalisé en exploitant le système de templates, les contenus dynamiques, les Custom Post Types et les champs personnalisés.
Apprenez à intégrer une maquette HTML/CSS dans WordPress et à concevoir un thème personnalisé conforme aux standards du Web et à l’architecture du CMS.
Apprenez à développer des plugins WordPress sur mesure afin d’ajouter des fonctionnalités fiables, sécurisées et adaptées aux besoins d’un projet.
