Le jeu de bataille

L'objectif de ce tp est de poursuivre la découverte des aspects objets du langage JavaScript et de manipuler les objets tableau (Array).

1. Principes du jeu

La Bataille est un jeu de cartes très simple, souvent joué par les enfants, mais qui peut être amusant à tout âge. Il peut se jouer à deux joueurs ou plus, avec un jeu de 32 ou 52 cartes. Par la suite, pour simplifier la programmation on se limitera à des parties avec un jeu de 32 cartes et à 2 joueurs .

Voici les règles classiques :

1.1 Matériel – le jeu de cartes

Dans un jeu de 32 cartes, il y a 4 couleurs :

pique ♠
cœur ♥
carreau ♦
trèfle ♣

et 8 valeurs dans l'ordre de la plus petite à la plus grande :

sept
huit
neuf
dix
valet
dame
roi
as

On a ainsi 8 valeurs × 4 couleurs = 32 cartes.

1.2 But du jeu

Être le dernier joueur à posséder des cartes.

1.3 Déroulement d'une partie

Distribution : Le paquet est distribué équitablement entre les joueurs, face cachée. Chaque joueur garde son paquet en pile, sans regarder les cartes.
Tour de jeu :
- Chaque joueur retourne la première carte de son paquet et la pose face visible sur la table.
- Le joueur avec la carte la plus forte remporte toutes les cartes posées et les place sous son paquet , face cachée.
Égalité – La Bataille :
- Si les deux joueurs posent des cartes de même valeur, il y a bataille.
- Chaque joueur pose une nouvelle carte (c'est une règle simplifié, dans la règle exacte, chaque joueur place une carte face cachée, puis une carte face visible).
- Celui qui a la carte visible la plus forte remporte toutes les cartes qui ont été posées.
- Si c’est encore une égalité, on recommence la bataille jusqu’à ce qu’un joueur gagne.
Fin du jeu :
- Le jeu continue jusqu’à ce qu’un des joueurs n'ait plus de carte. Le joueur a alors perdu et l'autre joueur qui possède toutes les cartes est déclaré vainqueur.
- Les parties pouvant être longues, il est possible d'interrompre une partie en cours de route. Dans ce cas c'est le joueur qui a le plus decartes qui est déclaré vainqueur.

2. Mise en Place du TP

Téléchargez le fichier TP10_Bataille.zip qui contient le code source du projet bataille.
Décompressez ce fichier dans le votre répertoire de travail TW,

Ouvrez le dossier TP10_Bataille dans votre IDE (VSCode). Vous devriez obtenir la hiérarchie de répertoires suivante.

TP10_Bataille/
├── index.html             # Interface web du jeu
├── style.css              # Styles CSS
├── js/                    # Code JavaScript
│   ├── ValeurCarte.js     # Énumération des valeurs de cartes
│   ├── CouleurCarte.js    # Énumération des couleurs de cartes
│   ├── Carte.js           # Classe représentant une carte
│   ├── PileCartes.js      # Classe pour gérer une pile de cartes
│   ├── Jeu32Cartes.js     # Classe pour représenter un jeu de 32 cartes
│   ├── Joueur.js          # Classe représentant un joueur
│   ├── Bataille.js        # Logique principale du jeu
│   ├── BatailleGUI.js     # Contrôleur de l'interface graphique
│   └── BatailleCLI.js     # Version console (Node.js)
└── src/bataille/images/   # Images des cartes

3. Cartes à jouer

La classe Carte représente une carte à jouer et définit deux attributs : valeur de type Valeur et couleur de type Couleur. Valeur et Couleur sont des énumérations qui représentent respectivement les valeurs et les couleurs possibles d'une carte.

Diagramme UML d'une carte à jouer — Diagramme de classes d'une carte à jouer.

Question 1 : Ajoutez à la classe Carte une méthode statique (méthode de classe) carteAuHasard() permettant de créer un Carte en tirant sa valeur et sa couleur au hasard parmi les valeurs et couleurs de cartes définies par les énumérations ValeurCarte et CouleurCarte. La méthode est déjà déclarée dans le code de Carte, vous devez simplement écrire le corps de celle-ci. Pour tirer un nombre au hasard vous disposer de la méthode random de la classe Math.

Question 2 : Dans un nouveau fichier TestCarte.js écrivez un programme vous permettant de tester la classe Carte. Le programme effectue les traitements suivants

création d'une carte dame de coeur et affichage de celle-ci (avec leur nom et leur nom court).
création de 10 cartes tirées au hasard et affichage de celles-ci (avec leur nom et leur nom court).

3. Les piles de cartes

Dans le jeu de la bataille on a besoin de piles de cartes :

Le jeu de cartes,
La pile de carte de chaque joueur,
Lors d'un tour de jeu, la pile des cartes jouées par chaque joueur.

La classe PileCarte a été créée pour modéliser ces objets.

Question 3 : Le code de PileCartes.js n'est pas terminé. Il manque les implémentations de certaines méthodes que vous devez compléter.

la méthode afficher(formeLongue) qui affiche sur la console les cartes contenues dans la pile
la méthode getter sommet() qui renvoei la carte située au sommet de la pile sans la retirer de celle -ci
la méthode vider() qui vide la pile et renvoie un taableau des cartes qu'elle contient.
la méthode recuperer(autrePileDeCartes) qui recupère les cartes d'une autre pile et les insère sous la pile.

Ecrivez le corps de ces méthodes et écrivez une petit programme TestPile.js vous permettant de les tester

4. La classe Jeu32Cartes

La classe Jeu32Cartes modélise un jeu de 32 cartes. Un jeude cartes est une pile de 32 cartes, la classe Jeu32Cartes étend documentla classe PilesCartes

Question 4 : Complétez le code de la classe Jeu32Cartes

Dans le constructeur, écrire le code qui permet de créer toutes les cartes du jeu (les 8 valeurs de cartes pour les 4 couleurs) et de les mettre dans le tableau lesCartes hérité de la classe PileCartes.
dans la méthode donnerUneCarteAuHasard() écrire le code qui permet de tirer une carte au hasard et de la retirer du jeu.
dans la méthode reprendreCartes(tabCartes) écrire le code qui permet de remettre dans le jeu les cartes contenues dans le tableau tabCartes, en les mettant sur le dessus de la pile.

Dans le programme TestJeu32.js rajoutez le code vous permettant de tester vos méthodes.

5. Le programme BatailleCLI.js

Vous pouvez maintenant tester l'ensemble de vos classes avec le programme BatailleCLI.js qui permet d'exécuter un jeu de Bataille dans une fenêtre terminal (Command Line Interface)

Question 5 : exécutez le programme avec la commande node.js BatailleCLI.js (attention de bien vous placer dans le répertoire js) et vérifiez que le jeu fonctionne bien.

5. L'interface graphique dans le navigateur

Vous pouvez maintenant tester l'interface web qui est controlé avec le module BatailleGui.js.

Question 6 : Dans BatailleGui.js il manque le code permettant de gérer les clic sur le bouton Nouvelle Partie affiché lorsqu'une partie est terminée (méthode nouvellePartie() ligne 126)


    /**
     * Gère le clic sur le bouton "Nouvelle Partie"   
     */
    nouvellePartie() {

        // TODO
        //  à vous de compléter

        // ramasse toutes les cartes des joueurs et les mets dans le jeu de 32 cartes
        // qui est mélangé et prêt pour une nouvelle distribution de cartes.
        

        // Réinitialiser l'interface
        // rendre visible le div contenant l'input nbCartes et le bouton distribuer

        // masquer le div contenant les boutons controlant le déroulement
        // de la partie en cours

        //  remmettre les boutons dans le bon état disable ou non
  
        // afficher données des joueurs

        // afficher dans la zone commentaires le message 
        // "Nouvelle partie ! Cliquez sur 'Distribuer' pour commencer."
    }

Complétez ce code et vérifiez que l'interface fonctionne correctement.