Ludo-Sjdl/thedevilbox
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

personalisation du personnage

Browse Source
This commit is contained in:
thedevilbox
2025-12-02 19:32:30 +01:00
parent 58ed4774ba
commit 5091fc3d6e
3 changed files with 516 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
index.html
View File

@ -21,6 +21,9 @@
<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>
@ -87,6 +90,12 @@
<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>
@ -222,6 +231,60 @@
</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-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>