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 cet 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 tp6.
À quoi sert la fonction constructor ?
```
constructor(images, dos) {
  // TODO
}
```
À quel moment est-elle appelée dans le script memory.html ?
Écrivez le code du constructeur de la classe MemoryGame pour stocker le tableau 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 le constructeur de la classe MemoryGame pour que la classe contienne également un tableau positionsCartes 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 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;
```
Lorsqu'on utilise cette syntaxe, le sens du mot-clé this dans la function fun est différent si elle a été définie avec la syntaxe normale ou avec une notation flèche. Quelle est la différence ? Rappel de cours.
Comment faire pour savoir sur quelle carte un utilisateur a cliqué ?
Implémentez la solution retenue pour que, lorsque l'on clique sur une carte, son index dans le tableau des cartes (entre 0 inclus et 16 exclus) et le numéro de carte correspondante (entre 0 inclus et 8 exclus) 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. Comme le tableau des images est stocké dans un objet MemoryGame, il est important que cet objet soit accessible à la fonction qui est exécutée lors d'un clic.
Comment faire pour que le tableau des images soit accessible lors d'un clic ?
Implémentez 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).