Documentation du Projet Memory Game Ce document détaille le travail réalisé pour le projet "Memory Game" et fournit une explication technique du code.
- Vue d'ensemble Le projet est un jeu de Memory développé avec Vue.js 3 (Composition API) et Vite. L'objectif est de trouver toutes les paires de cartes identiques en un minimum de temps et de coups.
Fonctionnalités Implémentées Jeu de Memory complet : Retournement des cartes, comparaison, validation des paires. Niveaux de difficulté : Grilles de 4x4, 5x5 et 6x6. Suivi des statistiques : Compteur de temps (minutes:secondes) et de coups joués. Historique des scores : Sauvegarde des meilleurs scores dans le navigateur (LocalStorage). Interface responsive : Design adapté aux mobiles et ordinateurs. Gestion d'état : Utilisation de ref, computed et des événements Vue pour la communication entre composants. 2. Structure du Code Le projet est structuré en composants Vue modulaires :
src/ ├── App.vue # Composant racine, gère l'état global (menu vs jeu) ├── components/ │ ├── TheMenu.vue # Menu principal (choix de difficulté) │ ├── MemoryBoard.vue # Plateau de jeu (logique principale) │ ├── MemoryCard.vue # Carte individuelle (affichage et animation) │ ├── GameStats.vue # Affichage du temps et des coups │ └── ScoreHistory.vue # Tableau des scores (lecture/écriture LocalStorage) └── assets/ └── main.css # Styles globaux 3. Explication Détaillée du Code A. Point d'Entrée : App.vue C'est le chef d'orchestre. Il décide quel écran afficher (Menu ou Jeu).
État currentView : Une variable réactive qui vaut 'menu', 'game' ou 'scores'. Gestion de la difficulté : Reçoit la difficulté choisie depuis TheMenu et la passe à MemoryBoard. B. Le Plateau de Jeu : MemoryBoard.vue C'est ici que réside la logique métier du jeu.
Génération des cartes : Crée des paires de valeurs (emojis). Mélange le tableau de manière aléatoire. Assigne un ID unique à chaque carte. Logique de jeu (handleFlip) : L'utilisateur clique sur une carte. Si c'est la première carte retournée, on la stocke. Si c'est la deuxième, on compare les valeurs. Match : Les cartes restent retournées (isMatched = true). Pas de match : On attend 1 seconde puis on les retourne face cachée. Timer et Coups : Un setInterval incrémente le temps chaque seconde. Le compteur de coups augmente à chaque tentative (paire retournée). Fin de partie : Détecte quand toutes les paires sont trouvées. Sauvegarde le score dans le localStorage. C. La Carte : MemoryCard.vue Composant de présentation responsable de l'animation.
Props : Reçoit l'objet card (valeur, état retourné/trouvé). Events : Émet un événement flip quand on clique dessus. CSS : Utilise transform: rotateY(180deg) et preserve-3d pour l'effet de retournement réaliste. D. Persistance : ScoreHistory.vue Gère l'affichage et la gestion des scores.
LocalStorage : Lit la clé memory-game-scores au chargement. Tri : Utilise une propriété computed pour trier les scores du meilleur au moins bon (basé sur le temps). Actions : Permet de supprimer un score spécifique ou tout l'historique. 4. Intégration Git et GitHub Le projet a été versionné et poussé sur GitHub. Voici les actions réalisées :
Initialisation : Création d'un dépôt git local (git init). Exclusion : Configuration de .gitignore pour ne pas envoyer les fichiers inutiles (comme node_modules). Commit : Ajout de tous les fichiers sources (git add . et git commit). Liaison : Connexion au dépôt distant https://github.com/Walidee27/Memory-game-.git. Push : Envoi du code sur la branche main. Le code est maintenant accessible en ligne et prêt à être partagé ou cloné.