217 lines
11 KiB
HTML
217 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Jeu Oulvic</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<!-- MENU PRINCIPAL -->
|
||
<div class="main-menu" id="mainMenu">
|
||
<canvas id="menuBackgroundCanvas"></canvas>
|
||
<div class="menu-container">
|
||
<h1>OULVIC</h1>
|
||
<p class="menu-subtitle">Évitez les fantômes et collectez les pastilles !</p>
|
||
<div class="best-score-display" id="bestScoreDisplay">
|
||
<span class="best-score-label">Meilleur Score:</span>
|
||
<span class="best-score-value" id="bestScoreValue">0</span>
|
||
</div>
|
||
<div class="menu-buttons">
|
||
<button class="menu-btn" id="playBtn">
|
||
<span class="btn-icon">▶</span> JOUER
|
||
</button>
|
||
<button class="menu-btn" id="scoresBtn">
|
||
<span class="btn-icon">🏆</span> CLASSEMENT
|
||
</button>
|
||
<button class="menu-btn" id="rulesBtn">
|
||
<span class="btn-icon">📖</span> RÈGLES
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- INTERFACE DE JEU (cachée au départ) -->
|
||
<div class="game-wrapper" id="gameWrapper" style="display: none;">
|
||
<div class="main-wrapper">
|
||
<div class="container">
|
||
<div class="game-header">
|
||
<button class="back-btn" id="backToMenuBtn">← Menu</button>
|
||
<h2>OULVIC</h2>
|
||
</div>
|
||
<div class="user-input-section">
|
||
<label for="username">Nom d'utilisateur:</label>
|
||
<input type="text" id="username" placeholder="Entrez votre nom" maxlength="15">
|
||
<button id="confirmUsernameBtn" class="confirm-btn">✓ Confirmer</button>
|
||
</div>
|
||
<div class="game-info">
|
||
<div class="score">Score: <span id="score">0</span></div>
|
||
<div class="level">Niveau: <span id="level">1</span></div>
|
||
<div class="lives">Vies: <span id="lives"><span class="heart">♥</span><span class="heart">♥</span><span class="heart">♥</span></span></div>
|
||
<div class="dots-remaining">Pastilles: <span id="dotsRemaining">0</span></div>
|
||
<div class="combo-display" id="comboDisplay" style="display: none;">Combo x<span id="comboValue">1</span></div>
|
||
<div class="status" id="status">Prêt à jouer</div>
|
||
</div>
|
||
<div class="power-ups-display" id="powerUpsDisplay">
|
||
<div class="power-up-item" id="speedBoostIndicator" style="display: none;">⚡ Vitesse</div>
|
||
<div class="power-up-item" id="shieldIndicator" style="display: none;">🛡 Bouclier</div>
|
||
<div class="power-up-item" id="multiplierIndicator" style="display: none;">✨ x<span id="multiplierValue">2</span></div>
|
||
</div>
|
||
<div class="frenzy-indicator" id="frenzyIndicator" style="display: none;">
|
||
<span class="frenzy-text">🔥 FRENZY MODE - Score x3 !</span>
|
||
</div>
|
||
<div class="pursuit-indicator" id="pursuitIndicator" style="display: none;">
|
||
<span class="pursuit-text">👻 Poursuite active: <span id="pursuitTimer">0</span>s</span>
|
||
</div>
|
||
<canvas id="gameCanvas" width="600" height="600"></canvas>
|
||
|
||
<!-- Contrôles tactiles mobile -->
|
||
<div class="mobile-controls" id="mobileControls">
|
||
<button class="ctrl-btn" data-dir="0">▲</button>
|
||
<div class="ctrl-row">
|
||
<button class="ctrl-btn" data-dir="3">◀</button>
|
||
<button class="ctrl-btn" data-dir="1">▶</button>
|
||
</div>
|
||
<button class="ctrl-btn" data-dir="2">▼</button>
|
||
</div>
|
||
|
||
<div class="instructions">
|
||
<p>Utilisez les flèches directionnelles pour déplacer Oulvic</p>
|
||
<button id="restartBtn" style="display: none;">REJOUER</button>
|
||
</div>
|
||
|
||
<!-- Overlay Game Over -->
|
||
<div class="game-overlay" id="gameOverlay">
|
||
<div class="overlay-content">
|
||
<h2 class="game-over-title">GAME OVER</h2>
|
||
<p class="final-score">Score Final: <span id="finalScore">0</span></p>
|
||
<p class="final-level">Niveau Atteint: <span id="finalLevel">1</span></p>
|
||
<button id="overlayRestartBtn">REJOUER</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CLASSEMENT À DROITE (hors du container) -->
|
||
<div class="game-leaderboard" id="gameLeaderboard">
|
||
<div class="game-leaderboard-header">
|
||
<h3>🏆 Classement</h3>
|
||
</div>
|
||
<div id="gameLeaderboardContent" class="game-leaderboard-content"></div>
|
||
</div>
|
||
|
||
<!-- CLASSEMENT (caché par défaut) -->
|
||
<div class="leaderboard-container" id="leaderboardContainer" style="display: none;">
|
||
<div class="leaderboard-header">
|
||
<h2>Classement</h2>
|
||
<button class="close-leaderboard-btn" id="closeLeaderboardBtn">✕</button>
|
||
</div>
|
||
<div id="leaderboard"></div>
|
||
</div>
|
||
</div>
|
||
<footer>
|
||
<p>By Ludo and Syoul</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- MODAL CLASSEMENT (pour le menu) -->
|
||
<div class="leaderboard-modal" id="leaderboardModal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Classement</h2>
|
||
<button class="close-modal-btn" id="closeModalBtn">✕</button>
|
||
</div>
|
||
<div id="menuLeaderboard"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL RÈGLES -->
|
||
<div class="rules-modal" id="rulesModal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>📖 RÈGLES DU JEU</h2>
|
||
<button class="close-modal-btn" id="closeRulesBtn">×</button>
|
||
</div>
|
||
<div class="rules-content">
|
||
<div class="rule-section">
|
||
<h3>🎯 Objectif</h3>
|
||
<p>Collectez toutes les pastilles blanches pour gagner des points et progresser dans les niveaux.</p>
|
||
</div>
|
||
|
||
<div class="rule-section">
|
||
<h3>🎮 Contrôles</h3>
|
||
<ul>
|
||
<li><strong>Flèches directionnelles</strong> : Déplacer Pacman</li>
|
||
<li><strong>Espace ou Échap</strong> : Mettre en pause</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="rule-section">
|
||
<h3>🍒 Bonus de base</h3>
|
||
<ul>
|
||
<li><strong>Cerise rouge</strong> : Rend les fantômes vulnérables pendant quelques secondes</li>
|
||
<li><strong>Manger un fantôme vulnérable</strong> : +200 points</li>
|
||
<li><strong>4 cerises mangées</strong> : Passage au niveau suivant</li>
|
||
<li><strong>Étoile Ludo</strong> : +200 points (apparaît dès le niveau 1)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="rule-section">
|
||
<h3>⚡ Power-ups (Niveau 2+)</h3>
|
||
<ul>
|
||
<li><strong>⚡ Étoile de vitesse</strong> : Pacman devient 2x plus rapide pendant 10 secondes</li>
|
||
<li><strong>🛡 Bouclier</strong> : Protège d'une collision avec un fantôme (15 secondes)</li>
|
||
<li><strong>💣 Bombe</strong> : Repousse tous les fantômes proches (Niveau 3+)</li>
|
||
<li><strong>✨ Multiplicateur</strong> : Double tous les points pendant 30 secondes (Niveau 3+)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="rule-section">
|
||
<h3>🔥 Mode Frenzy</h3>
|
||
<p>Toutes les <strong>30 secondes</strong>, le mode Frenzy s'active automatiquement : tous les fantômes deviennent vulnérables et vous gagnez <strong>3x plus de points</strong> pendant 10 secondes !</p>
|
||
</div>
|
||
|
||
<div class="rule-section">
|
||
<h3>💥 Système de Combo</h3>
|
||
<p>Collectez les pastilles rapidement pour créer un combo ! Chaque combo augmente votre multiplicateur de score (jusqu'à x5). Le combo se réinitialise si vous attendez trop longtemps entre deux collectes.</p>
|
||
</div>
|
||
|
||
<div class="rule-section">
|
||
<h3>👻 Fantômes</h3>
|
||
<p>Évitez les fantômes ! Si vous les touchez, vous perdez une vie. Vous avez 3 vies au départ.</p>
|
||
<ul>
|
||
<li><strong>Niveau 1-2</strong> : 4 fantômes normaux</li>
|
||
<li><strong>Niveau 3-4</strong> : 5 fantômes (dont des chasseurs et patrouilleurs)</li>
|
||
<li><strong>Niveau 5+</strong> : 6-7 fantômes (rapides, invisibles, etc.)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="rule-section">
|
||
<h3>⭐ Système de score</h3>
|
||
<ul>
|
||
<li>Pastille : <strong>10 points</strong> (x combo x Frenzy x multiplicateur)</li>
|
||
<li>Fantôme vulnérable : <strong>200 points</strong></li>
|
||
<li>Cerise : <strong>100 points</strong></li>
|
||
<li>Étoile Ludo : <strong>200 points</strong></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="rule-section">
|
||
<h3>🌐 Zones spéciales (Niveau 4+)</h3>
|
||
<ul>
|
||
<li><strong>Zone de téléportation</strong> (violet) : Vous téléporte à un endroit aléatoire</li>
|
||
<li><strong>Zone bonus</strong> (doré) : Double les points dans cette zone</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="rule-section">
|
||
<h3>🏆 Niveaux</h3>
|
||
<p>Le jeu devient plus difficile à chaque niveau : plus de fantômes, nouveaux types de fantômes, et de nouveaux power-ups apparaissent !</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="game.js"></script>
|
||
</body>
|
||
</html>
|