OULVIC est un clone de Pac-Man développé entièrement en HTML5, CSS3 et JavaScript vanilla. Le jeu utilise l'élément <canvas> pour le rendu graphique et propose une expérience de jeu complète avec :

Un personnage jouable personnalisable (couleurs et formes)
Système de fantômes avec IA avancée et types variés
3 labyrinthes différents qui alternent
Système de niveaux progressifs avec difficulté croissante
Power-ups et bonus multiples
Système de combo et mode Frenzy
Zones spéciales (téléportation, bonus, danger)
Classement des scores (localStorage)
Interface responsive avec support mobile
Menu principal animé
Mode plein écran

✨ Fonctionnalités

Gameplay

Déplacement fluide : Mouvement pixel par pixel avec interpolation
Système de vies : 3 vies représentées par des cœurs animés
Points : Collecte de pastilles avec système de combo
Progression de niveau : Passer au niveau suivant en mangeant 4 cerises
Mode pause : Espace ou Échap pour mettre en pause

Bonus de base

Bonus	Points	Effet	Niveau
🍒 Cerise	+100	Rend les fantômes vulnérables. 4 cerises = niveau suivant	1+
⭐ Étoile "L"	+200	Bonus supplémentaire	1+

Power-ups (Niveau 2+)

Power-up	Effet	Durée	Niveau
⚡ Étoile de vitesse	Pacman devient 2x plus rapide	10 secondes	2+
🛡 Bouclier	Protège d'une collision avec un fantôme	15 secondes	2+
💣 Bombe	Repousse tous les fantômes proches	Instantané	3+
✨ Multiplicateur	Double tous les points	30 secondes	3+

Système de Combo

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 plus de 3 secondes entre deux collectes
Points de base : 10 × combo × Frenzy × multiplicateur

Mode Frenzy

S'active automatiquement toutes les 30 secondes
Tous les fantômes deviennent vulnérables pendant 10 secondes
Score multiplié par 3 pendant la durée du mode
Indicateur visuel avec animation

Fantômes

Types de fantômes

Type	Description	Niveau
👤 Normal	Poursuit directement le joueur	1+
🎯 Chasseur	Poursuit agressivement avec prédiction de mouvement	2+
🛡 Patrouilleur	Bloque les passages stratégiques et patrouille	3+
⚡ Rapide	1.5x plus rapide que les autres fantômes	4+
👻 Invisible	Devient invisible 50% du temps, difficile à voir	5+

Nombre de fantômes par niveau

Niveau 1-2 : 4 fantômes
Niveau 3-4 : 5 fantômes
Niveau 5-9 : 6 fantômes
Niveau 10+ : 7 fantômes

Comportement

Poursuite : Les fantômes poursuivent activement le joueur
Vulnérabilité : Après avoir mangé une cerise, les fantômes deviennent vulnérables et fuient
Manger un fantôme vulnérable : +200 points
Prédiction : Les chasseurs prédisent la position future du joueur

Zones spéciales (Niveau 4+)

Zone	Couleur	Effet
Téléportation	Violet	Vous téléporte à un endroit aléatoire
Bonus	Doré	Double les points dans cette zone
Danger	Rouge	Ralentit Pacman temporairement

Labyrinthes

3 variantes de labyrinthes qui alternent à chaque niveau
Génération dynamique avec remplissage des espaces vides
Randomisation légère pour plus de variété
Zones spéciales ajoutées selon le niveau

Personnalisation

8 couleurs : Jaune, Rouge, Bleu, Vert, Violet, Orange, Rose, Arc-en-ciel (animé)
2 formes : Rond (classique) ou Triangle
Sauvegarde des préférences dans localStorage
Aperçu en temps réel dans le menu de personnalisation

Interface

Menu principal avec animation de fond
Classement en temps réel pendant le jeu
Indicateurs visuels pour les power-ups actifs
Compteur de pastilles restantes
Timer de poursuite quand les fantômes sont vulnérables
Mode plein écran disponible
Contrôles tactiles pour mobile

📁 Structure du projet

pacmanludo/
├── index.html    # Page HTML principale avec menu et interface
├── style.css     # Feuille de styles complète (1547 lignes)
├── game.js       # Logique du jeu (2954 lignes)
└── README.md     # Documentation

