Manipulation du DOM, Objet JavaScript

Exercice 1 - Memory

1. 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 tp4.
2. A quoi sert la fonction MemoryGame ?

   function MemoryGame(images, blank) {
     // TODO
   }
        

   
   Pourquoi le nom de la fonction MemoryGame commence par une majuscule ?
3. Expliquez le code suivant :

   MemoryGame.prototype.build = function build(div) {
     // TODO
   }
        

   
   A quoi sert MemoryGame.prototype ?
4. Ecrivez le code de la fonction MemoryGame pour stocker le tableau des images et l'image de dos de carte.
   Puis écrivez 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 élement du DOM possède un attribut innerHTML.
5. Pour notre 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 pour la mise au point du programme ?
6. Modifiez la méthode build pour afficher autant de cartes que de cases du tableau cards. 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.
7. Rappeler les deux techniques permettant de modifier l'arbre DOM.
   Sachant que l'on veut ajouter un écouteur d'évènement pour savoir si on clique sur une carte, quelle solution doit-on choisir ?
8. On souhaite ajouter une fonction permettant de savoir lorsque l'utilisateur a cliqué sur une carte, ajouter pour cela une fonction qui sera appelée lorsque l'utilisateur clique sur la carte.

         image.onclick = ...
       

   
   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 soit affiché.
9. On souhaite maintenant pouvoir afficher l'image correspondant à une carte lorsque l'on clique sur la carte.
   Le problème est que le tableau des images doit être stocké dans un objet MemoryGame et qu'il faut 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 ?
   Implantez votre solution pour que, lorsque l'on clique sur une carte, l'image correspondante s'affiche.
   Rappel: l'élement DOM correspondant à une image possède une propriété src.
10. 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 suivant :
    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.
    Puis implantez votre algorithme en JavaScript
11. 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.
12. Si l'image n'est pas identique, on souhaite avoir le temps de voir la face de la seconde carte avant de les retourner. 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 !
13. Enfin, modifiez shuffleCards pour que le tableau des cartes soit mélangé de façon aléatoire (on tire aléatoirement deux valeurs avec Math.random, on les swap, autant de fois qu'il y a de cartes).

Exercice 2 - JavaScript 2015