Mémory en JS

Le jeu de mémory est très simple :

Vous disposez d'un jeu de tuiles (cartes) en double,
vous placez ces tuiles face cachée, dans le désordre,
à chaque tour, vous retournez deux tuiles,
- si les deux tuiles ont même face, vous gagnez ces tuiles et pouvez rejouer,
- sinon, vous remettez ces tuiles en place, face cachée, et le tour passe au joueur suivant.

On propose de réaliser ce jeu sur une page web.

Je vous fournis une archive zip contenant une liste d'images.

Le fichier html

C'est le fichier principal, celui qui est ouvert par le navigateur. Ce fichier ne doit contenir que très peu de chose :

l'entête <head> habituelle avec title, charset, fichier de styles…
dans le <body>, un div pour contenir le jeu,
le lien vers le fichier JS.

Le fichier css

Il n'y a pas grand chose à styler, mais si vous vous voulez agir sur des paramètres de l'affichage, c'est ici.

Le script JS

C'est la partie importante. C'est lui qui fait à peu près tout : il crée les éléments de la page contenant les tuiles et il met en place le fonctionnement du jeu. C'est lui qui gère d'éventuels messages.

Création des tuiles

Dans le script prévoyez une constante N = 18, c'est le nombre de paire de tuiles différentes dans le jeu (vous disposez de fichier tuile_1.svg à tuile_18.svg)

Juste après le chargement, vous devez

créer 2 x 18 nœuds <img> dans la page,
affecter l'image dos.png à tous ces nœuds,
chaque nœud <img> correspondant à une tuile, choisir aléatoirement l'image face pour chaque nœud.

Déroulement du jeu

les images côté dos sont cliquables,
un premier clic sur un dos provoque l'affichage de la face correspondante.
un deuxième clic sur un autre dos provoque l'affichage de la face correspondante,
1. si cette 2e face est la même que la première, c'est gagné.
  je propose dans ce cas de laisser les deux tuiles face visible, mais elles ne sont plus cliquables.
2. si cette 2e face est différente, passer un petit délai, les deux tuiles reviennent faces cachées.

Gestion du délai

En JS, on peut lancer l'exécution d'une fonction après un délai :

// définition de la fonction
function uneFonction(){
    
}

// lancement de la demande :
setTimeout(uneFonction, 1000); // 1000 pour 1000 ms = 1 s

Éventuels messages

Vous pouvez ajoutez des messages pour l'utilisateur qui lui indiquent chaque fois quoi faire ou qui précisent le déroulement de la partie. Par exemple :

Joueur A : choisissez une première tuile
Joueur A : 4 paires ; Joueur B : 3 paires