Exercice : Les chiasmes

Objectif

Le jeu des Chiasmes est un jeu de patience utilisant un jeu de 32 cartes.

L'objectif du jeu est d'arriver à disposer huit cartes en deux rangées de quatre sur un damier de la manière suivante :

Les huit cartes ne doivent contenir que deux valeurs de cartes. Dans l'exemple ci-dessus il s'agit des valeurs Dame et As. De plus, ces deux valeurs de cartes doivent être disposées alternativement, c'est à dire que deux cartes de la même valeur ne sont jamais l'une à coté de l'autre ni l'une au-dessus de l'autre.

L'objectif de cet exercice est de réaliser ce jeu avec HTML et Javascript.

La page HTML est déjà écrite : il s'agit du fichier Etudiant/Chiasme1.html.

Pour l'instant, le jeu ne fonctionne pas car les fonctions Javascript permettant de traiter les évènements ne sont pas complètes. Votre, rôle sera de les complèter de manière à ce que le jeu fonctionne.

Ces fonctions se trouvent dans le fichier Etudiant/Chiasme1.js. C'est donc ce fichier qu'il faudra modifier. Par contre, on vous demande de ne rien changer au fichier Chiasme1.html.

Fonctionnement du jeu

Au départ, le damier est vide et on ne voit que la carte au sommet du tas :

Pour poser une carte du tas sur le damier, le joueur clique sur la case du damier sur laquelle il veut poser la carte. En partant de l'exemple précédent, le joueur peut par exemple poser le 9 de pique sur la troisième case de la première rangée en cliquant sur cette case. Il obtiendra alors ceci :

Le joueur peut également retirer une carte du jeu en cliquant dessus. Par exemple, si le damier contient les cartes suivantes :

On peut retirer le 9 de coeur en cliquant dessus et on aura alors le damier suivant:

En résumé, le joueur ne peut faire qu'une seule chose : cliquer sur une case du damier. Si cette case contient une carte, elle est retirée du jeu. Si elle est vide, on enlève la carte au sommet du tas pour la poser sur cette case.

Représentation du Jeu

Représentation HTML

Le fichier HTML contient deux tableaux. Le premier représente le damier. C'est un tableau composé de deux lignes de quatres cellules. Le deuxième tableau représente le tas. Il ne contient qu'une seule cellule.

Les cellules possèdent tous un identifiant, qui vous servira à y insérer des images avec innerHTML. Les identifiants des cellules du damier sont les chiffres 0 à 7 et l'identifiant de la cellule contenant le tas est "Tas" :

Les fonctions Javascript associées à cette page sont les suivantes:

Représentation Javascript

Coté Javascript, le jeu est représenté par un tableau nommé Tas et un entier nommé SommetTas.

Tas représente le tas de carte. C'est un tableau de 32 éléments indicés de 0 à 31. Chaque élément de ce tableau représente une carte, par une balise <img> permettant de l'inclure dans le tableau HTML sous la forme d'une image de 100 pixels de large. Les images des cartes se trouvent dans le dossier Images/Cartes.

Par exemple, si la troisième carte du tas (en partant du bas) est l'As de Trèfle, on aura 

 < img src="../../Images/Cartes/TrefleAs.gif" width="100" >

dans l'élément Tas[2] (puisque l'indiçage commence à 0).

SommetTas indique la hauteur du tas : c'est plus exactement l'indice de la carte au sommet du tas.

Par exemple, si le tas contient trois cartes avec l'As de Trefle au dessus du Sept de coeur, lui même au-dessus du Roi de Coeur, on aura SommetTas=2 :

Au début du Jeu, le tas contient les 32 cartes du Jeu. On aura donc SommetTas=31.

Le remplissage initial du tableau Tas avec les 32 cartes est déjà réalisé. Vous n'avez donc pas à vous occuper de ceci. Le code se trouve dans la fonction JeuInitial qui est appelée au chargement de la page.

Question 1 : Poser le Tas

Pour commencer le jeu il faut "poser le tas", c'est à dire que la carte au sommet du tas doit apparaitre dans la cellule du tableau HTML représentant le tas.

C'est le rôle de la fonction PoserTas que l'on vous demande d'écrire ici. Cette fonction est appelée par la fonction JeuInitial après avoir remplit le tas de cartes avec toutes les balises images. Elle sera donc automatiquement exécutée au chargement de la page et vous pouvez considérer qu'au moment de son exécution le tas de cartes est rempli avec les 32 cartes du jeu.

Dans la fonction PoserTas, vous mettrez donc l'instruction permettant de recopier le contenu de l'élément d'indice 31 du tableau Tas (donc le sommet), à l'intérieur de la cellule de tableau HTML d'identifiant "Tas":

Question 2 : Clic sur une case

Lorsque le joueur clique sur la case numéro i du damier, la fonction ClicSurLaCase ( i ) est appelée. Cette fonction, déjà écrite, fonctionne selon le schéma suivant :

Elle teste tout d'abord si la case est vide.

Si la case est vide, il y deux possibilités:

Si la case n'est pas vide, la carte qu'elle contient est retirée du jeu.

Toutes ces opérations sont représentées par des fonctions Javascript que l'on vous demande d'écrire dans l'ordre qui suit :

La fonction CaseVide

CaseVide (i) doit retournée la valeur vraie si la case numéro i est vide. Il faut donc tester si cette case ne contient aucune image de carte, c'est à dire qu'elle contient la chaine vide (représentée par "").

La fonction PlusDeCartes

PlusDeCarte ( ) est vrai si le tas est vide, c'est à dire que l'entier SommetTas vaut -1.

La fonction PoserUneCarte

L'appel de fonction PoserUneCarte (i), enlève une carte du tas pour la poser sur la case i du damier.

La figure ci-dessus illustre ce que fait la fonction PoserUneCarte, lorsque l'utilisateur clique sur la 2ème case (donc i=2) et que le tas de carte contient 6 cartes (donc SommetTas=5):

  1. La carte au sommet du tas (donc Tas[5]) est recopiée dans la cellule d'identifiant 2.
  2. On diminue la hauteur du tas de 1 : on enlève 1 à SommetTas.
  3. On affiche la nouvelle carte au sommet du tas en recopiant Tas[SommetTas] dans la cellule d'identifiant "Tas".
La fonction EnleverUneCarte

L'appel de fonction EnleverUneCarte (i), retire la carte posée sur la case i du jeu. Il faut donc pour cela effacer le contenu de la cellule d'identifiant i, c'est à dire y mettre la chaine vide.

Question 3 : Mélange des cartes

Après avoir réaliser la gestion du clic vous constaterez que les cartes se présentent toujours dans le même ordre, ce qui n'est pas très interessant.

Pour améliorer le jeu, il faudrait donc mélanger les cartes au hasard dès le début, c'est à dire au chargement de la page. Or la fonction appelée au chargement est JeuInitial.

En lisant le code de cette fonction, vous observerez qu'elle appelle une fonction MelangerTas (), mais que le corps de cette fonction est vide. C'est la raison pour laquelle les cartes apparaissent toujours dans le même ordre.

Dans cette question, on vous demande d'écrire le code de MelangerTas (). Pour cela vous pourrez utiliser la fonction NombreAleatoire2 (n,m) (fonction de la librairie ETBib/JSBib.js )qui retourne un nombre entier au hasard entre n (compris) et m (compris).