enlever le 3 d

game.js

@@ -7,6 +7,13 @@ const statusElement = document.getElementById('status');
 const restartBtn = document.getElementById('restartBtn');
 const usernameInput = document.getElementById('username');
 const leaderboardElement = document.getElementById('leaderboard');
+const gameOverlay = document.getElementById('gameOverlay');
+const finalScoreElement = document.getElementById('finalScore');
+const finalLevelElement = document.getElementById('finalLevel');
+const overlayRestartBtn = document.getElementById('overlayRestartBtn');
+const confirmUsernameBtn = document.getElementById('confirmUsernameBtn');
+
+let usernameConfirmed = false;
 
 const CELL_SIZE = 20;
 const COLS = 30;
@@ -142,7 +149,7 @@ class Pacman {
         this.nextDirection = 0;
         this.mouthAngle = 0;
         this.mouthOpen = true;
-        this.baseSpeed = 0.15;
+        this.baseSpeed = 0.25;
         this.speed = this.baseSpeed;
         this.pixelX = this.x * CELL_SIZE + CELL_SIZE / 2;
         this.pixelY = this.y * CELL_SIZE + CELL_SIZE / 2;
@@ -253,6 +260,7 @@ class Pacman {
 
         const hue = (this.colorAnimation * 180 / Math.PI) % 360;
         ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
+        
         ctx.beginPath();
         
         if (this.mouthOpen) {
@@ -263,6 +271,7 @@ class Pacman {
         
         ctx.lineTo(0, 0);
         ctx.fill();
+        
         ctx.restore();
     }
 }
@@ -605,7 +614,7 @@ function checkCollisions() {
             if (lives <= 0) {
                 gameRunning = false;
                 statusElement.textContent = 'Game Over !';
-                restartBtn.style.display = 'block';
+                showGameOver();
                 saveScore();
             } else {
                 restartCurrentLevel();
@@ -993,6 +1002,8 @@ function placeBonuses() {
 }
 
 function initGame() {
+    resetUsernameInput(); // Réinitialiser le champ nom
+    
     currentMazeIndex = 0;
     originalMaze = mazeVariants[0];
     maze = originalMaze.map(row => [...row]);
@@ -1008,6 +1019,7 @@ function initGame() {
     statusElement.textContent = 'En jeu';
     statusElement.style.color = '#ffd700';
     restartBtn.style.display = 'none';
+    hideGameOver();
 
     pacman = new Pacman();
     pacman.speed = pacman.baseSpeed * (1 + (level - 1) * 0.05);
@@ -1054,12 +1066,19 @@ function getScores() {
 }
 
 function saveScore() {
-    const username = usernameInput.value.trim() || 'Anonyme';
+    let username;
+    if (!usernameConfirmed) {
+        username = 'Anonyme';
+    } else {
+        username = usernameInput.value.trim() || 'Anonyme';
+    }
+    
     if (score > 0) {
         const scores = getScores();
         scores.push({
             username: username,
             score: score,
+            level: level,
             date: new Date().toISOString()
         });
         scores.sort((a, b) => b.score - a.score);
@@ -1090,12 +1109,17 @@ function updateLeaderboard() {
         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);
         leaderboardElement.appendChild(item);
     });
@@ -1105,6 +1129,117 @@ restartBtn.addEventListener('click', () => {
     initGame();
 });
 
+// === GESTION DU NOM D'UTILISATEUR ===
+function confirmUsername() {
+    const username = usernameInput.value.trim();
+    
+    if (username.length === 0) {
+        alert('Veuillez entrer un nom d\'utilisateur !');
+        usernameInput.focus();
+        return;
+    }
+    
+    usernameConfirmed = true;
+    usernameInput.disabled = true;
+    confirmUsernameBtn.disabled = true;
+    confirmUsernameBtn.textContent = '✓ Confirmé';
+    
+    // Supprimer les anciens messages de confirmation s'ils existent
+    const existingMsg = usernameInput.parentElement.querySelector('.username-confirmed');
+    if (existingMsg) {
+        existingMsg.remove();
+    }
+    
+    // Afficher un message de confirmation
+    const confirmationMsg = document.createElement('div');
+    confirmationMsg.className = 'username-confirmed';
+    confirmationMsg.textContent = `Bienvenue, ${username} !`;
+    usernameInput.parentElement.appendChild(confirmationMsg);
+    
+    // Masquer le message après 3 secondes
+    setTimeout(() => {
+        confirmationMsg.style.opacity = '0';
+        setTimeout(() => confirmationMsg.remove(), 300);
+    }, 3000);
+}
+
+function resetUsernameInput() {
+    usernameConfirmed = false;
+    usernameInput.disabled = false;
+    usernameInput.value = '';
+    confirmUsernameBtn.disabled = false;
+    confirmUsernameBtn.textContent = '✓ Confirmer';
+    
+    // Supprimer les messages de confirmation existants
+    const existingMsg = usernameInput.parentElement.querySelector('.username-confirmed');
+    if (existingMsg) {
+        existingMsg.remove();
+    }
+    
+    // Focus sur le champ après un court délai
+    setTimeout(() => usernameInput.focus(), 100);
+}
+
+// Confirmation avec le bouton
+confirmUsernameBtn.addEventListener('click', confirmUsername);
+
+// Confirmation avec la touche Entrée
+usernameInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter' && !usernameConfirmed) {
+        confirmUsername();
+    }
+});
+
+// === GAME OVER OVERLAY ===
+function showGameOver() {
+    finalScoreElement.textContent = score;
+    finalLevelElement.textContent = level;
+    gameOverlay.classList.add('active');
+    restartBtn.style.display = 'block';
+}
+
+function hideGameOver() {
+    gameOverlay.classList.remove('active');
+}
+
+overlayRestartBtn.addEventListener('click', () => {
+    initGame();
+});
+
+// === CONTROLES TACTILES MOBILE ===
+document.querySelectorAll('.ctrl-btn').forEach(btn => {
+    // Touch events
+    btn.addEventListener('touchstart', (e) => {
+        e.preventDefault();
+        const dir = parseInt(btn.dataset.dir);
+        if (!isNaN(dir) && gameRunning) {
+            pacman.nextDirection = dir;
+        }
+    });
+    
+    // Click events (for testing on desktop)
+    btn.addEventListener('click', () => {
+        const dir = parseInt(btn.dataset.dir);
+        if (!isNaN(dir) && gameRunning) {
+            pacman.nextDirection = dir;
+        }
+    });
+});
+
+// === ANIMATION DU SCORE ===
+let lastScore = 0;
+function animateScore() {
+    if (score !== lastScore) {
+        const scoreParent = scoreElement.parentElement;
+        scoreParent.classList.remove('updated');
+        void scoreParent.offsetWidth; // Force reflow
+        scoreParent.classList.add('updated');
+        lastScore = score;
+    }
+    requestAnimationFrame(animateScore);
+}
+animateScore();
+
 updateLeaderboard();
 initGame();