Manipulation du DOM, objet JavaScript

Comme pour les TP précédents, on vous demande de créer un répertoire tp6 qui contiendra les exercices de cette feuille de TP et de faire un compte rendu de TP en HTML.

Exercice 1 : Memory

Le but de ce premier exercice est d'écrire un programme de jeu de memory. Le memory se joue avec des paires de carte ayant la même image. Au début du jeu, toutes les cartes sont retournées (face non visible), puis on choisit deux cartes, que l'on retourne, si les deux cartes ont la même image, on a trouvé une paire, et les 2 cartes restent face visible avec leur image, si les 2 cartes choisies ne correspondent pas à la même image, les cartes sont retournées (face non visible). Le but du memory est de trouver toutes les paires d'images.

Recopiez l'ensemble des ressources, c'est-à-dire, la page Web memory.html, le fichier JavaScript memory.js ainsi que les images dans votre répertoire tp7.

Dans la suite, nous allons stocker toutes les informations nécessaires au bon déroulement du jeu dans un objet game. Parmi les champs de cet objet figureront à la fois les informations statiques, telles que la liste des images, mais également des fonctions décrivant la dynamique du jeu.

Écrivez le code de la fonction create pour stocker le tableau des sources des images et l'image de dos de carte.
Écrivez ensuite le code de la méthode build afin que le nombre d'images soit affiché à l'intérieur de la balise div prise en paramètre.
Note : les élements du DOM possèdent un attribut innerHTML.
Pour notre jeu de memory, nous allons créer des paires de cartes, une paire par image. Pour stocker ces cartes, on va créer un tableau cards qui va contenir pour chaque carte l'index de l'image correspondante.
Dans un vrai memory, ce tableau des index des images est permuté lors de la création du jeu ; sinon, ce n'est pas très drole. Pour l'instant, nous allons utiliser la fonction shuffleCards qui vous a été donnée car cela sera plus facile pour la mise au point du programme.
Que fait la fonction shuffleCards, et en quoi cela aide-t-il pour la mise au point du programme ?
Modifiez la fonction create pour que game contienne également un tableau positions fourni par la fonction shuffleCards. Modifiez ensuite la méthode build pour afficher autant de cartes que de cases du tableau cards qu'a renvoyé la fonction shuffleCards (ici, 16 cartes). Chaque carte sera représentée par un div contenant une image (voir le CSS de memory.html). Pour l'instant, chaque carte affichera le même dos d'image.
Rappel : l'élement DOM correspondant à une image possède une propriété src.
On souhaite ajouter une fonction permettant de savoir lorsque l'utilisateur a cliqué sur une carte.
Note : tout élément est être muni d'une fonction onclick qui permet d'exécuter une fonction quand on clique sur la zone correspondant à cette balise. Le code JavaScript à utiliser pour munir un élément elt d'une fonction fun() ou bien fun(event) qui sera déclenchée lors d'un clic sera alors
```
elt.onclick = fun;
```
Comment faire pour savoir sur quelle carte un utilisateur a cliqué ?
Implantez la solution retenue pour que, lorsque l'on clique sur une carte, son index dans le tableau des cartes (entre 0 inclus et 16 exclu) et le numéro de carte correspondante (entre 0 inclus et 8 exclu) soient affichés dans la console du nagivateur.
On souhaite maintenant pouvoir afficher l'image correspondant à une carte lorsque l'on clique sur la carte.
Comment faire pour que le tableau des sources des images soit accessible lors d'un clic ? Et pour que les images effectivement affichées changent de source si nécessaire ?
Implantez votre solution pour que, lorsque l'on clique sur une carte, l'image correspondante s'affiche.
Il faut maintenant implanter la mécanique du jeu.
Comme on découvre les cartes, une par une, il faut se souvenir de la carte précédente (si elle existe) pour savoir si le jeu est dans l'un des états suivants :
1. on doit découvrir 2 cartes ;
2. on doit découvrir 1 carte (l'autre est déjà connue) ;
3. deux cartes ont été découvertes.
Sachant que l'on appelle selection la carte dont on se souvient, écrivez en pseudo-code l'algorithme qui prend en paramètre la carte sur laquelle on vient de cliquer et qui implante la mécanique de jeu.
Implantez ensuite votre algorithme en JavaScript.
Comment faire pour ne pas prendre en compte les cartes déjà retournées (il y a deux cas) ?
Modifiez votre programme en conséquence.
Si les images des deux cartes ne sont pas identiques, on souhaite avoir le temps de voir la face de la seconde carte avant de les retourner face cachée. Pour cela, le plus simple est d'attendre 500 ms avant de retourner les cartes. Comment écrire cela en JavaScript ?
Note : attention à ce que vous appelez this !
Enfin, modifiez shuffleCards pour que le tableau des cartes soit mélangé de façon aléatoire (comme dans la question 1 de l'exercice 3 du TP5).