🚀 Installation

Cloner ou télécharger le projet
Ouvrir index.html dans un navigateur web moderne
Jouer !

Aucune dépendance externe n'est requise. Le jeu fonctionne entièrement côté client.

Navigateurs supportés :

Chrome/Edge (recommandé)
Firefox
Safari
Opéra

🎯 Comment jouer

Contrôles

Clavier

Touche	Action
↑ Flèche Haut	Déplacer vers le haut
↓ Flèche Bas	Déplacer vers le bas
← Flèche Gauche	Déplacer vers la gauche
→ Flèche Droite	Déplacer vers la droite
Espace / Échap	Mettre en pause / Reprendre

Mobile

Utilisez les boutons directionnels tactiles affichés en bas de l'écran

Objectif

Collectez toutes les pastilles blanches pour marquer des points
Mangez les cerises pour activer la poursuite et progresser
Collectez les power-ups pour obtenir des avantages
Évitez les fantômes (ou mangez-les quand ils sont vulnérables) !
Atteignez le score le plus élevé possible

Progression

4 cerises mangées = passage au niveau suivant
À chaque niveau :
- Pac-Man accélère légèrement (+5% par niveau)
- Les fantômes deviennent plus rapides (vitesse fixe x1.4)
- Le labyrinthe change (cycle de 3 labyrinthes)
- Nouveaux types de fantômes apparaissent
- De nouveaux power-ups deviennent disponibles

Système de score

Action	Points de base	Multiplicateurs
Pastille	10	× combo × Frenzy × multiplicateur
Fantôme vulnérable	200	× Frenzy × multiplicateur
Cerise	100	× Frenzy × multiplicateur
Étoile Ludo	200	× Frenzy × multiplicateur

🏗️ Architecture du code

`index.html`

Structure HTML de la page :

├── main-menu (menu principal)
│   ├── menuBackgroundCanvas (animation de fond)
│   └── menu-container
│       ├── Titre "OULVIC"
│       ├── Meilleur score
│       └── Boutons (Jouer, Personnaliser, Classement, Règles)
├── game-wrapper (interface de jeu)
│   ├── main-wrapper
│   │   ├── container (zone de jeu)
│   │   │   ├── game-header
│   │   │   ├── user-input-section
│   │   │   ├── game-info (score, niveau, vies, pastilles)
│   │   │   ├── power-ups-display
│   │   │   ├── frenzy-indicator
│   │   │   ├── pursuit-indicator
│   │   │   ├── gameCanvas (750x750)
│   │   │   ├── mobile-controls
│   │   │   └── game-overlay (Game Over)
│   │   └── game-leaderboard (classement en temps réel)
│   └── leaderboard-container (classement complet)
├── leaderboard-modal (modal classement)
├── rules-modal (modal règles)
└── customize-modal (modal personnalisation)

`style.css`

Section	Description
Reset & Body	Styles de base, fond sombre avec effets, curseur personnalisé
Animations	Animations CSS (neonFlicker, rainbow, heartbeat, etc.)
Menu Principal	Styles du menu avec animation de fond
Layout	Flexbox pour disposition responsive
Game Info	Styles pour score, niveau, vies, combo
Canvas	Bordure dorée, ombres, effets de glow
Leaderboard	Tableau des scores stylisé avec médailles
Power-ups	Indicateurs visuels pour les power-ups actifs
Responsive	Media queries pour mobile et tablette
Modals	Styles pour les modales (règles, classement, personnalisation)

`game.js`

Constantes principales

CELL_SIZE = 25      // Taille d'une cellule en pixels
COLS = 30           // Nombre de colonnes
ROWS = 30           // Nombre de lignes

// Types de cellules
WALL = 1            // Mur (bleu)
DOT = 2             // Pastille (blanc)
EMPTY = 0           // Vide
TUNNEL = 3          // Tunnel (passage fantômes)
BONUS_CHERRY = 4    // Cerise bonus
BONUS_LUDO = 5      // Étoile bonus
BONUS_SPEED = 6     // Étoile de vitesse
BONUS_SHIELD = 7    // Bouclier
BONUS_BOMB = 8      // Bombe
BONUS_MULTIPLIER = 9 // Multiplicateur

