Mini-jeu : Les Honteux de Barbegarde

Contexte du projet

Ce projet est né d’un exercice proposé lors de ma formation de Développeur web et web mobile en 2022. L’objectif initial était de créer un mini-jeu en JavaScript Vanilla basé sur le principe du “chifoumi” (pierre-papier-ciseaux). Enthousiasmé par ce concept, j’ai décidé de pousser cet exercice un peu plus loin en ajoutant des fonctionnalités supplémentaires, tout en intégrant le jeu dans l’univers de « Les honteux de Barbegarde », un monde que j’ai imaginé.

Après ma formation, j’ai eu envie de reprendre ce projet de zéro pour consolider mes compétences en JavaScript, ajouter des fonctionnalités et explorer de nouvelles façons d’organiser le code.

Gallerie

Fonctionnalités

• Sélection de personnage : Choix parmi une liste de 6 personnages principaux et 4 personnages spéciaux, obtenus aléatoirement au cours de la partie.
• Événements aléatoires : Possibilité d’événements imprévus influençant le score de l’utilisateur pendant la partie.
• Gestion des scores : Enregistrement automatique du score de l’utilisateur, avec option de réinitialisation.
• Mode triche : Accès à un onglet secret pour tricher, déblocable avec un mot de passe.
• Détails des personnages : Page dédiée à la présentation de chaque personnage du jeu, avec leurs caractéristiques.

---

Stack technique

Le jeu, initialement conçu en JavaScript, a été reconstruit sans frameworks ni bibliothèques externes. J’ai choisi d’utiliser exclusivement JavaScript Vanilla pour renforcer mes compétences de base en manipulation d’objets et en compréhension du langage.

Pour la partie graphique, j’ai introduit le préprocesseur SASS. Ce choix m’a permis de structurer et d’organiser les styles du projet de manière modulaire, tout en découvrant l’écosystème de développement front-end. L’installation de SASS m’a amené à m’intéresser à NPM et à utiliser Vite pour simplifier le développement en local et optimiser le projet pour la production.

Pour rendre le code plus maintenable, j’ai stocké les informations des personnages dans un fichier JSON. Le recours a une base de données n’étant pas justifié ici, cela me permet au moins de gérer facilement les mises à jour des données sans toucher directement au code JavaScript.

Enfin, j’ai hébergé le jeu sur Vercel pour une mise en ligne rapide et efficace.

---

Organisation du code

Étant un projet assez ancien, son organisation ne suit pas nécessairement les meilleures pratiques actuelles. Malgré cela, j’avais pris soin de séparer les responsabilités en plusieurs fichiers JavaScript pour faciliter la gestion et la lisibilité du code, bien que je manquais encore de connaissances approfondies sur les modules à l’époque.

Dans le sous-dossier js, situé dans assets à l’intérieur du répertoire public, on retrouve les fichiers suivants :

Nom du fichier JS	Responsabilité
Card	Gère l'affichage des informations sur les personnages.
Constants	Contient les informations du jeu.
Event	Gère le comportement du jeu lors de la survenue d'un évènement dans la partie.
Game	Gère les fonctionnalités de base du jeu.
LocalStorage	Gère le stockage des scores de l'utilisateur dans le local storage.
Special	Gère le comportement du jeu pour les cas d'utilisation de personnages spéciaux.
Script	Gère les intéractions de base sur le site.

---

Développement

Dans ce projet, l’absence de base de données m’a conduit à chercher une solution alternative pour stocker les scores des utilisateurs et les conserver même après la fermeture du navigateur. J’ai donc opté pour le local storage, une API simple et efficace qui permet de sauvegarder des données localement dans le navigateur.

Le local storage ne stockant que des chaînes de caractères, il est nécessaire de convertir les objets en JSON pour les manipuler correctement. Voici un exemple de la structure de données que j’ai utilisée pour enregistrer l’état du jeu :

const saves = {
    games: { matches: 0, victories: 0, defeats: 0, equalities: 0 },
    rounds: { rounds: 0, success: 0, fail: 0, equal: 0 },
    scores: { user: 0, ia: 0 },
    lastCharacters: { user: null, ia: null },
    userSpecialCharacters: [false, false, false, false],
    iaSpecialCharacters: [false, false, false, false],
    permission: { user: 0, ia: 0 },
    event: false
};

Cet objet contient toutes les informations nécessaires pour suivre la progression du joueur, ainsi que l’état des manches et des personnages. À chaque manche, cet objet est mis à jour, puis sauvegardé dans le local storage afin de préserver la progression.

Pour restaurer l’état du jeu à chaque chargement de la page ou initialiser un nouvel environnement pour un nouveau joueur, j’utilise la ligne de code suivante :

let games = localStorage.getItem('games') ? JSON.parse(localStorage.getItem('games')) : saves;

Cela permet de vérifier si des données sont déjà stockées dans le local storage. Si c’est le cas, elles sont récupérées et converties en objet JavaScript à l’aide de JSON.parse(). Sinon, un nouvel environnement est créé avec l’objet saves. Cette méthode assure que la partie peut être reprise là où elle s’était arrêtée.

Enfin, pour sauvegarder les données mises à jour, il suffit de reconvertir l’objet en chaîne de caractères avec JSON.stringify() avant de les réenregistrer dans le local storage :

const saveToLocalStorage = () => {

    let updateGames = JSON.stringify(games);

    localStorage.setItem('games', updateGames);

    displayGameStat();
};

Cette méthode garantit que toutes les données sont correctement enregistrées à chaque mise à jour du jeu, permettant ainsi une gestion fluide de la progression du joueur.