Le jeu de Memory est composé de 10 paires de cartes identiques. Elles sont mélangées et retournées faces cachées sur un plateau de jeu.
On peut retourner deux cartes de son choix pour voir leurs faces. Si les deux cartes sont identiques elles sont enlevées du plateau, sinon on les retourne de nouveau faces cachées. On recommence ainsi jusqu'à ce qu'il n'y ait plus de carte sur le plateau.
On veut réaliser ce jeu en javascript. Le plateau aura la forme suivante :
Pour retourner une carte on cliquera tout simplement dessus.
Il faudra prévoir la gestion de fin de partie et offrir la possibilité au joueur de recommencer.
L'interface utilisateur du jeu est écrite en HTML :
<table id="tapis">
<tr>
<td><img src="fondcarte.png"/></td>
...
<td><img src="fondcarte.png"/></td>
</tr>
...
</table>
Il s'agit d'un élément <table> constitué de 4 lignes et 5 colonnes. Chaque cellule de la table contient un élément <img> affichant par défaut fondcarte.png qui est la représentation d'une carte de dos. Les motifs des cartes retournées sont dans les fichiers carte1.png, carte2.png, etc.
Toutes les images utilisées ont été téléchargées sur le site openclipart.
Les 20 cartes du jeu sont numérotées comme sur le schéma ci-dessous :
Chacune de ces cartes possède un motif et un état. Il y a 10 motifs numérotés de 1 à 10 qui figurent chacun deux fois et pour les états il a été décidé d'utiliser le codage suivant :
0 : la carte est face cachée,
1 : la carte est face visible,
-1 : la carte ne figure plus sur le tapis de jeu.
Ces données sont conservées dans les tableaux motifsCartes et etatsCartes :
var motifsCartes=[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10];
//0:face cachée;1:face visible;-1 enlevée
var etatsCartes=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];Par exemple, pour connaître les caractéristiques de la carte numérotée 5 il faut regarder le contenu
des variables motifsCartes[5] et etatsCartes[5].
Par défaut les numéros de motifs se suivent et les états de toutes les cartes ont la valeur 0 (cartes faces cachées au début du jeu).
Enfin on utilise deux variables supplémentaires :
var cartesRetournees=[];
var nbPairesTrouvees=0;cartesRetournees sert à conserver les numéros des cartes qui sont faces visibles à un moment donné du jeu et nbPairesTrouvees compte le nombre de paires de cartes identiques déjà découvertes par le joueur.