// Zones spéciales
ZONE_TELEPORT = 10  // Zone de téléportation
ZONE_BONUS = 11     // Zone bonus
ZONE_DANGER = 12    // Zone danger

// Types de fantômes
GHOST_NORMAL = 'normal'
GHOST_HUNTER = 'hunter'
GHOST_PATROL = 'patrol'
GHOST_FAST = 'fast'
GHOST_INVISIBLE = 'invisible'

// Constantes de gameplay
COMBO_TIMEOUT = 3000        // 3 secondes pour maintenir le combo
FRENZY_INTERVAL = 30000    // 30 secondes entre chaque mode Frenzy
FRENZY_DURATION = 10000    // 10 secondes de durée du mode Frenzy

📚 Documentation technique

Classe `Pacman`

Gère le personnage jouable.

Propriétés

Propriété	Type	Description
`x, y`	number	Position en cellules
`pixelX, pixelY`	number	Position en pixels (mouvement fluide)
`direction`	number	Direction actuelle (0=haut, 1=droite, 2=bas, 3=gauche)
`nextDirection`	number	Prochaine direction demandée
`speed`	number	Vitesse de déplacement (modifiable par power-ups)
`baseSpeed`	number	Vitesse de base (0.25)
`mouthAngle`	number	Animation de la bouche
`mouthOpen`	boolean	État de la bouche (ouverte/fermée)
`colorAnimation`	number	Animation des couleurs HSL (pour arc-en-ciel)
`color`	string	Couleur du joueur (sauvegardée)
`shape`	string	Forme du joueur ('round' ou 'triangle')

Méthodes

Méthode	Description
`update()`	Met à jour la position, l'animation et collecte les objets
`canMove(direction)`	Vérifie si le mouvement est possible dans une direction
`collectDot()`	Collecte les pastilles, bonus et active les power-ups
`draw()`	Dessine Pac-Man sur le canvas avec la couleur et forme choisies

Classe `Ghost`

Gère les fantômes ennemis avec IA avancée.

Propriétés

Propriété	Type	Description
`x, y`	number	Position en cellules
`pixelX, pixelY`	number	Position en pixels
`color`	string	Couleur du fantôme
`type`	string	Type de fantôme (normal, hunter, patrol, fast, invisible)
`direction`	number	Direction de déplacement
`speed`	number	Vitesse (ajustée selon le type et le niveau)
`baseSpeed`	number	Vitesse de base (0.15)
`moveCounter`	number	Compteur pour les changements de direction
`moveInterval`	number	Intervalle entre changements de direction
`isVulnerable`	boolean	État de vulnérabilité
`vulnerableTimer`	number	Durée restante de vulnérabilité
`isInvisible`	boolean	État d'invisibilité (pour GHOST_INVISIBLE)
`invisibleTimer`	number	Timer pour l'invisibilité
`patrolTarget`	object	Cible de patrouille (pour GHOST_PATROL)
`patrolIndex`	number	Index de patrouille

Méthodes

Méthode	Description
`update()`	Met à jour la position, l'IA et les états spéciaux
`updateSpeed()`	Ajuste la vitesse selon le type et le niveau
`canMove(direction)`	Vérifie si le mouvement est possible
`getDirectionToPacman(dirs)`	Calcule la meilleure direction vers Pac-Man avec prédiction
`getDirectionAwayFromPacman(dirs)`	Calcule la direction pour fuir Pac-Man (quand vulnérable)
`getPatrolDirection(dirs)`	Calcule la direction de patrouille (pour GHOST_PATROL)
`draw()`	Dessine le fantôme (corps + yeux, avec effets spéciaux)

Classe `Bonus`

Gère les objets bonus (cerises, étoiles, power-ups).

Propriétés

Propriété	Type	Description
`x, y`	number	Position en cellules
`type`	number	Type de bonus (BONUS_CHERRY, BONUS_LUDO, etc.)
`animation`	number	Animation de pulsation

Méthodes

Méthode	Description
`update()`	Met à jour l'animation
`draw()`	Dessine le bonus avec effet de scale et animation

Classe `MenuGhost`

Gère les fantômes animés dans le menu principal.

Propriétés

Propriété	Type	Description
`x, y`	number	Position en pixels
`vx, vy`	number	Vitesse en pixels
`color`	string	Couleur du fantôme
`size`	number	Taille du fantôme

