Guerre des Pixels

Création de la partie client pour la "Chasse au trésor" en utilisant une API existante​

Introduction : Dans ce projet, vous allez créer la partie client d'un jeu appelé la "Chasse au trésor". L'objectif est de permettre aux utilisateurs de se connecter à une API existante qui gère un tableau de pixels en ligne et de jouer à ce jeu en temps réel avec d'autres joueurs. L'API fournit différentes fonctionnalités telles chercher des pièces, en voler, etc. Vous utiliserez cette API pour créer une interface utilisateur interactive et conviviale pour le jeu.

Objectifs :

1. Analyse de l'API existante : Étudiez la documentation de l'API existante fournie avec Swagger. Comprenez les différentes routes disponibles, les paramètres acceptés et les réponses renvoyées par l'API.

2. Conception de l'interface utilisateur : Concevez une interface utilisateur attrayante et conviviale pour le jeu. Utilisez des technologies HTML, CSS et JavaScript pour créer les éléments de l'interface, tels que le tableau de pixels, les boutons pour choisir l'équipe, etc.

3. Intégration de l'API : Intégrez l'API dans votre application client. Utilisez des requêtes HTTP (GET, POST, etc.) pour interagir avec l'API et mettre à jour les données en fonction des actions des joueurs.

4. Test et débogage : Testez votre application pour vous assurer que toutes les fonctionnalités fonctionnent comme prévu. Déboguez les erreurs et les problèmes éventuels pour garantir une expérience de jeu optimale.

5. Documentation et présentation : Documentez votre travail. A minima votre projet doit inclure une JSDoc pour chaque fonction créée. Il doit aussi contenir un fichier README.md contenant les informations importantes.

6. Proposer de nouvelles fonctionnalités: L'interface telle que vous pouvez la voir sur la vidéo possède (volontairement) plusieurs défauts. C'est à vous d'être créatifs en codant de nouvelles fonctionnalités (ou en améliorant celles existantes). Regardez bien l'API proposée, elle retourne des informations qui ne sont pas utilisées dans la version visible sur la vidéo. Ca peut vous donner des idées pour ajouter des choses en plus.

Règles du jeu - Chasse au Trésor Collaborative

Introduction​

Bienvenue dans ce jeu de chasse au trésor collaborative ! Vous allez devoir collaborer avec les membres de votre équipe pour collecter le maximum de pièces d'or et devenir l'équipe la plus riche.

Le plateau de jeu​

• Une grille de 100x100 cases
• 4 zones spéciales (A, B, C, D) représentant les coffres-forts des équipes
• 35 pièces d'or réparties aléatoirement sur la grille (hors zones spéciales)
  • 20 pièces de valeur 1
  • 10 pièces de valeur 3
  • 5 pièces de valeur 5

Les équipes​

Chaque étudiant est assigné à une équipe (A, B, C ou D) et reçoit un identifiant unique (UID) personnel. Cet UID est nécessaire pour toutes vos actions de jeu.

Comment jouer ?​

1. Chercher des pièces​

Pour trouver les pièces, vous disposez d'un sonar qui peut détecter leur présence :

POST /chercherPiece :

{
    "uid": "votre_uid",
    "lig": 0-99,
    "col": 0-99
}

Le sonar vous indiquera :

• Si une pièce est présente sur la même ligne ou colonne
• De combien de cases vous devez vous déplacer pour l'atteindre

2. Récupérer une pièce​

Une fois une pièce localisée, vous pouvez la ramasser :

POST /prendrePiece :

{
    "uid": "votre_uid",
    "lig": 0-99,
    "col": 0-99
}

La pièce sera automatiquement déposée dans le coffre-fort de votre équipe. Attention : un utilisateur ne peut pas récupérer plus de 3 pièces par jour

3. Espionnage et vol (stratégie avancée)​

Pour augmenter vos gains, vous pouvez :

a. Payer un espion​

Une fois par partie, vous pouvez engager un espion :

POST /payerEspion :

{
    "uid": "votre_uid"
}

L'espion vous révélera l'emplacement de la porte secrète d'une équipe adverse, mais vous volera une pièce en échange.

b. Voler une équipe adverse​

Si vous connaissez l'emplacement d'une porte secrète :

POST /volerPiece :

{
    "uid": "votre_uid",
    "lig": "porte_ligne",
    "col": "porte_colonne"
}

Après avoir volé une équipe, les coordonnées de la porte secrète sera modifiée

4. Bonus : Magic Numbers​

Des QR codes sont cachés à l'IUT, si vous en trouvez un, scannez-le et insérez son contenu dans cette requête. Si vous êtes le premier à le découvrir, votre équipe gagne 5 points !

POST /magic-number :

{
    "uid": "votre_uid",
    "magicNumber": "code_secret"
}

Votre équipe recevra une pièce de valeur 5 en récompense !

Informations utiles​

Consulter l'état du jeu​

• /tableau : Voir l'état actuel du plateau
• /piecesEnBanque : Voir le score de chaque équipe
• /liste-joueurs : Voir les joueurs actifs
• /equipe-utilisateur : Vérifier votre équipe

Points importants​

1. Un délai minimum est imposé entre chaque action
2. Les pièces et les portes secrètes sont réinitialisées chaque jour à minuit
3. Trop de requêtes rapprochées entraînent un bannissement temporaire
4. Chaque joueur ne peut utiliser l'espion qu'une seule fois

Conseils stratégiques​

1. Coordonnez-vous avec votre équipe pour explorer efficacement la carte
2. Utilisez le sonar méthodiquement pour quadriller la zone
3. Gardez toujours des pièces en réserve pour payer l'espion
4. Partagez les informations sur les portes secrètes avec vos coéquipiers
5. Surveillez les scores des autres équipes pour ajuster votre stratégie

Interface​

Pour construire une interface plus riche, vous pouvez utiliser les routes suivantes :

• Vérifier votre temps d'attente : /temps-attente
• Confirmer votre équipe : /equipe-utilisateur

Bonne chance et que la meilleure équipe gagne ! 🏆

La vidéo suivante illustre le fonctionnement du jeu avec deux joueurs. Il est important que la partie "client" soit toujours synchronisée afin de voir les modifications opérées par les autres joueurs. Dans la vidéo, on voit que les modifications faites par un joueur se voient sur la page de l'autre joueur.

API disponible (Swagger)​

Ce mini-projet est l'occasion de découvrir un outil professionnel Swagger. Il permet de comprendre une API. La documentation de l'API du projet est disponible ici.

Rendu​

modalités de rendu​

• Ce projet est à rendre sur la page moodle du cours (adresse à venir)
• Vous devrez déposer (au format tar ou zip) une archive contenant votre code source (dont un README)
• Projet à rendre pour le 16 juin 2025

notation​

Partie 1 (7 points)​

Dans cette partie nous ne regardons pas le code. Nous notons uniquement les aspects fonctionnels.

• affichage la carte au trésor : 2 point
• mise à jour de la carte au trésor après chque action : 1 point
• pouvoir faire les 5 actions : chercher une pièce, prendre une pièce, voler une pièce, payer espion, entrer un nombre magique : 2 points
• gestion du tableau de joueurs : 1 point
• affichage des messages du serveur 1 point

Dans cette partie nous notons votre code.

Partie 2 (10 points)​

• gestion des fetch : 3 points
• gestion du dom : 3 points
• qualité générale du code 2 points : architecture en fichiers, fonctions, qualité du JS, présence d'un README

partie 3 (3 points)​

Vous êtes notés également sur votre capacité à faire évoluer le projet tel qu'il est présenté dans les vidéos.

Proposez des idées, et écrivez-les dans le readme