Compare commits
12 Commits
502a462ec5
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 844c64c7b6 | |||
| 5091fc3d6e | |||
| 58ed4774ba | |||
| e65d165acd | |||
| fb95e88eed | |||
| 286cb2222e | |||
| bedc9876ab | |||
| 366aa894a2 | |||
| 34fd7d1f4e | |||
| 393377d3fc | |||
| da0671f612 | |||
| eab98868ef |
200
index.html
200
index.html
@ -21,9 +21,15 @@
|
||||
<button class="menu-btn" id="playBtn">
|
||||
<span class="btn-icon">▶</span> JOUER
|
||||
</button>
|
||||
<button class="menu-btn" id="customizeBtn">
|
||||
<span class="btn-icon">🎨</span> PERSONNALISER
|
||||
</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>
|
||||
@ -35,6 +41,7 @@
|
||||
<div class="game-header">
|
||||
<button class="back-btn" id="backToMenuBtn">← Menu</button>
|
||||
<h2>OULVIC</h2>
|
||||
<button class="fullscreen-btn" id="fullscreenBtn" title="Plein écran">⛶ Plein écran</button>
|
||||
</div>
|
||||
<div class="user-input-section">
|
||||
<label for="username">Nom d'utilisateur:</label>
|
||||
@ -45,9 +52,22 @@
|
||||
<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>
|
||||
<canvas id="gameCanvas" width="600" height="600"></canvas>
|
||||
<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="750" height="750"></canvas>
|
||||
|
||||
<!-- Contrôles tactiles mobile -->
|
||||
<div class="mobile-controls" id="mobileControls">
|
||||
@ -70,11 +90,25 @@
|
||||
<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>
|
||||
<div class="game-over-username-section">
|
||||
<label for="gameOverUsername">Nom pour le classement:</label>
|
||||
<input type="text" id="gameOverUsername" placeholder="Entrez votre nom" maxlength="15">
|
||||
<button id="saveScoreBtn" class="save-score-btn">💾 Sauvegarder</button>
|
||||
</div>
|
||||
<p class="score-saved-msg" id="scoreSavedMsg" style="display: none; color: #00ff00; font-size: 0.7em; margin-top: 10px;">Score sauvegardé !</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">
|
||||
@ -100,6 +134,170 @@
|
||||
</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>
|
||||
<p><strong>Types de fantômes :</strong></p>
|
||||
<ul>
|
||||
<li><strong>👤 Fantôme Normal</strong> : Poursuit directement le joueur (Niveau 1+)</li>
|
||||
<li><strong>🎯 Chasseur</strong> : Poursuit agressivement avec prédiction de mouvement (Niveau 2+)</li>
|
||||
<li><strong>🛡 Patrouilleur</strong> : Bloque les passages stratégiques et patrouille (Niveau 3+)</li>
|
||||
<li><strong>⚡ Rapide</strong> : 1.5x plus rapide que les autres fantômes (Niveau 4+)</li>
|
||||
<li><strong>👻 Invisible</strong> : Devient invisible 50% du temps, difficile à voir (Niveau 5+)</li>
|
||||
</ul>
|
||||
<p><strong>Nombre de fantômes par niveau :</strong></p>
|
||||
<ul>
|
||||
<li><strong>Niveau 1-2</strong> : 4 fantômes</li>
|
||||
<li><strong>Niveau 3-4</strong> : 5 fantômes</li>
|
||||
<li><strong>Niveau 5-9</strong> : 6 fantômes</li>
|
||||
<li><strong>Niveau 10+</strong> : 7 fantômes</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>
|
||||
|
||||
<!-- MODAL PERSONNALISATION -->
|
||||
<div class="customize-modal" id="customizeModal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>🎨 PERSONNALISER VOTRE JOUEUR</h2>
|
||||
<button class="close-modal-btn" id="closeCustomizeBtn">×</button>
|
||||
</div>
|
||||
<div class="customize-content">
|
||||
<div class="customize-section">
|
||||
<h3>Couleur du joueur</h3>
|
||||
<div class="color-options">
|
||||
<div class="color-option" data-color="yellow" data-name="Jaune">
|
||||
<div class="color-preview" style="background: #ffd700;"></div>
|
||||
<span>Jaune (Classique)</span>
|
||||
</div>
|
||||
<div class="color-option" data-color="red" data-name="Rouge">
|
||||
<div class="color-preview" style="background: #ff4444;"></div>
|
||||
<span>Rouge</span>
|
||||
</div>
|
||||
<div class="color-option" data-color="blue" data-name="Bleu">
|
||||
<div class="color-preview" style="background: #4444ff;"></div>
|
||||
<span>Bleu</span>
|
||||
</div>
|
||||
<div class="color-option" data-color="green" data-name="Vert">
|
||||
<div class="color-preview" style="background: #44ff44;"></div>
|
||||
<span>Vert</span>
|
||||
</div>
|
||||
<div class="color-option" data-color="purple" data-name="Violet">
|
||||
<div class="color-preview" style="background: #aa44ff;"></div>
|
||||
<span>Violet</span>
|
||||
</div>
|
||||
<div class="color-option" data-color="orange" data-name="Orange">
|
||||
<div class="color-preview" style="background: #ff8844;"></div>
|
||||
<span>Orange</span>
|
||||
</div>
|
||||
<div class="color-option active" data-color="rainbow" data-name="Arc-en-ciel">
|
||||
<div class="color-preview rainbow-preview"></div>
|
||||
<span>Arc-en-ciel (Animé)</span>
|
||||
</div>
|
||||
<div class="color-option" data-color="pink" data-name="Rose">
|
||||
<div class="color-preview" style="background: #ff44aa;"></div>
|
||||
<span>Rose</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="customize-section">
|
||||
<h3>Forme du joueur</h3>
|
||||
<div class="shape-options">
|
||||
<div class="shape-option active" data-shape="round" data-name="Rond">
|
||||
<div class="shape-preview round-preview"></div>
|
||||
<span>Rond (Classique)</span>
|
||||
</div>
|
||||
<div class="shape-option" data-shape="triangle" data-name="Triangle">
|
||||
<div class="shape-preview triangle-preview"></div>
|
||||
<span>Triangle</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="customize-preview">
|
||||
<h3>Aperçu</h3>
|
||||
<canvas id="playerPreviewCanvas" width="200" height="200"></canvas>
|
||||
</div>
|
||||
<button class="save-customize-btn" id="saveCustomizeBtn">💾 Sauvegarder</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
600
style.css
600
style.css
@ -19,6 +19,7 @@ body {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='32' viewBox='0 0 36 32'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='1.5' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id='ghostGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff4444;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23cc0000;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M18 4 Q22 2 26 4 Q30 6 30 10 L30 20 Q30 24 28 26 Q26 28 24 28 Q22 30 20 28 Q18 30 16 28 Q14 30 12 28 Q10 30 8 28 Q6 30 4 28 Q2 26 2 22 L2 10 Q2 6 6 4 Q10 2 14 4 Q16 2 18 4 Z' fill='url(%23ghostGrad)' filter='url(%23glow)' stroke='%23ffffff' stroke-width='0.3'/%3E%3Cpath d='M8 22 Q6 24 8 26 Q9 24 8 22 M14 22 Q12 24 14 26 Q15 24 14 22 M20 22 Q18 24 20 26 Q21 24 20 22 M26 22 Q24 24 26 26 Q27 24 26 22' fill='url(%23ghostGrad)' filter='url(%23glow)'/%3E%3Ccircle cx='12' cy='10' r='3' fill='%23ffffff'/%3E%3Ccircle cx='24' cy='10' r='3' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='10' r='1.8' fill='%23000000'/%3E%3Ccircle cx='24' cy='10' r='1.8' fill='%23000000'/%3E%3Cellipse cx='12.5' cy='9.5' rx='0.6' ry='0.8' fill='%23ffffff'/%3E%3Cellipse cx='24.5' cy='9.5' rx='0.6' ry='0.8' fill='%23ffffff'/%3E%3C/svg%3E") 18 16, auto;
|
||||
}
|
||||
|
||||
body::before {
|
||||
@ -143,6 +144,7 @@ body::after {
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='32' viewBox='0 0 36 32'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='1.5' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id='ghostGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff4444;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23cc0000;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M18 4 Q22 2 26 4 Q30 6 30 10 L30 20 Q30 24 28 26 Q26 28 24 28 Q22 30 20 28 Q18 30 16 28 Q14 30 12 28 Q10 30 8 28 Q6 30 4 28 Q2 26 2 22 L2 10 Q2 6 6 4 Q10 2 14 4 Q16 2 18 4 Z' fill='url(%23ghostGrad)' filter='url(%23glow)' stroke='%23ffffff' stroke-width='0.3'/%3E%3Cpath d='M8 22 Q6 24 8 26 Q9 24 8 22 M14 22 Q12 24 14 26 Q15 24 14 22 M20 22 Q18 24 20 26 Q21 24 20 22 M26 22 Q24 24 26 26 Q27 24 26 22' fill='url(%23ghostGrad)' filter='url(%23glow)'/%3E%3Ccircle cx='12' cy='10' r='3' fill='%23ffffff'/%3E%3Ccircle cx='24' cy='10' r='3' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='10' r='1.8' fill='%23000000'/%3E%3Ccircle cx='24' cy='10' r='1.8' fill='%23000000'/%3E%3Cellipse cx='12.5' cy='9.5' rx='0.6' ry='0.8' fill='%23ffffff'/%3E%3Cellipse cx='24.5' cy='9.5' rx='0.6' ry='0.8' fill='%23ffffff'/%3E%3C/svg%3E") 18 16, auto;
|
||||
}
|
||||
|
||||
/* === CANVAS ARRIERE-PLAN MENU === */
|
||||
@ -321,6 +323,26 @@ body::after {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
.fullscreen-btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 0.7em;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffd700;
|
||||
border: 2px solid #ffd700;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fullscreen-btn:hover {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
/* === MODAL CLASSEMENT === */
|
||||
.leaderboard-modal {
|
||||
position: fixed;
|
||||
@ -374,10 +396,100 @@ body::after {
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.close-modal-btn:hover, .close-leaderboard-btn:hover {
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* === MODAL RÈGLES === */
|
||||
.rules-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2000;
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
.rules-content {
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
color: #fff;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
font-size: 0.7em;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.rules-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.rules-content::-webkit-scrollbar-track {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.rules-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 215, 0, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.rules-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 215, 0, 0.7);
|
||||
}
|
||||
|
||||
.rule-section {
|
||||
margin-bottom: 25px;
|
||||
padding: 15px;
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-left: 3px solid #ffd700;
|
||||
border-radius: 5px;
|
||||
animation: fadeIn 0.5s ease-in;
|
||||
}
|
||||
|
||||
.rule-section h3 {
|
||||
color: #ffd700;
|
||||
font-size: 1em;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.rule-section p {
|
||||
color: #fff;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.rule-section ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.rule-section li {
|
||||
margin: 8px 0;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rule-section li:before {
|
||||
content: "•";
|
||||
color: #ffd700;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.rule-section strong {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.close-modal-btn:hover, .close-leaderboard-btn:hover {
|
||||
@ -422,7 +534,7 @@ body::after {
|
||||
0 10px 30px rgba(0, 0, 0, 0.8),
|
||||
0 0 50px rgba(255, 0, 0, 0.2),
|
||||
inset 0 0 30px rgba(255, 215, 0, 0.05);
|
||||
flex-shrink: 0;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border: 3px solid rgba(255, 215, 0, 0.4);
|
||||
@ -452,7 +564,7 @@ h1 {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.score, .level, .lives {
|
||||
.score, .level, .lives, .dots-remaining {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
@ -462,6 +574,74 @@ h1 {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.dots-remaining {
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
.combo-display {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, rgba(255, 215, 0, 0.8), rgba(255, 140, 0, 0.8));
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #ffd700;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
animation: pulse 0.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
.power-ups-display {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.power-up-item {
|
||||
font-size: 0.8em;
|
||||
padding: 8px 15px;
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
border: 2px solid #ffd700;
|
||||
border-radius: 8px;
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.frenzy-indicator {
|
||||
margin: 15px auto;
|
||||
padding: 15px 30px;
|
||||
background: linear-gradient(180deg, rgba(255, 0, 0, 0.8), rgba(255, 100, 0, 0.8));
|
||||
border: 3px solid #ff0000;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
animation: frenzyPulse 0.3s ease-in-out infinite;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
@keyframes frenzyPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(255, 0, 0, 1);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.frenzy-text {
|
||||
font-size: 1em;
|
||||
color: #ffff00;
|
||||
text-shadow: 0 0 15px rgba(255, 255, 0, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.score.updated {
|
||||
animation: scoreUp 0.3s ease-out;
|
||||
}
|
||||
@ -490,6 +670,39 @@ h1 {
|
||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
/* === INDICATEUR DE poursuite === */
|
||||
.pursuit-indicator {
|
||||
margin: 15px auto;
|
||||
padding: 12px 25px;
|
||||
background: linear-gradient(180deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.1));
|
||||
border: 2px solid #ff0000;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
animation: pursuitPulse 1s ease-in-out infinite;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
@keyframes pursuitPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.pursuit-text {
|
||||
font-size: 0.8em;
|
||||
color: #ff0000;
|
||||
text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
#pursuitTimer {
|
||||
color: #ffff00;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
/* === CANVAS AVEC GLOW ET EFFET 3D === */
|
||||
#gameCanvas {
|
||||
border: 4px solid #ffd700;
|
||||
@ -502,6 +715,14 @@ h1 {
|
||||
0 0 40px rgba(255, 215, 0, 0.3),
|
||||
inset 0 0 60px rgba(0, 0, 255, 0.1);
|
||||
animation: canvasGlow 3s ease-in-out infinite alternate;
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
/* === INPUT UTILISATEUR === */
|
||||
@ -720,6 +941,83 @@ h1 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* === CLASSEMENT DANS LE JEU (à droite) === */
|
||||
.game-leaderboard {
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
padding: 15px;
|
||||
border-radius: 15px;
|
||||
border: 2px solid rgba(255, 215, 0, 0.4);
|
||||
box-shadow:
|
||||
0 5px 20px rgba(0, 0, 0, 0.6),
|
||||
0 0 30px rgba(255, 0, 0, 0.1);
|
||||
width: 250px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.game-leaderboard-header {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.game-leaderboard-header h3 {
|
||||
color: #ffd700;
|
||||
font-size: 0.9em;
|
||||
margin: 0;
|
||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.game-leaderboard-content {
|
||||
max-height: 550px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.game-leaderboard-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.game-leaderboard-content::-webkit-scrollbar-track {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.game-leaderboard-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 215, 0, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.game-leaderboard-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 215, 0, 0.7);
|
||||
}
|
||||
|
||||
.game-leaderboard .leaderboard-item {
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.game-leaderboard .leaderboard-rank {
|
||||
min-width: 40px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.game-leaderboard .leaderboard-name {
|
||||
font-size: 0.65em;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.game-leaderboard .leaderboard-level {
|
||||
min-width: 50px;
|
||||
font-size: 0.65em;
|
||||
}
|
||||
|
||||
.game-leaderboard .leaderboard-score {
|
||||
min-width: 60px;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.empty-leaderboard {
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
@ -825,6 +1123,71 @@ h1 {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
.game-over-username-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.game-over-username-section label {
|
||||
font-size: 0.7em;
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#gameOverUsername {
|
||||
padding: 10px 15px;
|
||||
font-size: 0.8em;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
border: 2px solid #ffd700;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
outline: none;
|
||||
max-width: 250px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#gameOverUsername:focus {
|
||||
border-color: #ffed4e;
|
||||
box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.save-score-btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 0.7em;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
background: linear-gradient(180deg, #00ff00 0%, #00cc00 100%);
|
||||
color: #000;
|
||||
border: 2px solid #00ff00;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4px 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.save-score-btn:hover {
|
||||
background: linear-gradient(180deg, #00ff88 0%, #00ff00 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.save-score-btn:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
.save-score-btn:disabled {
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
border-color: #666;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* === CONTROLES TACTILES MOBILE === */
|
||||
.mobile-controls {
|
||||
display: none;
|
||||
@ -878,6 +1241,12 @@ footer {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.game-leaderboard {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.leaderboard-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
@ -949,4 +1318,229 @@ footer {
|
||||
padding: 20px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.rules-content {
|
||||
font-size: 0.6em;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.rule-section {
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.rule-section h3 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
/* === MODAL PERSONNALISATION === */
|
||||
.customize-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.customize-modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.customize-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.customize-section {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
border: 2px solid #ffd700;
|
||||
}
|
||||
|
||||
.customize-section h3 {
|
||||
color: #ffd700;
|
||||
font-size: 1em;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.color-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.color-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 15px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 2px solid rgba(255, 215, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.color-option:hover {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-color: #ffd700;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.color-option.active {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
border-color: #ffd700;
|
||||
box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.rainbow-preview {
|
||||
background: linear-gradient(45deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #0000ff, #8800ff);
|
||||
animation: rainbowRotate 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rainbowRotate {
|
||||
0% { filter: hue-rotate(0deg); }
|
||||
100% { filter: hue-rotate(360deg); }
|
||||
}
|
||||
|
||||
.color-option span {
|
||||
font-size: 0.7em;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.customize-preview {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
border: 2px solid #ffd700;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.customize-preview h3 {
|
||||
color: #ffd700;
|
||||
font-size: 1em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#playerPreviewCanvas {
|
||||
border: 3px solid #ffd700;
|
||||
border-radius: 10px;
|
||||
background: #000;
|
||||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.save-customize-btn {
|
||||
padding: 15px 30px;
|
||||
font-size: 0.9em;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
background: linear-gradient(180deg, #00ff00 0%, #00cc00 100%);
|
||||
color: #000;
|
||||
border: 2px solid #00ff00;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4px 10px rgba(0, 255, 0, 0.3);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.save-customize-btn:hover {
|
||||
background: linear-gradient(180deg, #00ff88 0%, #00ff00 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.save-customize-btn:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
.shape-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.shape-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 15px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 2px solid rgba(255, 215, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.shape-option:hover {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-color: #ffd700;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.shape-option.active {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
border-color: #ffd700;
|
||||
box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.shape-preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.round-preview {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: #ffd700;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.triangle-preview {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 25px solid transparent;
|
||||
border-right: 25px solid transparent;
|
||||
border-bottom: 45px solid #ffd700;
|
||||
border-top: none;
|
||||
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
|
||||
}
|
||||
|
||||
.shape-option span {
|
||||
font-size: 0.7em;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user