Méthodes

Méthode	Description
`update()`	Met à jour la position
`draw(ctx)`	Dessine le fantôme sur le canvas du menu

Fonctions principales

Gestion du labyrinthe

Fonction	Description
`countDots()`	Compte le nombre de pastilles restantes
`drawMaze()`	Dessine le labyrinthe complet avec zones spéciales
`fillEmptySpaces()`	Remplit les espaces vides avec des pastilles
`randomizeMaze()`	Ajoute des variations aléatoires au labyrinthe
`placeBonuses()`	Place les bonus aux positions définies selon le niveau

Gestion du jeu

Fonction	Description
`initGame()`	Initialise une nouvelle partie
`gameLoop()`	Boucle principale du jeu (requestAnimationFrame)
`checkCollisions()`	Détecte les collisions Pac-Man/fantômes
`nextLevel()`	Passe au niveau suivant avec transition
`restartCurrentLevel()`	Recommence le niveau actuel (après perte de vie)
`createGhosts()`	Crée les fantômes selon le niveau et leurs types

Interface utilisateur

Fonction	Description
`updateLivesDisplay()`	Met à jour l'affichage des vies
`updateLeaderboard()`	Rafraîchit le classement principal
`updateGameLeaderboard()`	Rafraîchit le classement en jeu
`updateMenuLeaderboard()`	Rafraîchit le classement du menu
`saveScore()`	Sauvegarde le score en localStorage
`getScores()`	Récupère les scores depuis localStorage
`showGameOver()`	Affiche l'overlay Game Over
`hideGameOver()`	Cache l'overlay Game Over
`confirmUsername()`	Confirme le nom d'utilisateur
`resetUsernameInput()`	Réinitialise le champ nom d'utilisateur

Personnalisation

Fonction	Description
`updateColorSelection()`	Met à jour la sélection de couleur
`updateShapeSelection()`	Met à jour la sélection de forme
`updatePlayerPreview()`	Met à jour l'aperçu du joueur
`startPreviewAnimation()`	Démarre l'animation de l'aperçu
`stopPreviewAnimation()`	Arrête l'animation de l'aperçu

Fonction	Description
`animateMenu()`	Anime le menu principal
`startMenuAnimation()`	Démarre l'animation du menu
`stopMenuAnimation()`	Arrête l'animation du menu
`resizeMenuCanvas()`	Redimensionne le canvas du menu
`updateBestScore()`	Met à jour l'affichage du meilleur score

Plein écran

Fonction	Description
`toggleFullscreen()`	Active/désactive le mode plein écran
`updateFullscreenButton()`	Met à jour le bouton plein écran
`isFullscreen()`	Vérifie si on est en mode plein écran

Variables globales d'état

let score = 0;                      // Score actuel
let level = 1;                      // Niveau actuel
let lives = 3;                      // Vies restantes
let gameRunning = true;             // État du jeu
let isPaused = false;               // État de pause
let totalDots = 0;                  // Pastilles restantes
let cherriesEaten = 0;              // Cerises mangées (niveau actuel)
let isChangingLevel = false;        // Flag de transition
let cherryEatenRecently = false;     // Mode poursuite activé
let cherryEatenTimer = 0;           // Durée du mode poursuite

// Système de combo
let comboCount = 0;                 // Nombre de pastilles dans le combo
let comboMultiplier = 1;            // Multiplicateur actuel (max x5)
let lastDotTime = 0;                // Temps de la dernière pastille collectée

// Power-ups actifs
let speedBoostActive = false;       // État du boost de vitesse
let speedBoostTimer = 0;            // Durée restante
let shieldActive = false;           // État du bouclier
let shieldTimer = 0;                // Durée restante
let scoreMultiplierActive = false;  // État du multiplicateur
let scoreMultiplierTimer = 0;       // Durée restante
let scoreMultiplierValue = 1;      // Valeur du multiplicateur (x2)

// Mode Frenzy
let frenzyModeActive = false;       // État du mode Frenzy
let frenzyTimer = 0;                // Durée restante
let frenzyCooldown = 0;             // Cooldown avant le prochain Frenzy

// Zones spéciales
let specialZones = [];               // Zones spéciales actives

