# 🎮 OULVIC - Jeu de type Pac-Man Un jeu de type Pac-Man développé en JavaScript vanilla par **Ludo** et **Syoul**. --- ## 📖 Table des matières 1. [Description](#description) 2. [Fonctionnalités](#fonctionnalités) 3. [Structure du projet](#structure-du-projet) 4. [Installation](#installation) 5. [Comment jouer](#comment-jouer) 6. [Architecture du code](#architecture-du-code) 7. [Documentation technique](#documentation-technique) 8. [Systèmes avancés](#systèmes-avancés) --- ## 📝 Description **OULVIC** est un clone de Pac-Man développé entièrement en HTML5, CSS3 et JavaScript vanilla. Le jeu utilise l'élément `` 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 1. **Cloner ou télécharger** le projet 2. **Ouvrir** `index.html` dans un navigateur web moderne 3. **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 1. Collectez toutes les pastilles blanches pour marquer des points 2. Mangez les cerises pour activer la poursuite et progresser 3. Collectez les power-ups pour obtenir des avantages 4. Évitez les fantômes (ou mangez-les quand ils sont vulnérables) ! 5. 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 : ```html ├── 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 ```javascript 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 | #### Menu et animations | 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 ```javascript 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 :** ```javascript { 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 :** ```javascript mazeIndex = (level - 1) % 3 ``` Les labyrinthes sont modifiés dynamiquement : 1. `fillEmptySpaces()` - Remplit les zones vides avec des pastilles 2. `randomizeMaze()` - Ajoute de la variété en modifiant certains murs 3. `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` : ```javascript // 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 ```javascript // 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 ```javascript // 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 ! 🎮👻**