Ein moderner Pac-Man-Klon mit Neon-Grafik, entwickelt mit Phaser 3 und TypeScript.
- 8 Level mit steigendem Schwierigkeitsgrad
- 5 verschiedene Maze-Layouts für Abwechslung
- 4 Geister mit einzigartigen KI-Persönlichkeiten:
- 🔴 Blinky - Verfolgt direkt
- 🩷 Pinky - Lauert voraus
- 🩵 Inky - Komplexe Flankenmanöver
- 🟠 Clyde - Schüchtern (wechselt zwischen Jagd und Flucht)
- Modernes Neon-Design mit glatten Animationen
- Responsive Design für Desktop und Mobile
- Touch-Steuerung mit Swipe-Gesten
- Highscore-System mit LocalStorage-Persistenz
- Sound-Effekte (stummschaltbar)
- Pause-Funktion
- Node.js 18+
- npm 9+
# Repository klonen
git clone <repository-url>
cd pacman-clone
# Abhängigkeiten installieren
npm install
# Entwicklungsserver starten
npm run devDas Spiel ist dann unter http://localhost:5173 erreichbar.
npm run buildDie Build-Dateien werden im dist/ Ordner erstellt.
| Taste | Aktion |
|---|---|
| ↑ / W | Nach oben |
| ↓ / S | Nach unten |
| ← / A | Nach links |
| → / D | Nach rechts |
| ESC | Pause |
| Q | Beenden (im Pause-Menü) |
- Swipe in die gewünschte Richtung
- Tap zum Starten/Fortsetzen
src/
├── audio/ # Audio-System
│ ├── AudioManager.ts # Sound-Verwaltung
│ └── audio-generator.ts
├── entities/ # Spielfiguren
│ ├── PacMan.ts # Pac-Man Entity
│ └── Ghost.ts # Geister mit KI
├── game/ # Spiellogik
│ ├── ScoreManager.ts # Punkteverwaltung
│ ├── LivesManager.ts # Leben-System
│ └── LevelManager.ts # Level-Progression
├── input/ # Eingabe-System
│ └── InputManager.ts # Tastatur & Touch
├── maze/ # Labyrinth-System
│ ├── Maze.ts # Maze-Klasse
│ ├── maze-loader.ts # Layout-Laden
│ ├── maze-validation.ts
│ └── layouts/ # 5 Maze-Layouts
├── persistence/ # Datenpersistenz
│ ├── serialization.ts
│ └── storage.ts # LocalStorage
├── responsive/ # Responsive Design
│ └── ResponsiveManager.ts
├── scenes/ # Phaser Scenes
│ ├── BootScene.ts # Asset-Loading
│ ├── MenuScene.ts # Hauptmenü
│ ├── GameScene.ts # Hauptspiel
│ ├── GameOverScene.ts
│ └── WinScene.ts
├── types/ # TypeScript Typen
│ ├── enums.ts # Enumerationen
│ └── interfaces.ts # Interfaces
├── ui/ # UI-Komponenten
│ ├── ScoreDisplay.ts
│ ├── LivesDisplay.ts
│ ├── LevelIndicator.ts
│ └── FrightenedTimer.ts
└── main.ts # Einstiegspunkt
Das Projekt verwendet Vitest für Unit-Tests und fast-check für Property-Based-Tests.
# Alle Tests ausführen
npm test
# Tests im Watch-Modus
npm run test:watch
# Coverage-Report
npm run test:coverage- 396 Tests insgesamt
- 24 Test-Dateien
- Unit-Tests und Property-Based-Tests
| Aktion | Punkte |
|---|---|
| Pellet sammeln | 10 |
| Power-Pellet sammeln | 50 |
| 1. Geist fressen | 200 |
| 2. Geist fressen | 400 |
| 3. Geist fressen | 800 |
| 4. Geist fressen | 1600 |
- 7 Fruchtarten: Kirsche (50), Himbeere (100), Pfirsich (150), Apfel (200), Banane (250), Weintrauben (350), Melone (450)
- Zufälliges Erscheinen: Pro Level erscheinen zufällig 2-7 Früchte in Abständen von 15-30 Sekunden.
- Lebensdauer: Jede Frucht hat eine Lebensdauer von 8-12 Sekunden und blinkt, bevor sie verschwindet.
| Level | Geister-Geschwindigkeit | Frightened-Dauer |
|---|---|---|
| 1 | 75 | 6s |
| 2 | 85 | 5s |
| 3 | 95 | 4s |
| 4 | 95 | 3s |
| 5 | 100 | 2s |
| 6 | 100 | 2s |
| 7 | 105 | 1s |
| 8 | 110 | 0.5s |
- Chase - Geister verfolgen Pac-Man
- Scatter - Geister ziehen sich in ihre Ecken zurück
- Frightened - Geister fliehen (nach Power-Pellet)
- Eaten - Geister kehren zum Ghost House zurück
- Game Engine: Phaser 3
- Sprache: TypeScript
- Build Tool: Vite
- Testing: Vitest + fast-check
- Rendering: Canvas 2D mit Neon-Effekten
Das Projekt folgt einer komponentenbasierten Architektur:
┌─────────────────────────────────────────────────────────────────┐
│ Phaser Game Instance │
├─────────────────────────────────────────────────────────────────┤
│ BootScene → MenuScene → GameScene ↔ GameOverScene/WinScene │
├─────────────────────────────────────────────────────────────────┤
│ Game Scene │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Entity Layer: PacMan, Blinky, Pinky, Inky, Clyde │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Maze Layer: Walls, Pellets, Tunnels, Ghost House │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ UI Layer: Score, Lives, Level, Timer │ │
│ └──────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ Manager Systems: Input, Audio, Score, Level, Responsive │
└─────────────────────────────────────────────────────────────────┘
- Composition over Inheritance - Spielobjekte durch Komposition
- State Machine Pattern - Für Geister-KI und Spielzustände
- Event-Driven Communication - Lose Kopplung zwischen Komponenten
- Data-Driven Design - Level-Konfiguration über Daten
- Erstelle eine neue Datei in
src/maze/layouts/ - Definiere das Grid mit
CellType-Werten - Exportiere in
src/maze/layouts/index.ts
- Füge neuen
GhostTypeinsrc/types/enums.tshinzu - Implementiere Targeting-Logik in
Ghost.ts - Definiere Farbe und Scatter-Ziel
- Audio-Dateien müssen manuell in
public/assets/audio/hinzugefügt werden - Web Audio API wird für Sound benötigt (Fallback auf stumm)
MIT License - siehe LICENSE für Details.
- Inspiriert vom Original Pac-Man (1980) von Namco
- Entwickelt mit Phaser 3
- Icons und Design: Eigene Kreation im Neon-Stil
Viel Spaß beim Spielen! 🎮