interface qui marche
This commit is contained in:
97
game.js
97
game.js
@ -13,6 +13,18 @@ const finalLevelElement = document.getElementById('finalLevel');
|
|||||||
const overlayRestartBtn = document.getElementById('overlayRestartBtn');
|
const overlayRestartBtn = document.getElementById('overlayRestartBtn');
|
||||||
const confirmUsernameBtn = document.getElementById('confirmUsernameBtn');
|
const confirmUsernameBtn = document.getElementById('confirmUsernameBtn');
|
||||||
|
|
||||||
|
// === GESTION DU MENU ===
|
||||||
|
const mainMenu = document.getElementById('mainMenu');
|
||||||
|
const gameWrapper = document.getElementById('gameWrapper');
|
||||||
|
const playBtn = document.getElementById('playBtn');
|
||||||
|
const scoresBtn = document.getElementById('scoresBtn');
|
||||||
|
const backToMenuBtn = document.getElementById('backToMenuBtn');
|
||||||
|
const leaderboardModal = document.getElementById('leaderboardModal');
|
||||||
|
const closeModalBtn = document.getElementById('closeModalBtn');
|
||||||
|
const menuLeaderboard = document.getElementById('menuLeaderboard');
|
||||||
|
const leaderboardContainer = document.getElementById('leaderboardContainer');
|
||||||
|
const closeLeaderboardBtn = document.getElementById('closeLeaderboardBtn');
|
||||||
|
|
||||||
let usernameConfirmed = false;
|
let usernameConfirmed = false;
|
||||||
|
|
||||||
const CELL_SIZE = 20;
|
const CELL_SIZE = 20;
|
||||||
@ -1240,6 +1252,89 @@ function animateScore() {
|
|||||||
}
|
}
|
||||||
animateScore();
|
animateScore();
|
||||||
|
|
||||||
updateLeaderboard();
|
// === GESTION DU MENU ===
|
||||||
|
// Afficher le jeu
|
||||||
|
playBtn.addEventListener('click', () => {
|
||||||
|
mainMenu.style.display = 'none';
|
||||||
|
gameWrapper.style.display = 'block';
|
||||||
|
resetUsernameInput();
|
||||||
|
// Toujours initialiser le jeu quand on clique sur JOUER
|
||||||
|
gameRunning = false; // S'assurer que le jeu est arrêté
|
||||||
initGame();
|
initGame();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Retour au menu depuis le jeu
|
||||||
|
backToMenuBtn.addEventListener('click', () => {
|
||||||
|
if (confirm('Voulez-vous vraiment retourner au menu ? Votre partie en cours sera perdue.')) {
|
||||||
|
gameWrapper.style.display = 'none';
|
||||||
|
mainMenu.style.display = 'flex';
|
||||||
|
gameRunning = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Afficher le classement depuis le menu
|
||||||
|
scoresBtn.addEventListener('click', () => {
|
||||||
|
updateMenuLeaderboard();
|
||||||
|
leaderboardModal.style.display = 'flex';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fermer le modal de classement
|
||||||
|
closeModalBtn.addEventListener('click', () => {
|
||||||
|
leaderboardModal.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fermer le classement dans le jeu
|
||||||
|
if (closeLeaderboardBtn) {
|
||||||
|
closeLeaderboardBtn.addEventListener('click', () => {
|
||||||
|
leaderboardContainer.style.display = 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fermer le modal en cliquant à l'extérieur
|
||||||
|
leaderboardModal.addEventListener('click', (e) => {
|
||||||
|
if (e.target === leaderboardModal) {
|
||||||
|
leaderboardModal.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fonction pour mettre à jour le classement du menu
|
||||||
|
function updateMenuLeaderboard() {
|
||||||
|
const scores = getScores();
|
||||||
|
menuLeaderboard.innerHTML = '';
|
||||||
|
|
||||||
|
if (scores.length === 0) {
|
||||||
|
menuLeaderboard.innerHTML = '<div class="empty-leaderboard">Aucun score enregistré</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
scores.forEach((entry, index) => {
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.className = 'leaderboard-item' + (index < 3 ? ' top' : '');
|
||||||
|
|
||||||
|
const rank = document.createElement('div');
|
||||||
|
rank.className = 'leaderboard-rank';
|
||||||
|
rank.textContent = (index + 1) + '.';
|
||||||
|
|
||||||
|
const name = document.createElement('div');
|
||||||
|
name.className = 'leaderboard-name';
|
||||||
|
name.textContent = entry.username;
|
||||||
|
|
||||||
|
const levelDiv = document.createElement('div');
|
||||||
|
levelDiv.className = 'leaderboard-level';
|
||||||
|
levelDiv.textContent = 'Niv. ' + (entry.level || 1);
|
||||||
|
|
||||||
|
const scoreDiv = document.createElement('div');
|
||||||
|
scoreDiv.className = 'leaderboard-score';
|
||||||
|
scoreDiv.textContent = entry.score;
|
||||||
|
|
||||||
|
item.appendChild(rank);
|
||||||
|
item.appendChild(name);
|
||||||
|
item.appendChild(levelDiv);
|
||||||
|
item.appendChild(scoreDiv);
|
||||||
|
menuLeaderboard.appendChild(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialiser seulement le menu au chargement
|
||||||
|
updateMenuLeaderboard();
|
||||||
|
|
||||||
|
|||||||
38
index.html
38
index.html
@ -7,9 +7,25 @@
|
|||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- MENU PRINCIPAL -->
|
||||||
|
<div class="main-menu" id="mainMenu">
|
||||||
|
<div class="menu-container">
|
||||||
|
<h1>OULVIC</h1>
|
||||||
|
<div class="menu-buttons">
|
||||||
|
<button class="menu-btn" id="playBtn">JOUER</button>
|
||||||
|
<button class="menu-btn" id="scoresBtn">CLASSEMENT</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="main-wrapper">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>OULVIC</h1>
|
<div class="game-header">
|
||||||
|
<button class="back-btn" id="backToMenuBtn">← Menu</button>
|
||||||
|
<h2>OULVIC</h2>
|
||||||
|
</div>
|
||||||
<div class="user-input-section">
|
<div class="user-input-section">
|
||||||
<label for="username">Nom d'utilisateur:</label>
|
<label for="username">Nom d'utilisateur:</label>
|
||||||
<input type="text" id="username" placeholder="Entrez votre nom" maxlength="15">
|
<input type="text" id="username" placeholder="Entrez votre nom" maxlength="15">
|
||||||
@ -48,14 +64,32 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="leaderboard-container">
|
|
||||||
|
<!-- CLASSEMENT (caché par défaut) -->
|
||||||
|
<div class="leaderboard-container" id="leaderboardContainer" style="display: none;">
|
||||||
|
<div class="leaderboard-header">
|
||||||
<h2>Classement</h2>
|
<h2>Classement</h2>
|
||||||
|
<button class="close-leaderboard-btn" id="closeLeaderboardBtn">✕</button>
|
||||||
|
</div>
|
||||||
<div id="leaderboard"></div>
|
<div id="leaderboard"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer>
|
||||||
<p>By Ludo and Syoul</p>
|
<p>By Ludo and Syoul</p>
|
||||||
</footer>
|
</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>
|
||||||
|
|
||||||
<script src="game.js"></script>
|
<script src="game.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
210
style.css
210
style.css
@ -125,6 +125,195 @@ body::after {
|
|||||||
100% { transform: scale(1); }
|
100% { transform: scale(1); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* === MENU PRINCIPAL === */
|
||||||
|
.main-menu {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #0a0a0a;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 20% 30%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 80% 70%, rgba(0, 0, 255, 0.1) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 50% 50%, rgba(128, 0, 128, 0.1) 0%, transparent 50%);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-container {
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
padding: 50px 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 3px solid rgba(255, 215, 0, 0.4);
|
||||||
|
box-shadow:
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-container h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
animation: neonFlicker 3s infinite, rainbow 8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-btn {
|
||||||
|
padding: 20px 50px;
|
||||||
|
font-size: 1em;
|
||||||
|
font-family: 'Press Start 2P', cursive;
|
||||||
|
background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
|
||||||
|
color: #000;
|
||||||
|
border: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: all 0.3s;
|
||||||
|
box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
|
||||||
|
min-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-btn:hover {
|
||||||
|
background: linear-gradient(180deg, #ffed4e 0%, #ffa500 100%);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-btn:active {
|
||||||
|
transform: translateY(0) scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === WRAPPER DE JEU === */
|
||||||
|
.game-wrapper {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === HEADER DU JEU === */
|
||||||
|
.game-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-header h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin: 0;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
animation: neonFlicker 3s infinite, rainbow 8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn:hover {
|
||||||
|
background: rgba(255, 215, 0, 0.2);
|
||||||
|
transform: translateX(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === MODAL CLASSEMENT === */
|
||||||
|
.leaderboard-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 2000;
|
||||||
|
animation: fadeIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 3px solid rgba(255, 215, 0, 0.4);
|
||||||
|
box-shadow:
|
||||||
|
0 10px 30px rgba(0, 0, 0, 0.8),
|
||||||
|
0 0 50px rgba(255, 0, 0, 0.2);
|
||||||
|
max-width: 500px;
|
||||||
|
width: 90%;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header h2 {
|
||||||
|
color: #ffd700;
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-modal-btn, .close-leaderboard-btn {
|
||||||
|
background: rgba(255, 0, 0, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
border: 2px solid #ff0000;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: 'Press Start 2P', cursive;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-modal-btn:hover, .close-leaderboard-btn:hover {
|
||||||
|
background: rgba(255, 0, 0, 0.5);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuLeaderboard {
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderboard-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderboard-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* === LAYOUT === */
|
/* === LAYOUT === */
|
||||||
.main-wrapper {
|
.main-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -340,7 +529,7 @@ h1 {
|
|||||||
.leaderboard-container h2 {
|
.leaderboard-container h2 {
|
||||||
color: #ffd700;
|
color: #ffd700;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 20px;
|
margin: 0;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
text-shadow:
|
text-shadow:
|
||||||
0 0 10px rgba(255, 215, 0, 0.5),
|
0 0 10px rgba(255, 215, 0, 0.5),
|
||||||
@ -609,6 +798,20 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
|
.menu-container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-container h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-btn {
|
||||||
|
min-width: 200px;
|
||||||
|
padding: 15px 30px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
#gameCanvas {
|
#gameCanvas {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -639,4 +842,9 @@ footer {
|
|||||||
.final-score, .final-level {
|
.final-score, .final-level {
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
padding: 20px;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user