Détails

Contexte

Durant mon année de formation de Graduate, une évaluation d'entraînement m'a été soumise dans le cadre du module "Dynamiser vos sites web avec Javascript".
Cette épreuve avait pour objectif de tester mes compétences en développement web, plus particulièrement sur la réalisation d'une interface utilisateur dynamique.
L'évaluation portait sur des situations professionnelles concrètes, et visait à aborder les compétences suivantes selon le référentiel de certification :

• Réaliser une interface utilisateur web statique et adaptable
• Développer une interface utilisateur web dynamique

Le livrable attendu était la création d'un petit jeu sur navigateur web à l’aide du DOM.

Projet

L'objectif de ce projet était de réaliser un jeu de dés fonctionnel pour deux joueurs, avec une interface claire et conforme à la maquette fournie.
Plusieurs fonctionnalités étaient requises pour la partie front-end :

• La possibilité de créer une nouvelle partie
• La gestion du score courant pour chaque joueur
• La possibilité de lancer le dé
• Un mode multijoueur avec deux joueurs

Le jeu devait respecter les règles suivantes :

• Chaque joueur possède un score temporaire (ROUND) et un score global (GLOBAL).
• À chaque tour, le joueur peut lancer un dé autant de fois qu'il le souhaite, et le résultat du lancer est ajouté à son score ROUND.
• Le joueur peut décider de "Hold" (retenir ses points), ce qui transfère les points du ROUND vers le GLOBAL et passe le tour à l'autre joueur.
• Si le joueur obtient un 1 lors du lancer de dé, son ROUND est perdu et son tour se termine.
• Le premier joueur à atteindre 100 points dans son score GLOBAL remporte la partie.

Le projet devait être structuré et fonctionnel, et plusieurs contraintes techniques étaient imposées, comme l'utilisation de la police Lato et d'un Framework CSS adaptatif de mon choix.

Défis Techniques

J'ai réalisé le maquettage afin de me familiariser avec l'outil Figma.
L'un des principaux défis de ce projet a été de gérer la logique du score et le transfert entre le score temporaire et global, tout en rendant le jeu fluide et interactif pour les utilisateurs. Pour cela, j'ai implémenté une gestion d'événements JavaScript efficace et optimisé les interactions DOM.

Conclusion

Ce projet m'a permis de renforcer mes compétences en développement d'interfaces dynamiques et en manipulation du DOM avec JavaScript.
La réalisation de ce jeu de dés m'a également appris à gérer efficacement les états et les événements utilisateur pour offrir une expérience fluide.
Vous pouvez tester le jeu ou accéder au coude source via les liens ci-dessous :