TP6-7

Organisation

Le TP est à réaliser par groupe de 2 personnes. Il est à rendre au plus tard pour le vendredi 6 mars 23h59, sous la forme d'une archive de nom "nom1_nom2.zip" qui sera envoyé par mail avec pour objet "[ISIA3][Internet] Rendu TP" à l'adresse indiquée dans la rubrique "Contact" du site. Tout projet rendu en retard sera considéré comme non rendu.

Contexte

Nous allons réaliser une page web permettant à un utilisateur de jouer au jeu Memory, dans une variante solo du jeu de table classique.

Le principe est le suivant : la page affiche une grille de LxH cases, contenant chacune un symbole, mais qui sont dites faces cachées à l'état initial (la case est visible, mais pas le symbole qu'elle contient). Quand l'utilisateur clique sur une case, celle-ci se révèle (affiche son symbole). Quand l'utilisateur clique sur une deuxième case, celle-ci se révèle également. Mais s'il clique sur une troisième case, la première qui s'était révélée redevient "face cachée" avant que la 3ème ne se révèle. L'utilisateur peut cliquer sur autant de cases qu'il veut, mais seul les deux dernières sur lesquelles il a cliqué reste révélées.

Il existe (LxH)/2 symboles différents dans la grille, et chaque symbole apparaît exactement 2 fois. Si l'utilisateur parvient à révéler en même temps deux symboles identiques, les cases correspondantes sont défaussées (plus de symbole affiché, la case devient uniformément grise). L'utilisateur ne peut plus cliquer sur les cases défaussées.

Le but pour l'utilisateur est de réussir à recréer toutes les paires de symboles et à défausser toutes les cases, en faisant le moins de clic possible.

Travail demandé

Créez un site web qui :

• - Demande à un joueur un niveau de difficulté N, entre 10 et 20
• - Affiche la grille de 2N cases en affectant un symbole caché à chaque case (une lettre minuscule). La grille devra être "la plus carrée possible" (par exemple si on choisit N=10, la grille fera 4x5 cases, pas 2x10)
• - Permet à un joueur de séléctionner des cases comme expliqué ci-dessus
• - Affiche en permanence le nombre de coups joués
• - Affiche un message de victoire lorsque la grille est terminé
• - Propose de rejouer une partie et affiche l'historique des scores au fur et à mesure en dessous de la grille
• - Propose un mode "difficile", où les lettres apparaissent une fois en majuscule et une fois en minuscule
• - Indique vos noms et prénoms en footer

Évaluation

À titre indicatif, vous trouverez ci-dessous une liste des points d'attention pour votre projet qui entreront en compte dans la notation. Voici donc les points à garder en tête :

• - respectez exactement le cahier des charges
• - soignez votre code (séparer dans des fichiers HTML/CSS/JS, commentaire, indentation,...)
• - veillez à l'ergonomie de votre interface
• - utilisez les éléments HTML5 et Bootstrap pour structurer votre page
• - écrire un code JS efficace et soigné
• - vérifier qu'aucune erreur ne s'affiche dans la console lors d'un cycle d'éxecution normal de votre application

Un code JS qui ne contient pas ou pas assez de commentaires, ou qui sera inséré directement dans le code HTML, ne sera pas corrigé. Cela entraînera une invalidation du projet.