En partant d'une feuille blanche, ce tuto vidéo va vous montrer comment réaliser un jeu de Memory en utilisant les langages et standards HTML5, CSS3, JavaScript et jQuery. Le tout en 30 minutes chrono ! Au fil des neuf étapes nécessaires au développement du jeu, vous apprendrez de nombreuses choses.
Entre autres :
- Vous saurez comment mettre en place un squelette standard en HTML5/CSS3 ;
- Vous apprendrez à utiliser un générateur pseudo-aléatoire en JavaScript pour mélanger des cartes ;
- Vous verrez comment manipuler le DOM pour y insérer des objets, modifier leur comportement et les mettre à jour pendant la partie ;
- Vous verrez comment ajouter de l'interactivité au jeu en capturant les événements souris en JavaScript ;
- Vous apprendrez à améliorer la présentation du jeu en utilisant du code CSS3 ;
- Vous saurez comment insérer des sons dans un document HTML5 et comment les jouer en jQuery.
Trente minutes pour créer votre premier jeu ! Qu'en dites-vous ?
Table des matières de cette formation HTML (durée : 29m08s)
- Introduction aux vidéos qui vont suivre
- Création du squelette HTML5
- Tirage aléatoire des cartes
- Affichage des cartes
- Ajout de l’interactivité
- Mise en forme de la page
- Détection des cartes appariées
- Interdiction de retourner plus de deux cartes
- Ajout de sons pour réagir au jeu
- Détection du nombre de coups joués et du temps en fin de partie
Tuto - Votre premier jeu en HTML5, CSS3, JavaScript et jQuery (5 euros)
Pour aller plus loin :
