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

Requis

  1. Créez une classe JavaScript intitulée "Block". Pour l'instant, n'instancier qu'un seul élément à partir de cette classe.

  2. 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 (brique, boite ?, pièce de monnaie, etc.).

  3. 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.

  4. Insérez-le div que vous venez de créer dans l'élément avec la classe .level.

  5. Lorsque les étapes précédentes fonctionnent comme désiré (un bloc devrait être visible), créez-vous une boucle de 0 à 100 créant une nouvelle instance de votre classe à chaque itération.