Licence ISIL
2025/2026
Technologies Web
Pr. EDDABBAH Mohamed
TP 1 HTML CSS JS - Jeu de Mémoire Interactive
Énoncé du Travail Pratique
Contexte et Objectifs
Vous êtes chargés de développer un jeu de mémoire interactif et moderne exploitant des concepts avancés en
développement web. Ce projet vise à consolider vos compétences en CSS, HTML et JavaScript tout en vous
familiarisant avec les bonnes pratiques de développement front-end.
Livrables Attendus
1. Rapport de Spécifications Techniques
À remettre sous format PDF :
1.1 Analyse des Besoins
Description détaillée des fonctionnalités attendues, Public cible et expérience utilisateur visée, Contraintes
techniques identifiées
1.2 Spécifications Fonctionnelles
Liste exhaustive des fonctionnalités avec priorisation, Description des cas d'utilisation (User Stories), Règles
métier du jeu (scoring, déroulement d'une partie)
1.3 Spécifications Techniques
Architecture technique choisie, Technologies utilisées (HTML, CSS, JS) , Structure des données et
modélisation, Plan de tests unitaires
1.4 Planning de Développement
Répartition des tâches, Estimation des temps par composant, Jalons de validation
2. Maquettes et Design des Interfaces
2.1 Zoning et Wireframes
Maquettes fil de fer (wireframes) de toutes les pages , Structure de navigation et ergonomie, Placement des
éléments interactifs
2.2 Charte Graphique
Palette de couleurs détaillée avec codes HEX/RGB, Typographie (polices, tailles, hiérarchie), Style visuel
(buttons, cartes, modales)
2.3 Prototypage Interactif
Maquettes haute-fidélités de tous les états du jeu, États des interactions (hover, active, disabled),
Responsive design (mobile, tablette, desktop)
3. Développement des Fichiers de Code
3.1 Structure HTML Avancée ([Link])
Exigences :
Structure sémantique HTML valide , Utilisation des balises appropriées (main, section, header, etc.),
Accessibilité (aria-labels, roles si nécessaire), Métadonnées et viewport responsive
Éléments à implémenter :
• En-tête du jeu avec titre
• Section des statistiques (mouvements, temps, score)
• Plateau de jeu dynamique
• Contrôles de navigation
• Modales pour la victoire et les règles
Page 1 sur 3
3.2 Feuille de Style CSS Avancée ([Link])
Exigences techniques :
• Variables CSS pour la cohérence du design
• Layout responsive avec Flexbox/Grid
• Animations CSS complexes (3D, keyframes)
• Gestion des états et transitions
Fonctionnalités CSS requises :
• Système de design avec variables thématiques
• Animations 3D pour le retournement des cartes
• Effets de hover et états interactifs
• Design responsive (mobile-first)
• Animations de victoire et feedback visuel
3.3 Code JavaScript Modulaire ([Link])
Architecture attendue :
• Programmation orientée objet
• Gestion d'événements avancée
• Manipulation efficace du DOM
• Persistance des données
Fonctionnalités JavaScript requises :
Gestion du Jeu :
• Classe principale MemoryGame
• Génération et mélange des cartes
• Logique de jeu (retournement, matching, scoring)
• Gestion du timer et du compteur de mouvements
Interactions Utilisateur :
• Gestion des clics sur les cartes
• Contrôles de jeu (démarrage, redémarrage)
• Navigation dans les modales
• Gestion des états du jeu
Persistance et Données :
• Sauvegarde des scores dans le localStorage
• Calcul et affichage du classement
• Gestion des données de jeu
Fonctionnalités Obligatoires du Jeu
Fonctionnalités de Base
1. Plateau de jeu adaptable (8 paires)
2. Système de cartes avec retournement animé en 3D
3. Mécanique de matching avec feedback visuel
4. Compteur de mouvements et chronomètre
5. Calcul de score basé sur performance
Fonctionnalités Avancées
1. Système de scoring intelligent (temps + efficacité)
2. Sauvegarde des meilleurs scores
3. Animations de victoire et d'interaction
4. Design responsive et accessible
5. Modales informatives et règles du jeu
Critères d'Évaluation
Qualité du Code
Page 2 sur 3
• Structure et organisation du code
• Respect des standards et bonnes pratiques
• Commentaires et documentation
• Performance et optimisation
Fonctionnalités Implémentées
• Complétude des fonctionnalités demandées
• Stabilité et absence de bugs
• Expérience utilisateur fluide
Design et Interface
• Qualité visuelle et cohérence
• Responsive design et adaptabilité
• Animations et interactions
Rapport et Documentation
• Clarté et exhaustivité du rapport
• Qualité des maquettes et spécifications
Livraison Finale
• Dossier compressé contenant :
o rapport_specifications.pdf
o maquettes/ (dossier avec les designs)
o code/ (dossier avec les fichiers HTML/CSS/JS)
o [Link] (instructions d'installation et utilisation)
Page 3 sur 3