Gauthier/Site_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refonte visuelle du jeu Memory Pictogrammes GHS

Browse Source 
Corrige les pictogrammes cassés (mauvais noms de fichiers dans
utils.js) et le conflit de classe CSS .progress-bar avec le header
qui cassait la barre de progression du jeu. Réorganise l'interface
dans un panneau de jeu unifié, ajoute des icônes aux statistiques
et au sélecteur de difficulté, et rend le dos des cartes plus ludique.
This commit is contained in:
gauthier.chombart
2026-07-07 16:58:40 +02:00
parent 954c7d2b1a
commit 2227aa89d5
5 changed files with 152 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
exercices/memory-pictogrammes/memory.html
View File

@@ -36,76 +36,82 @@
<main class="game-container">
<!-- INTRO SECTION -->
<section class="intro-section">
<h1>🎮 Memory Pictogrammes GHS</h1>
<div class="intro-badge">🎮</div>
<h1>Memory Pictogrammes GHS</h1>
<p class="subtitle">Maîtrisez les 9 symboles de danger</p>
<div class="intro-box">
<p>
<strong>Objectif :</strong> Retrouvez les paires en associant chaque pictogramme à sa signification.
Plus rapide vous êtes, plus de points vous gagnez! 🏆
</p>
</div>
<!-- DIFFICULTY SELECTOR -->
<div class="difficulty-selector">
<label>Choisir le niveau :</label>
<div class="btn-group">
<button class="btn btn-difficulty" data-difficulty="easy">
<span class="btn-label">Facile</span>
<span class="btn-desc">4 paires</span>
</button>
<button class="btn btn-difficulty active" data-difficulty="normal">
<span class="btn-label">Normal</span>
<span class="btn-desc">9 paires</span>
</button>
<button class="btn btn-difficulty" data-difficulty="hard">
<span class="btn-label">Difficile</span>
<span class="btn-desc">2 min chrono</span>
</button>
</div>
</div>
</section>
<!-- GAME SECTION -->
<section class="game-section">
<!-- HUD (Stats en temps réel) -->
<div class="game-hud">
<div class="stat-box">
<div class="label">Score</div>
<div class="value" id="score-display">0</div>
<div class="game-panel">
<!-- DIFFICULTY SELECTOR -->
<div class="difficulty-selector">
<label>Choisir le niveau</label>
<div class="btn-group">
<button class="btn btn-difficulty" data-difficulty="easy">
<span class="btn-icon">🌱</span>
<span class="btn-label">Facile</span>
<span class="btn-desc">4 paires</span>
</button>
<button class="btn btn-difficulty active" data-difficulty="normal">
<span class="btn-icon">🎯</span>
<span class="btn-label">Normal</span>
<span class="btn-desc">9 paires</span>
</button>
<button class="btn btn-difficulty" data-difficulty="hard">
<span class="btn-icon">🔥</span>
<span class="btn-label">Difficile</span>
<span class="btn-desc">2 min chrono</span>
</button>
</div>
</div>
<div class="stat-box">
<div class="label">Mouvements</div>
<div class="value" id="moves-display">0</div>
</div>
<div class="stat-box">
<div class="label">Temps</div>
<div class="value" id="timer-display">00:00</div>
</div>
<div class="stat-box">
<div class="label">Paires</div>
<div class="value" id="pairs-display">0/9</div>
</div>
</div>
<!-- PROGRESS BAR -->
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<!-- HUD (Stats en temps réel) -->
<div class="game-hud">
<div class="stat-box">
<div class="label">🏆 Score</div>
<div class="value" id="score-display">0</div>
</div>
<div class="stat-box">
<div class="label">👆 Mouvements</div>
<div class="value" id="moves-display">0</div>
</div>
<div class="stat-box">
<div class="label">⏱ Temps</div>
<div class="value" id="timer-display">00:00</div>
</div>
<div class="stat-box">
<div class="label">🧩 Paires</div>
<div class="value" id="pairs-display">0/9</div>
</div>
</div>
<!-- GAME GRID -->
<div class="game-grid" id="game-grid">
<!-- Cartes générées par JS -->
</div>
<!-- PROGRESS BAR -->
<div class="progress-container">
<div class="game-progress-fill" id="progress-bar"></div>
</div>
<!-- CONTROLS -->
<div class="game-controls">
<button class="btn btn-primary" id="restart-btn">
🔄 Recommencer
</button>
<button class="btn btn-secondary" id="pause-btn">
⏸ Pause
</button>
<!-- GAME GRID -->
<div class="game-grid" id="game-grid">
<!-- Cartes générées par JS -->
</div>
<!-- CONTROLS -->
<div class="game-controls">
<button class="btn btn-primary" id="restart-btn">
🔄 Recommencer
</button>
<button class="btn btn-secondary" id="pause-btn">
⏸ Pause
</button>
</div>
</div>
</section>