Pour cet exercice nous allons créer une “map” de blocs basée sur le premier jeu Super Mario Bros du Nintendo qui popularisa plusieurs principes majeurs du jeux vidéo, tel que le défilement horizontal, les boss et les raccourcis secrets 🧱.
Aperçu du résultat 👇
Matériel
Pen de départ
Plusieurs rafraichissements de page sont visibles dans cet aperçu ☝️.
Vous n’avez qu’à écrire du JavaScript (nul besoin de modifier le HTML ou le CSS).
Requis
Créez une classe JavaScript intitulée "Block". Pour l'instant, n'instancier qu'un seul élément à partir de cette classe.
Lorsque la classe est appelée, pigez un numéro de 0 à 5 et sauvegardez-le dans l'instance de votre nouvel objet. Ce numéro correspond à la texture attribuée à votre bloc (bloc ciel, bloc brique, bloc ?, pièce de monnaie).
Créez-vous un div et ajoutez-lui les classes "block" et "noX" (X équivaut au numéro de texture que vous avez pigé précédemment, ex: no3). L'apparence du div sera gérée en CSS en fonction de ces classes.
Insérez-le div que vous venez de créer dans l'élément avec la classe .level.
Lorsque les étapes précédentes fonctionnent comme désiré (un bloc devrait être visible).
À l'extérieur de la définition de la classe, ajoutez un écouteur de l'événement clique sur le document entier.
À l'intérieur de cet écouteur d'événement, videz le contenu de div.level
Créez ensuite une boucle de 0 à 100 créant une nouvelle instance de votre classe à chaque itération.
Ainsi, lorsque vous cliquerez sur le document, une nouvelle configuration de 100 bloc Mario Bros sera affichée, remplaçant la précédente..
La boucle doit vivre à l’extérieur de la classe puisqu’elle instancie plusieurs élément basé sur la classe en question.
Notes de cours 📚
ClassList
Objet Math
Manipulation de contenu du DOM en JS
Boucle for