« League of Checkers est un jeu de dames en ligne compétitif, conçu en environ deux semaines. Nous avons crée ce projet dans le but de le présenter lors du salon de l’étudiant, afin de promouvoir notre BTS SIO option SLAM auprès des lycéens potentiellement intéressés par notre formation. Notre objectif était également de démontrer les compétences que nous sommes capables de mettre en œuvre. League of Checkers a été développé en utilisant le framework Symfony, plus précisément en tirant parti d’API Platform, et du JavaScript pour assurer son bon fonctionnement.
Ce projet a été réalisé par un groupe de trois personnes :
– Thoma Hamlaoui (moi-même)
– Sullivan Gendre
– Paul Acier »
- A quoi ressemble le projet ?
Pour ce projet, nous avons décidé d’adopter un style de site épuré tout en cherchant à rendre l’esthétique de notre site attrayante. Voici la page d’accueil :
Sur notre site, vous avez accès à plusieurs fonctionnalités, comme vous pouvez le constater. La plupart d’entre elles sont classiques pour un jeu compétitif, telles que le classement/top des joueurs. En ce qui concerne les parties, vous pouvez les créer vous-même en utilisant le bouton « Créer une partie » ou les rejoindre en saisissant un code dans le champ textuel juste en dessous. Les joueurs ont également la possibilité de consulter les parties auxquelles il manque un joueur, cela se trouve dans l’onglet « Jouer » situé en haut de la barre de navigation.
Ensuite, nous disposons également de la page « Rang », qui permet aux joueurs de visualiser tous les rangs qu’ils pourront potentiellement atteindre, ainsi que les récompenses qui leur sont associées. Comme je ne suis pas connecté, mon rang est actuellement « null » et donc non affiché.
Enfin, notre dernière fonctionnalité est une boutique qui offre la possibilité d’acheter des skins pour nos pions, en utilisant la monnaie que l’on gagne en jeu à la fin de chaque partie.
Comme vous pouvez le constater, toutes les couleurs disponibles à l’achat sont affichées, ainsi que celles qui ont été débloquées. À terme, nous prévoyons d’afficher directement le pion avec le skin appliqué, pour une expérience plus esthétique. Pour choisir quel skin utiliser parmi tous ceux que nous avons achetés, il est nécessaire de se rendre dans l’onglet « Profil », qui regroupe également notre historique de parties et toute autre information liée à notre compte.
Sur la capture d’écran, vous pouvez remarquer que nous avons accès au nombre de parties jouées, remportées, ou même perdues. Nous disposons également d’un casier qui nous permet de choisir parmi tous les skins que nous possédons. (Sur la capture d’écran, le bouton « Équiper » n’est pas visible, mais pour l’afficher, le curseur doit survoler la couleur souhaitée.) Enfin, nous avons également l’historique des parties, qui, dans ce cas précis, est vide car je n’ai encore disputé aucune partie avec ce compte.
Pour conclure la présentation de notre projet, je vais vous montrer la page la plus importante du site, celle qui nous permet de jouer.
À droite de la page, on retrouve les informations les plus importantes de la partie, telles que les deux joueurs, le chronomètre qui se déclenche uniquement lorsque les deux joueurs sont présents, le nombre de tours, et le code de la partie. Au centre, on peut observer le plateau de jeu, et enfin, à droite, se trouve l’emplacement des mouvements. Après chaque mouvement d’un joueur, un récapitulatif du mouvement sera affiché à cet endroit, comme on peut le voir dans la photo suivante.
Ma contribution dans le projet ?
Dans ce projet, je me suis principalement occupé du Backend, en créant l’API à l’aide de l’outil API Platform. J’ai également développé les fonctions JavaScript nécessaires au fonctionnement de base du jeu, telles que le déplacement des pions, ainsi que toutes les fonctions permettant la communication avec l’API. De plus, j’ai élaboré le MCD du projet et mis en place la base de données.
Le design et le visuel (HTML/CSS) du site ont été réalisés par mes camarades de groupe, à savoir Sullivan Gendre et Paul Acier.
- Le MCD du projet :
