Memory Game en JavaScript

DS «Création de documents numériques» (DUT Informatique)
12/12/2013
Memory Game en JavaScript
1. Principe du jeu
4 paires de cartes identiques sont disposées aléatoirement face cachée. Le joueur retourne
successivement deux cartes. Si les deux cartes forment une paire, elles restent face visible sinon elle sont
replacées face cachée. La partie est gagnée lorsque les 4 paires sont visibles.
Figure 1 : début de partie
Figure 2 : partie en cours
2. Battre les cartes
Les valeurs des cartes (4 paires de lettres) sont stockées dans le tableau de caractères cardValue. Le
tableau cardHidden indique si les cartes sont affichées face cachée (true) ou face visible (false).
var cardValue = ['H' , 'H' , 'T' , 'T' , 'M' , 'M' , 'L' , 'L'];
var cardHidden = [true, true, true, true, true, true, true, true];
Les cartes doivent être mélangées avant de commencer la partie. Pour cela, vous devez implémenter les
deux fonctions ci-dessous.
Exercice 1 (1 point)
La fonction swapCards(i,j) permet d’échanger (permuter) les valeurs des cartes d’indices i et j dans
le tableau cardValue.
Exercice 2 (2 points)
La fonction shuffleCards() permet de mélanger les cartes en effectuant 50 permutations successives.
Les indices des cartes à échanger seront tirés aléatoirement.
3. Afficher les cartes
Après chaque action du joueur, toutes les cartes sont dessinées. Chaque carte est représentée par une
division HTML (élément <div>) identifiée. L’identifiant varie entre 0 et 7. Le dessin d’une carte d’indice i
consiste à afficher le caractère ‘?’ lorsque que la carte est présentée face cachée
(cardHidden[i]==true) ou sa valeur (cardValue[i]) lorsqu’elle est présentée face visible.
Exercice 3 (2 points)
Implémenter la fonction displayCards() qui dessine l’ensemble des cartes du jeu.
DS «Création de documents numériques» (DUT Informatique)
12/12/2013
4. Jouer
Chaque carte (représentée par une division HTML identifiée de 0 à 7) réagit au clic de souris en appelant la
fonction play(i), i correspondant à la valeur de l’identifiant de la carte cliquée.
Exercice 4 (2 points)
Donner le code HTML correspondant à l’ensemble des cartes du jeu.
Exercice 5 (2 points)
Implémenter la fonction isWinner() qui retourne true si toutes les cartes sont affichées face visible et
false sinon.
Exercice 6 (3 points)
Implémenter la fonction checkCards(i,j) qui compare les valeurs des cartes i et j. Si elles sont
différentes, elles sont replacées face cachée sinon la fonction affiche une fenêtre d’alerte en cas de victoire
seulement.
Afin de mémoriser les cartes sélectionnées par le joueur, on utilise la variable clickCount qui compte le
nombre d’appels de la fonction play(i) et le tableau à 2 cases cardSelected[] qui contient les indices
des cartes cliquées.
Exercice 7 (3 points)
Implémenter la fonction play(i) qui met à jour les variables clickCount et cardSelected[] ainsi que
l’affichage des cartes. À partir de 2 clics, la fonction appelle checkCards() au bout d’une demi-seconde.
Rappel: la fonction setTimeout(function(){MyFunction()},msec) permet d’appeler la fonction
MyFunction au bout de msec millisecondes.
5. Aller plus loin
Exercice 8 (2 points)
Donner les modifications à apporter au script afin de pouvoir afficher la durée de la partie dans la fenêtre
d’alerte en cas de victoire.
Rappel: la méthode getTime() de la classe Date renvoie le nombre de millisecondes écoulées depuis le
01/01/1970.
Afin d’augmenter la difficulté du jeu, on peut utiliser plus de paires de cartes. Si cardCount correspond au
nombre (pair) de cartes dans le jeu, implémenter les deux fonctions suivantes :
Exercice 9 (1 point)
La fonction createHTML() retourne sous forme d’une chaîne de caractères le code HTML des divisions
identifiées représentant les cartes au nombre de cardCount.
Exercice 10 (2 points)
La fonction createCards() initialise les tableaux cardValue et cardHidden en fonction de la variable
cardCount. Pour des raisons de simplicité, les valeurs des cartes seront des entiers compris entre 0 et
cardCount/2-1.