Viens, on recrée le jeu Mario en JavaScript de A à Z

Oublie les To-Do lists. Oublie les applications météo. Oublie tout ce que tu pensais être un "projet JavaScript avancé". Aujourd'hui, on ne va pas juste coder une application. On va ressusciter une légende. On va recréer, de A à Z, un clone fonctionnel du jeu qui a défini des générations de joueurs : Super Mario Bros.

Oui, oui, vous avez bien lu ! Pas besoin de frameworks compliqués ou de moteurs de jeu hors de prix. On va tout faire avec la sainte trinité du web : du HTML, du CSS et du JavaScript pur. L'idée, c'est de comprendre ce qui se passe sous le capot : la physique du jeu, les collisions, les animations, et comment le joueur contrôle tout ça. Ce n'est pas un tuto classique, c'est une vraie aventure de développeur ! On va tout démonter pour mieux tout remonter. Après ça, votre vision du code ne sera plus jamais la même.

Attention : Accrochez-vous bien ! On va plonger dans les détails de la logique et de l'architecture du jeu. Le but, c'est que vous ayez une compréhension tellement claire que le code vous paraîtra super simple après.

L'Architecture : le plan de bataille

Pour refaire un jeu comme Mario, on ne peut pas y aller au feeling. Il faut un plan, une structure, une vision claire de ce qu'on veut construire. Notre jeu sera bâti sur quelques fondations solides, mais cette fois, avec des divs !

1. La scène (HTML & CSS) : Notre jeu a besoin d'une scène, un grand conteneur pour tout. On va utiliser un div principal comme toile de fond. Les autres divs représenteront les plateformes, les briques, les ennemis et notre joueur. Le CSS s'occupera de leur donner une forme, une taille et de les positionner proprement.
2. Le cœur du jeu (La boucle de jeu en JS) : Un jeu, ça bouge ! C'est la "Game Loop" qui est responsable de ça. C'est une fonction qui tourne en boucle, super vite, et qui met à jour la position de chaque div à l'écran. C'est le métronome du jeu.
3. La physique (Mouvement & Gravité en JS) : On va faire bouger notre joueur en manipulant les propriétés CSS de sa div ! On changera sa position ( top et left) en fonction de sa vélocité. Et pour la gravité, on augmentera simplement la vélocité verticale à chaque tour de boucle, pour que Mario retombe après un saut.
4. Les collisions (Détection en JS) : C'est la partie la plus difficile. On va vérifier en permanence si la "boîte" de notre joueur ( div) touche celle des autres objets ( div). Chaque fois que les rectangles se chevauchent, c'est une collision ! On gérera ça pour les plateformes, les ennemis, et les obstacles.
5. Les commandes (Gestion des entrées en JS) : Un jeu sans commandes, c'est pas un jeu ! On va mettre en place un système simple pour écouter les touches du clavier (les flèches pour bouger, et la barre d'espace pour sauter) et les transformer en actions pour notre personnage. Pour sauter, c'est la barre d'espace, retenez-le bien !

---

La logique : comment ça marche ?

Maintenant qu'on a le plan, regardons chaque partie de plus près. C'est là que ça devient vraiment intéressant !

1. Les éléments du jeu

Au lieu de dessiner sur un canvas, on va utiliser des divs pour tous les éléments du jeu : le joueur, les plateformes, les ennemis, les briques, et même l'affichage du score ! Chaque div aura son propre style CSS pour avoir la bonne taille et le bon look. En JavaScript, on va manipuler ces divs en changeant leurs propriétés CSS pour les faire bouger.

2. Le Joueur, les obstacles et les points !

Mario, ce n'est pas juste une image. En code, c'est un objet lié à une div. Un objet Player qui a plein de propriétés pour dire où il est, ce qu'il fait, etc. :

• Sa position ( x et y) et sa vélocité ( x et y).
• Ses dimensions (largeur et hauteur) pour sa "hitbox".
• Un système de points que l'on incrémentera quand il écrase un ennemi.

C'est dans la boucle de jeu qu'on va tout gérer. Par exemple, si la "hitbox" de Mario touche un ennemi par le dessus, on gagne des points. Mais si la collision se fait par le côté, c'est "Game Over" ! Et bien sûr, si la position verticale de Mario est trop basse, cela veut dire qu'il est tombé dans un trou et là aussi, c'est perdu !

3. Le moteur physique simplifié

C'est là que la boucle de jeu est primordiale. À chaque "frame", on applique les lois de notre petit monde à notre joueur :

1. On met à jour la position verticale du joueur en fonction de sa vélocité : player.position.y += player.velocity.y.
2. On applique la gravité, une force qui tire le joueur vers le bas en augmentant sa vélocité verticale à chaque frame : player.velocity.y += gravity.

Quand Mario saute, on lui donne juste une impulsion vers le haut. La gravité s'occupe du reste : le faire ralentir, s'arrêter, puis retomber. C'est simple et super efficace !

---

Captures d'écran du projet

Pour vous donner une idée de ce que ça donne, voici quelques captures d'écran du jeu en action !

---

Le Code source

Comme vous l'avez vu, construire un jeu comme ça, c'est un travail de dingue. Chaque petit détail, de la physique aux collisions, c'est un projet en soi. C'est hyper formateur, mais aussi très exigeant. Du coup, c'est important de remercier ceux qui nous montrent la voie. Un développeur super doué, connu sous le pseudo de @florian, a passé un temps fou à créer un clone de Mario ultra fidèle et qui marche nickel, en utilisant exactement les principes qu'on vient de voir. Son travail est une vraie mine d'or pour apprendre le développement de jeux en JavaScript.

Le Code Complet. Pour rendre hommage à ce travail et pour que vous puissiez vous y plonger directement, je ne vais pas vous laisser avec des morceaux de code éparpillés.

Vous pouvez télécharger l'intégralité du projet, avec tous les fichiers et le code complet, dans un seul fichier ZIP. C'est l'occasion de voir comment toute cette théorie se transforme en un jeu qui fonctionne !