CATALOGUE
Code & Data
Formation
JavaScript
Apprendre JavaScript ES6 - Les fondamentaux
Création d'un morpion interactif en JavaScript
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
69,90€
Paiement unique • Accès à vie
Acheter cette formation
Formation incluse dans l'abonnement Elephorm
Je m'abonne à Elephorm
Introduction au deuxième TP
Objectifs
À la fin de ce tutoriel, vous serez capable de :
- Créer et manipuler une grille de jeu en HTML5.
- Gérer les interactions utilisateur avec les événements de clic.
- Utiliser JavaScript pour modifier dynamiquement des éléments HTML.
- Implémenter des algorithmes simples pour vérifier les conditions de victoire dans un jeu.
Résumé
Apprenez à développer un jeu de morpion (tic-tac-toe) simple et interactif en JavaScript et HTML5. Ce tutoriel couvre la mise en place d'un plateau de jeu, la gestion des clics de la souris, et la vérification des lignes et colonnes pour déterminer le gagnant.
Description
Ce tutoriel vous guide à travers la création d'un jeu de morpion simple et interactif en JavaScript et HTML5. Vous allez :
- Mise en place de l'interface utilisateur avec une grille de 3x3.
- Gestion des événements de clic pour changer la couleur des cellules en fonction du joueur courant.
- Vérification de l'alignement des lignes et des colonnes pour déterminer le gagnant.
- Implémentation d'une fonction de nettoyage du plateau de jeu pour redémarrer une nouvelle partie.
- Exploration de fonctions avancées pour vérifier les diagonales du plateau de jeu.
A la fin de ce TP, vous aurez une compréhension avancée des manipulations du DOM, de la gestion des événements, et de l'utilisation des attributs de données pour la mise en forme dynamique à l'aide de CSS.
Questions fréquentes
Questions réponses
Comment initialiser un plateau de jeu en HTML5 et JavaScript ?
Utilisez une div pour contenir le plateau, puis créez dynamiquement des éléments HTML pour chaque case du plateau en utilisant JavaScript.
Comment gérer les clics sur les cases du morpion ?
Ajoutez des 'event listeners' aux cases. Lorsque l'utilisateur clique, changez la couleur de la case et mettez à jour l'état du plateau en fonction du joueur courant.
Comment vérifier si un joueur a gagné en alignant trois cases ?
Créez une fonction pour vérifier les lignes, les colonnes et éventuellement les diagonales du plateau. Si trois états consécutifs sont identiques (et non nuls), le joueur a gagné.
Programme détaillé
Module 1 - Introduction
À propos de la formation
00:38
Pré-requis
00:44
Module 2 - Apprendre à coder
Hello world
08:16
Les variables
05:47
Les conditions
09:22
Les boucles
07:52
Les fonctions
05:28
Les tableaux
05:29
Les objets
03:47
Module 3 - Concepts avancés
La librairie standard
20:15
Les prototypes
02:41
Les itérateurs
10:58
La gestion des erreurs
06:03
La récursivité
04:22
Module 4 - Travailler avec le JavaScript
Module 5 - JavaScript ES6
Ce qu'on connait déjà
03:40
Les templates strings
01:47
Le destructuring
06:49
Le spread opérateur
08:04
La gestion des modules
02:47
Module 6 - Le JavaScript est asynchrone
Module 7 - Utiliser JavaScript dans une page web - Partie 1
Module 8 - Utiliser JavaScript dans une page web - Partie 2
Utiliser l'AJAX
06:46
Module 9 - Travaux pratiques
11 commentaires
3,8
11 votes
5
4
3
2
1
Formation ajoutée au panier
Apprendre JavaScript ES6 - Les fondamentaux
Formateur expert
Accès sur tous vos appareils
Fichiers de travail téléchargeables
Si vous êtes novices, vous pourrez rentrer rapidement dans le monde du js.
Formation faite pour revenir dessus après avoir suivi une "réelle" formation sur les bases de Javascript.