diff --git a/game.js b/game.js
index e61c0d1..01812cc 100644
--- a/game.js
+++ b/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();
diff --git a/index.html b/index.html
index 2b7eb58..bada8ba 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
+
Score: 0
@@ -21,9 +22,30 @@
Prêt à jouer
+
+
+
+
Utilisez les flèches directionnelles pour déplacer Oulvic
-
+
+
+
+
+
+
+
GAME OVER
+
Score Final: 0
+
Niveau Atteint: 1
+
+
@@ -37,4 +59,3 @@