🔧 Systèmes avancés

Système de stockage des scores

Les scores sont sauvegardés dans le localStorage du navigateur sous la clé pacmanScores.

Format des données :

{
    username: "NomJoueur",  // Nom saisi ou "Anonyme"
    score: 1500,            // Score final
    level: 5,               // Niveau atteint
    date: "2025-12-01T..."  // Date ISO
}

Maximum 10 scores conservés
Triés par score décroissant
Affichage avec médailles pour le top 3 (🥇 🥈 🥉)

Labyrinthes

Le jeu dispose de 3 labyrinthes prédéfinis (originalMaze1, originalMaze2, originalMaze3) stockés comme tableaux 2D de 30x30.

Rotation des labyrinthes :

mazeIndex = (level - 1) % 3

Les labyrinthes sont modifiés dynamiquement :

fillEmptySpaces() - Remplit les zones vides avec des pastilles
randomizeMaze() - Ajoute de la variété en modifiant certains murs
placeBonuses() - Place les bonus et zones spéciales selon le niveau

Système de fruits

Les fruits changent selon le niveau :

Niveau 1 : Cerise rouge
Niveau 2 : Banane
Niveau 3 : Orange
Niveau 4 : Pomme
Niveau 5 : Raisin
Niveau 6 : Fraise
Niveau 7+ : Ananas (rotation)

IA des fantômes

Fantôme Normal

Poursuit directement le joueur
Changement de direction périodique

Chasseur (Niveau 2+)

