Dans les coulisses : la création de Mario.Game Adventure

Mario.Game Adventure tient dans un seul fichier JavaScript, sans moteur de jeu, sans fichiers image et sans fichiers audio. Voici comment le jeu a pris forme.

Du pixel art dessiné en code

Chaque sprite — le héros en petite et grande forme, les Walkers, les Koopas, les Spinies, les Plantes Piranha, le boss, les blocs, les nuages et les châteaux — est décrit dans le code source sous forme de lignes de lettres de couleur, ou dessiné avec de petites routines de formes. Au démarrage, le jeu les peint une seule fois sur des canvas hors écran, puis les copie à l'écran à chaque image. Chaque monde a sa propre palette : les mêmes briques deviennent bleues sous terre, glacées la nuit et grises dans le château.

Une physique aux sensations classiques

Dans un jeu de plateforme, tout se joue sur les déplacements. Le héros a des vitesses de marche et de course distinctes, de l'accélération et de la décélération, un dérapage marqué quand on change de direction, et une hauteur de saut variable : la gravité est plus faible tant que vous maintenez le saut et que vous montez encore. Nous avons ajusté les valeurs jusqu'à ce qu'un saut en courant franchisse sans souci des trous de trois cases, contrairement à un saut en marchant — la course devient ainsi une technique qui vaut la peine d'être apprise. Consultez le guide des déplacements pour plus de détails.

Huit niveaux, quatre thèmes

Chaque monde introduit une idée principale :

1. Monde 1 — les bases : tuyaux, gouffres, bonus, puis une grotte au plafond bas.
2. Monde 2 — des Spinies sur lesquels on ne peut pas sauter, et les premières plateformes mobiles dans les nuages.
3. Monde 3 — un niveau de nuit mélangeant tout, puis des cimes d'arbres au-dessus d'un vide sans fond.
4. Monde 4 — des routes de forteresse bondées, puis un château avec des barres de feu, de la lave et un boss.

Un bot qui joue chaque niveau

Pour être sûrs que chaque niveau peut être terminé, nous avons écrit un bot de test qui parcourt chaque niveau avec l'invincibilité activée, en sautant devant les murs et les trous. Quand il restait coincé, nous examinions l'endroit : plusieurs fois, il a révélé un saut trop haut d'un pixel ou un bloc inatteignable, et nous avons corrigé le niveau. Associée à une vérification de la hauteur de saut pour chaque bloc, cette méthode a permis de repérer tous les endroits inaccessibles que nous avons pu trouver.

De la musique avec Web Audio

La bande-son est générée en direct par un minuscule séquenceur qui utilise l'API Web Audio du navigateur : des ondes carrées et triangulaires pour la mélodie et la basse, du bruit pour la batterie. Chaque monde a son propre thème original, ainsi que des jingles pour les bonus, le drapeau, le game over et le final. Quand le chrono descend à 100, le tempo s'accélère — exactement comme on s'y attend.

À vous de jouer

Jouez à Mario.Game Adventure, ou rendez-vous directement à notre solution complète si vous êtes bloqué.