Troisième étape : Affichage des cartes
Les six cartes utilisées dans le jeu sont des images JPG de 170 pixels sur 170. Elles sont nommées 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg et 6.jpg :
Le dos des cartes est également une image JPG de 170 pixels sur 170 et a pour nom dos.jpg.
Les cartes vont apparaître retournées par défaut. Elles seront réparties sur trois lignes pour obtenir quelque chose comme ceci.
Pour arriver à ce résultat, nous allons utiliser :
- deux boucles for imbriquées d’indices i et j ;
- la fonction affiche_image() pour afficher une image.
Commencez par définir les variables i, j et k dans l’en-tête du document :
<script>
var i, j, k;
Puis insérez le code suivant dans le corps du document :
for (i=1;i<4;i++) {
for (j=1;j<5;j++) {
k = (i-1)*4 + j – 1;
affiche_image(‘dos.jpg’, k + 1, cartes.charAt(k) + ‘.jpg’);
}
document.write(‘<br>’);
}
La première boucle for permet d’afficher les trois lignes de cartes. Quant à la deuxième, elle est responsable de l’affichage des quatre cartes sur chaque ligne.
Pendant le parcours des deux boucles, la variable k prend tour à tour les valeurs 0, 1, 2, … 11. C’est cette variable qui va permettre à la fonction affiche_image() d’associer une figure à chaque carte.
La fonction affiche_image() admet trois arguments :
- le nom de l’image à afficher ;
- l’identifiant de l’image (entre 0 et 11) ;
- le numéro de l’image, extrait de la chaîne cartes, qui a été mélangée à l’étape précédente. Pour extraire le caractère qui se trouve à la position k, nous appliquons la fonction charAt(k) à la chaine cartes. La chaîne « .jpg » est concaténée au résultat de la fonction charAt(). Nous obtenons donc des chaînes du type 1.jpg à 12.jpg.
Remarquez l’instruction document.write(‘<br>’);, à l’extérieur de la boucle la plus interne. Cette instruction est exécutée chaque fois que la boucle interne est terminée, et donc toutes les 4 cartes. Elle provoque l’affichage des cartes suivantes sur une autre ligne.
Voyons ce qui se cache derrière la fonction affiche_image() :
function affiche_image(src, id, name) {
var img = document.createElement(« img »);
img.src = src;
img.id = id;
img.name = name;
document.body.appendChild(img);
}
La première instruction crée un élément img et l’affecte à la variable img.
Les trois lignes suivantes initialisent les attributs src (le nom de l’image), id (l’identifiant de l’image) et name (le nom de l’image) avec les trois paramètres passés à la fonction.
Enfin, la dernière instruction ajoute l’image au DOM, et donc, fait apparaître une carte retournée.
