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 aux couleurs changeantes
4 fantômes avec intelligence artificielle
3 labyrinthes différents
Système de niveaux progressifs
Classement des scores (localStorage)
Interface responsive

✨ 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
Points : Collecte de pastilles (+10 points) et bonus
Progression de niveau : Passer au niveau suivant en mangeant 4 cerises

Bonus

Bonus	Points	Effet
🍒 Cerise	+100	Active la poursuite des fantômes pendant un temps limité. 4 cerises = niveau suivant
⭐ Étoile "L"	+15	Bonus supplémentaire

Fantômes

4 fantômes avec couleurs distinctes (rouge, magenta, cyan, orange)
IA adaptative : Les fantômes poursuivent Pac-Man après qu'une cerise soit mangée
Vitesse croissante : Les fantômes accélèrent à chaque niveau

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é

📁 Structure du projet

pacmanludo/
├── index.html    # Page HTML principale
├── style.css     # Feuille de styles
├── game.js       # Logique du jeu
└── 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.

🎯 Comment jouer

Contrôles

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

Objectif

Collectez toutes les pastilles blanches pour marquer des points
Mangez les cerises pour activer la poursuite et progresser
Évitez les fantômes !
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 (+20% par niveau)
- Le labyrinthe change (cycle de 3 labyrinthes)

🏗️ Architecture du code

`index.html`

Structure HTML de la page :

├── main-wrapper
│   ├── container (zone de jeu)
│   │   ├── Titre "OULVIC"
│   │   ├── Champ nom d'utilisateur
│   │   ├── Barre d'informations (score, niveau, vies, statut)
│   │   ├── Canvas du jeu (600x600)
│   │   └── Instructions et bouton rejouer
│   └── leaderboard-container (classement)
└── footer (crédits)

`style.css`

Section	Description
Reset & Body	Styles de base, fond sombre avec effets
Layout	Flexbox pour disposition responsive
Game Info	Styles pour score, niveau, vies
Canvas	Bordure dorée, ombres
Leaderboard	Tableau des scores stylisé
Responsive	Media queries pour mobile

`game.js`

Constantes principales

CELL_SIZE = 20      // 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

📚 Documentation technique

Classe `Pacman`

Gère le personnage jouable.

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
`mouthAngle`	number	Animation de la bouche
`colorAnimation`	number	Animation des couleurs HSL

Méthode	Description
`update()`	Met à jour la position et l'animation
`canMove(direction)`	Vérifie si le mouvement est possible
`collectDot()`	Collecte les pastilles et bonus
`draw()`	Dessine Pac-Man sur le canvas

Classe `Ghost`

Gère les fantômes ennemis.

Propriété	Type	Description
`x, y`	number	Position en cellules
`pixelX, pixelY`	number	Position en pixels
`color`	string	Couleur du fantôme
`direction`	number	Direction de déplacement
`speed`	number	Vitesse (augmente avec le niveau)
`moveInterval`	number	Intervalle entre changements de direction

Méthode	Description
`update()`	Met à jour la position et l'IA
`updateSpeed()`	Ajuste la vitesse selon le niveau
`canMove(direction)`	Vérifie si le mouvement est possible
`getDirectionToPacman(dirs)`	Calcule la meilleure direction vers Pac-Man
`draw()`	Dessine le fantôme (corps + yeux)

Classe `Bonus`

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

Propriété	Type	Description
`x, y`	number	Position en cellules
`type`	number	Type de bonus (CHERRY ou LUDO)
`animation`	number	Animation de pulsation

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

Fonctions principales

Gestion du labyrinthe

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

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
`restartCurrentLevel()`	Recommence le niveau actuel (après perte de vie)

Interface utilisateur

Fonction	Description
`updateLivesDisplay()`	Met à jour l'affichage des vies
`updateLeaderboard()`	Rafraîchit le classement
`saveScore()`	Sauvegarde le score en localStorage
`getScores()`	Récupère les scores depuis localStorage

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 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 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
    date: "2025-12-01T..."  // Date ISO
}

Maximum 10 scores conservés
Triés par score décroissant

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
randomizeMaze() - Ajoute de la variété

🎨 Design

Palette de couleurs

Élément	Couleur
Fond	`#0a0a0a` (noir)
Murs	`#0000ff` (bleu)
Pastilles	`#ffffff` (blanc)
Texte titre	`#ffd700` (or)
Cerises	`#ff0000` (rouge)
Cœurs	`#ff0000` (rouge)

Fantômes

Rouge : #ff0000
Magenta : #ff00ff
Cyan : #00ffff
Orange : #ffa500

Pac-Man

Couleur animée en HSL (arc-en-ciel)

🔧 Personnalisation

Modifier la difficulté

Dans game.js :

// Vitesse de base de Pac-Man (ligne 145)
this.baseSpeed = 0.15;

// Vitesse de base des fantômes (ligne 277)
this.baseSpeed = 0.1;

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

Modifier les points

// Pastille (ligne 213)
score += 10;

// Cerise (ligne 224)
score += 100;

// Étoile Ludo (ligne 241)
score += 15;

📄 Licence

Projet créé par Ludo et Syoul.

🙏 Crédits

Inspiration : Pac-Man original (Namco, 1980)
Développement : Ludo & Syoul

README.md

🎮 Oulvic - Jeu de type Pac-Man

📖 Table des matières

📝 Description

✨ Fonctionnalités

Gameplay

Bonus

Fantômes

Labyrinthes

📁 Structure du projet

🚀 Installation

🎯 Comment jouer

Contrôles

Objectif

Progression

🏗️ Architecture du code

index.html

style.css

game.js

Constantes principales

📚 Documentation technique

Classe Pacman

Classe Ghost

Classe Bonus

Fonctions principales

Gestion du labyrinthe

Gestion du jeu

Interface utilisateur

Variables globales d'état

Système de stockage des scores

Labyrinthes

🎨 Design

Palette de couleurs

Fantômes

Pac-Man

🔧 Personnalisation

Modifier la difficulté

Modifier les points

📄 Licence

🙏 Crédits

`index.html`

`style.css`

`game.js`

Classe `Pacman`

Classe `Ghost`

Classe `Bonus`