Prédit la position future du joueur (3-4 cases d'avance)
Poursuite plus agressive
Pas de restriction sur le retour en arrière

Patrouilleur (Niveau 3+)

Si proche du joueur (< 12 cases) : poursuit
Si loin : patrouille vers les zones centrales
Bloque les passages stratégiques

Rapide (Niveau 4+)

Vitesse 1.5x supérieure aux autres
Même comportement de poursuite que Normal

Invisible (Niveau 5+)

Devient invisible 50% du temps
Timer alternant toutes les 5 secondes
Difficile à voir et à éviter

🎨 Design

Palette de couleurs

Élément	Couleur
Fond	`#0a0a0a` (noir)
Murs	`#0000ff` (bleu)
Pastilles	`#ffffff` (blanc)
Texte titre	`#ffd700` (or) avec animation arc-en-ciel
Cerises	`#ff0000` (rouge)
Cœurs	`#ff0000` (rouge) avec animation heartbeat
Zones téléportation	`rgba(255, 0, 255, 0.3)` (violet)
Zones bonus	`rgba(255, 215, 0, 0.3)` (doré)
Zones danger	`rgba(255, 0, 0, 0.3)` (rouge)

Fantômes

Rouge : #ff0000
Magenta : #ff00ff
Cyan : #00ffff
Orange : #ffa500
Vert : #00ff00
Jaune : #ffff00

Pac-Man

Couleur animée en HSL (arc-en-ciel) par défaut
8 couleurs disponibles : Jaune, Rouge, Bleu, Vert, Violet, Orange, Rose, Arc-en-ciel
2 formes : Rond (classique) ou Triangle

Animations CSS

neonFlicker : Effet de scintillement néon pour le titre
rainbow : Animation arc-en-ciel pour le texte
heartbeat : Animation de pulsation pour les cœurs
canvasGlow : Effet de lueur pour le canvas
pulse : Animation de pulsation pour les indicateurs
fadeIn : Animation d'apparition
shake : Animation de secousse pour Game Over

🔧 Personnalisation

Modifier la difficulté

Dans game.js :

// Vitesse de base de Pac-Man (ligne ~265)
this.baseSpeed = 0.25;

// Vitesse de base des fantômes (ligne ~575)
this.baseSpeed = 0.15;

// Accélération par niveau (ligne ~1504)
pacman.speed = pacman.baseSpeed * (1 + (level - 1) * 0.05);

Modifier les points

// Pastille (ligne ~357)
let points = 10 * comboMultiplier * (frenzyModeActive ? 3 : 1) * scoreMultiplierValue;

// Cerise (ligne ~372)
score += 100;

// Étoile Ludo (ligne ~401)
let points = 200 * (frenzyModeActive ? 3 : 1) * scoreMultiplierValue;

// Fantôme vulnérable (ligne ~1298)
score += 200;

Modifier les durées

// Combo timeout (ligne ~230)
const COMBO_TIMEOUT = 3000; // 3 secondes

// Mode Frenzy (lignes ~245-246)
const FRENZY_INTERVAL = 30000;  // 30 secondes
const FRENZY_DURATION = 10000;  // 10 secondes

// Power-ups (lignes ~408, 415, 436)
speedBoostTimer = 600;        // 10 secondes à 60 FPS
shieldTimer = 900;            // 15 secondes
scoreMultiplierTimer = 1800;  // 30 secondes

📱 Responsive Design

Le jeu est entièrement responsive avec :

Desktop : Interface complète avec classement à droite
Tablette : Layout adapté, classement en dessous
Mobile : Contrôles tactiles, layout vertical, classement en dessous

Media queries :

@media (max-width: 1200px) : Layout vertical
@media (max-width: 700px) : Optimisations mobile

🐛 Dépannage

Le jeu ne démarre pas

Vérifiez que vous utilisez un navigateur moderne
Ouvrez la console (F12) pour voir les erreurs
Vérifiez que tous les fichiers sont présents

Les scores ne se sauvegardent pas

Vérifiez que le localStorage est activé dans votre navigateur
Videz le cache si nécessaire

Le mode plein écran ne fonctionne pas

Certains navigateurs nécessitent une interaction utilisateur
Essayez de cliquer sur le bouton après le chargement de la page

📄 Licence

Projet créé par Ludo et Syoul.

🙏 Crédits

Inspiration : Pac-Man original (Namco, 1980)
Développement : Ludo & Syoul
Police : Press Start 2P (Google Fonts)

🔄 Changelog

Version actuelle

✅ Système de combo
✅ Mode Frenzy automatique
✅ Power-ups multiples (vitesse, bouclier, bombe, multiplicateur)
✅ Types de fantômes variés avec IA avancée
✅ Zones spéciales (téléportation, bonus, danger)
✅ Personnalisation complète du joueur
✅ Menu principal animé
✅ Classement en temps réel
✅ Mode plein écran
✅ Support mobile avec contrôles tactiles
✅ Système de pause
✅ Fruits variés selon le niveau

Amusez-vous bien avec OULVIC ! 🎮👻

README.md Unescape Escape

🎮 OULVIC - Jeu de type Pac-Man

📖 Table des matières

📝 Description

✨ Fonctionnalités

Gameplay

Bonus de base

Power-ups (Niveau 2+)

Système de Combo

Mode Frenzy

Fantômes

Types de fantômes

Nombre de fantômes par niveau

Comportement

Zones spéciales (Niveau 4+)

Labyrinthes

Personnalisation

Interface

📁 Structure du projet

🚀 Installation

🎯 Comment jouer

Contrôles

Clavier

Mobile

Objectif

Progression

Système de score

🏗️ Architecture du code

index.html

style.css

game.js

Constantes principales

📚 Documentation technique

Classe Pacman

Propriétés

Méthodes

Classe Ghost

Propriétés

Méthodes

Classe Bonus

Propriétés

Méthodes

Classe MenuGhost

Propriétés

Méthodes

Fonctions principales

Gestion du labyrinthe

Gestion du jeu

Interface utilisateur

Personnalisation

Menu et animations

Plein écran

Variables globales d'état

🔧 Systèmes avancés

Système de stockage des scores

Labyrinthes

Système de fruits

IA des fantômes

Fantôme Normal

Chasseur (Niveau 2+)

Patrouilleur (Niveau 3+)

Rapide (Niveau 4+)

Invisible (Niveau 5+)

🎨 Design

Palette de couleurs

Fantômes

Pac-Man

Animations CSS

🔧 Personnalisation

Modifier la difficulté

Modifier les points

Modifier les durées

📱 Responsive Design

🐛 Dépannage

Le jeu ne démarre pas

Les scores ne se sauvegardent pas

Le mode plein écran ne fonctionne pas

📄 Licence

🙏 Crédits

🔄 Changelog

README.md

`index.html`

`style.css`

`game.js`

Classe `Pacman`

Classe `Ghost`

Classe `Bonus`

Classe `MenuGhost`