Etape 6 – Détection des cartes appariées
Dans cette étape, nous allons ajouter du code pour que les cartes appariées restent visibles. Pour cela, vous aurez besoin de plusieurs variables. Définissez-les dans l’en-tête du document :
<script>
var i, j, k; // Compteurs de boucles
var memo_carte = »; // Mémorisation du nom de la carte précédente
var memo_position = 0; // Mémorisation de la position de la carte précédente
var visible = new Array(0,0,0,0,0,0,0,0,0,0,0,0); // Indique si les cartes sont visibles (1) ou retournées (0, valeur par défaut)
Lorsque le joueur clique sur une carte il est nécessaire de la comparer à la carte qui a été retournée précédemment. Pour cela, il faut mémoriser le coup précédent. C’est la raison d’être des variables memo_carte et memo_position qui mémorisent (respectivement) le nom de la carte précédente et sa position dans le jeu.
Le tableau visible contient 12 valeurs qui représentent l’état retourné (0) ou visible (1) des cartes.
Nous allons maintenant agir sur la partie img.onclick du code :
img.onclick = function() {
document.getElementById(id).src = name; // On montre la carte
if (memo_carte == name) { // Deux cartes identiques retournées
visible[memo_position-1] = 1;
visible[id-1] = 1;
}
else {
memo_carte = name;
memo_position = id;
setTimeout(function() {if (visible[id-1]==0) {document.getElementById(id).src = ‘dos.jpg’; }}, 1000); // On la cache après un délai de une seconde
}
}
Lors du premier clic sur une carte, memo_carte a la valeur qui lui a été affectée dans l’en-tête du document, à savoir une chaîne vide. Le test if (memo_carte == memo) n’est donc pas vérifié, et la partie else du code s’exécute. Ici, on mémorise la carte cliquée dans la variable memo_carte et sa position dans la variable memo_position :
else {
memo_carte = name;
memo_position = id;
Comme vous pouvez le voir, le premier paramètre de la fonction setTimeout() a été modifié. Lorsque les 1000 millisecondes sont écoulées, un test if s’intéresse au tableau visible, et plus particulièrement à la valeur qui correspond à la carte cliquée. Si cette valeur est égale à zéro, la carte est retournée :
if (visible[id-1]==0) {document.getElementById(id).src = ‘dos.jpg’; }
Lorsque l’utilisateur clique sur une deuxième carte, on teste si la carte cliquée est identique à celle qui avait été cliquée au tour précédent :
if (memo_carte == name) {
Dans l’affirmative, les éléments qui correspondent aux deux cartes sont mis à 1 dans le tableau visible afin que ces cartes restent visibles :
visible[memo_position-1] = 1;
visible[id-1] = 1;
Nous allons tester le code. Comme vous le voyez, les cartes appariées restent visibles :
