Examen – Jeu « Mémo Kawaii »

Enoncé#

Vous devez réaliser un jeu de memory en vanilla JS et CSS (projet Vite).
Toutes les ressources graphiques (recto, verso, logos, boutons, titres) sont disponibles ici :
https://ifosup-my.sharepoint.com/:f:/g/personal/thibault_six_ifosup_wavre_be/EqhNW7snsJBDirOobVwmZ2wBqKevUu4jprmSkhxck50AvQ?e=Ow1T1C

Règles de base#

• L’écran d’accueil affiche le logo et un bouton Jouer.

• Une fois lancé, le plateau contient deux exemplaires de chaque image choisie dans le tableau images ci-dessous.

  const images = [
    "bunny","dog","fox","mouse","owl","whale",
    "alpaca","cat","chick","hedgehog","koala",
    "panda","parrot","penguin","raccoon",
    "shark","sloth","tiger",
  ];
  

• Les étudiants déterminent eux-mêmes la taille de la grille et la construisent avec CSS Grid.

• Le tableau des cartes est mélangé par :

  boardState.sort(() => Math.random() - 0.5);
  

• Au clic, une carte se retourne ; lorsqu’une deuxième est révélée :

  • si les deux images sont identiques : elles restent visibles ;

  • sinon : elles restent affichées 1 seconde puis se re-cachent.

• L’image du dos s’appelle back.jpeg.

• Quand toutes les paires sont trouvées, l’écran de fin affiche le titre Gagné ! et un bouton Rejouer.

Fonctionnalités supplémentaires (pour plus de points)#

• Design soigné : animations de flip, hover, responsive.

• Calcul de score : coups, temps, étoiles… au choix.

• Modes de difficulté : plusieurs tailles de plateau.

• Sauvegarde des scores : localStorage ou requête PHP via fetch.

Livraison#

Un seul lien vers le dépôt Git est à déposer dans le devoir Teams du cours.

Exemples#

Écran de démarrage#

Grille de jeu#

Partie terminée#