Gestern war ein bedeutender Meilenstein in der KI-Entwicklung mit der Veröffentlichung von GPT-5, und natürlich konnte ich nicht widerstehen, es gegen Anthropics Claude Opus 4.1 zu testen. Obwohl ich Claude als meinen bevorzugten KI-Begleiter nutze, bin ich entschlossen, diesen Vergleich so unvoreingenommen wie möglich zu halten.
Haftungsausschluss: Dies ist keineswegs ein wissenschaftliches Experiment. Beide Unternehmen und ihre Modelle sind unglaublich stark, und diese Herausforderung repräsentiert nicht die optimale Art, diese KI-Systeme zu nutzen. Aber es war zweifellos unterhaltsam!
Die Herausforderung: Pacman-Entwicklung in einem Zug
Das Ziel war einfach, aber ehrgeizig: ein voll funktionsfähiges Pacman-Spiel aus einem einzigen Prompt zu erstellen, ohne Anpassungen, Modifikationen oder Folgeanweisungen.
Phase 1: Prompt Engineering
Anstatt identische Prompts zu verwenden (was die Hälfte des Spaßes verpassen würde), entschied ich mich, die Prompt-Engineering-Fähigkeiten beider Modelle zu testen. Ich gab jeder KI dieselbe Ausgangsfrage:
„Ich möchte ein Pacman-Spiel erstellen, erstelle einen Prompt, um es in reinem HTML, CSS und JS zu entwickeln, damit wir es im Web ausführen können.“
Beide Modelle meisterten die Aufgabe und generierten umfassende Prompts für die Spielentwicklung.
OpenAIs generierter Prompt:
# Prompt — Build a classic Pac-Man clone in plain HTML/CSS/JS
**Goal:** Build a playable Pac-Man clone that runs in a modern browser using only plain HTML, CSS and JavaScript (no frameworks or external libraries). Deliver a single runnable package (either a single `index.html` with embedded CSS/JS or a small project with `index.html`, `styles.css`, `game.js`) that can be opened locally and played.
---
## Required features (must-have)
1. **Canvas-based rendering**
* Use an HTML `<canvas>` element for the game view (no DOM grid for tiles).
* The canvas should scale responsively but maintain game logic on a fixed grid (e.g., 28×31 tile grid or similar).
2. **Map & tiles**
* A tile map for walls, pellets, power pellets, empty space, and spawn points.
* Draw walls as simple shapes (rounded rectangles/lines) — no external images required.
* Provide an easy-to-edit map array in `game.js`.
3. **Pac-Man**
* Smooth movement on the grid (not teleporty). Pac-Man should accelerate to a constant speed and slide between tiles.
* Keyboard controls: arrow keys (↑ ↓ ← →). Support WASD optionally.
* Mouth animation (open/close) that faces movement direction.
4. **Pellets and power pellets**
* Small pellets that increase score when collected and disappear.
* Power pellets (larger) that put ghosts into frightened mode for a limited time.
5. **Ghosts**
* Four ghosts with distinct starting positions and colors.
* Ghost behavior approximating classic states: **scatter**, **chase**, and **frightened**.
* Implement at least one simple pathfinding approach (BFS or A\* on tile-grid) so ghosts can navigate around walls toward a target tile.
* When frightened, ghosts move randomly and are edible. When eaten, they return to a “home” box and then resume.
6. **Collision & lives**
* Collision detection between Pac-Man and ghosts.
* Lives counter (3 lives by default); losing all lives ends the game with a game over screen.
7. **Scoring and HUD**
* Score display, current level, and remaining lives shown outside or above the canvas.
* Points for pellets, power pellets, and eating ghosts (increasing multiplier).
8. **Win/lose and level progression**
* Clear level when all pellets are eaten. Advance to next level with same map or increased difficulty (ghost speed increase or shorter frightened time).
* Game Over and Level Complete screens with options: Restart Level / Restart Game.
9. **Sound (optional, but encouraged)**
* Add simple sounds using WebAudio or `<audio>` tags (eating pellets, power up, ghost eaten, death).
* Sounds must degrade gracefully if not supported or blocked.
10. **Performance & compatibility**
* Target 60 FPS on desktop browsers. Use `requestAnimationFrame`.
* No external dependencies; the game must run offline by opening `index.html`.
---
## UX / Controls / Accessibility
* Arrow keys or WASD for movement.
* P key or ESC to pause/unpause.
* Mobile: provide on-screen directional controls (optional but helpful).
* Keyboard focus: pressing keys should work after opening page (ensure canvas or body captures keys).
---
## Implementation & coding requirements
* **No external JS/CSS libraries**. Vanilla JS only.
* **Structure**: Keep code organized and commented.
* `index.html`: canvas and HUD.
* `styles.css`: minimal styling.
* `game.js`: game logic, map, render loop, input handling, AI, collision.
* Or combine into a single `index.html` with `<style>` and `<script>` blocks.
* **Grid logic**: Use a consistent tile size (e.g., 20 px) and base movement/collision on tiles rather than raw pixels.
* **Pathfinding**: Implement BFS or A\* for ghost navigation (in JS).
* **State machine**: Ghosts should have states (scatter, chase, frightened, eaten) with timers controlling transitions.
* **Collision math**: Check collisions at tile centers or with a small radius to be robust.
* **Randomness**: Use deterministic RNG seed for debugging (optional) or document random behavior.
---
## Deliverables
1. A runnable project (ZIP or repo) containing `index.html`, `styles.css` (optional), and `game.js`.
2. A short README with:
* How to run locally (open `index.html`).
* Keyboard controls.
* Notes on map editing and configuration (tile size, speeds).
3. Clean, commented code with functions clearly separated:
* Map loader / tile reader
* Renderer
* Input manager
* Entity logic (Pac-Man, Ghost)
* Pathfinding
* Game state manager (start, pause, level complete, game over)
---
## Configuration options to expose
* Grid width & height (tiles).
* Tile size (pixels).
* Pac-Man speed and ghost speeds for different states.
* Frightened duration and timers for scatter/chase phases.
* Initial lives and scoring values.
---
## Acceptance criteria / tests
* [ ] Pac-Man moves smoothly with arrow keys on desktop.
* [ ] Pellets disappear and increment score when eaten.
* [ ] Power pellets trigger frightened mode for ghosts; ghosts become edible.
* [ ] Ghosts navigate around walls and attempt to reach a target tile (not just random movement).
* [ ] Eating all pellets advances to next level.
* [ ] Losing all lives shows a Game Over screen; Restart works.
* [ ] Runs in Chrome, Firefox and Safari without external libraries.
* [ ] Optional: Mobile controls let you play the game on a phone.
---
## Optional/bonus features
* Implement classic ghost AI targets (Blinky targets Pac-Man, Pinky attempts to ambush, Inky uses two-point vector, Clyde alternates).
* Add fruit bonus items with spawn timers and scoring.
* Add level-specific mazes and increasing difficulty.
* Sprite-based graphics (small sprite sheet) or CSS-based animations.
* Keyboard remapping and gamepad support.
* High score storage using `localStorage`.
* Smooth animated transitions and simple particle effects for pellet eating.
---
## Example starting hints (copy into your code)
* **Canvas sizing:** Use CSS to scale the canvas visually, but keep an internal fixed logical resolution for collision math:
```js
const TILE = 20;
const COLS = 28;
const ROWS = 31;
const WIDTH = COLS * TILE;
const HEIGHT = ROWS * TILE;
canvas.width = WIDTH;
canvas.height = HEIGHT;
```
* **Map representation:** 2D array with codes, e.g. `0 = empty, 1 = wall, 2 = pellet, 3 = power`.
* **Movement:** Move by `speed * dt` each frame; align to tile centers when changing direction.
* **Pathfinding:** Convert map to a graph of walkable tiles and run BFS from ghost tile to target tile to compute next tile.
* **Game loop:** `requestAnimationFrame` with accumulator or delta time to keep movement consistent.
---Claudes generierter Prompt:
# Prompt: Build a Web-Based Pacman Game
Create a fully functional Pacman game using HTML5, CSS3, and vanilla JavaScript that runs in a web browser. The game should capture the classic Pacman experience with smooth gameplay and responsive controls.
## Core Requirements
### Game Board
- Create a 19x21 grid-based maze layout similar to the classic Pacman design
- Include walls that Pacman and ghosts cannot pass through
- Place small dots (pellets) throughout the maze for Pacman to collect
- Add 4 power pellets in the corners that give Pacman temporary ghost-eating ability
- Display the current score and high score at the top of the game
- Show remaining lives (start with 3 lives)
### Pacman Character
- Render Pacman as a yellow circle with an animated mouth that opens/closes while moving
- Implement smooth movement through the maze (not jumpy/teleporting)
- Control Pacman using arrow keys or WASD keys
- Pacman should move continuously in the last pressed direction until hitting a wall
- Allow queuing the next direction (if player presses a key while Pacman is moving, execute the turn when possible)
- Implement wraparound tunnels on the sides of the maze
### Ghost Behavior
- Create 4 ghosts with different colors: Blinky (red), Pinky (pink), Inky (cyan), Clyde (orange)
- Implement basic AI for ghost movement:
- Blinky: Chases Pacman directly
- Pinky: Tries to position ahead of Pacman
- Inky: Uses a combination of Blinky's position and Pacman's direction
- Clyde: Chases when far, scatters when close
- Ghosts should start in a "ghost house" in the center and be released gradually
- When Pacman eats a power pellet, ghosts turn blue and flee from Pacman
- Eaten ghosts return to the ghost house as eyes before regenerating
### Game Mechanics
- Eating pellets: 10 points each
- Eating power pellets: 50 points each
- Eating ghosts: 200, 400, 800, 1600 points in sequence per power pellet
- Bonus fruit appears twice per level (100-5000 points depending on level)
- Game speeds up slightly with each level
- Extra life awarded at 10,000 points
### Visual Design
- Use a dark/black background for the maze
- Blue walls for the maze structure
- White pellets, larger white power pellets
- Smooth animations for all character movements
- Ghost eyes should look in their direction of movement
- Add a flashing effect when power pellet is about to wear off
### Sound Effects (Optional Enhancement)
- Background music during gameplay
- Waka-waka sound when eating pellets
- Different sound when eating power pellets
- Sound when eating ghosts
- Death sound when Pacman loses a life
- Victory sound when completing a level
### Game States
- Start screen with "Press SPACE to Start" message
- Pause functionality (press P or ESC)
- Game over screen showing final score
- Level complete screen before advancing to next level
- Ready message before each life starts
### Technical Implementation Details
**HTML Structure:**
- Single canvas element for game rendering
- Div containers for score, lives, and game messages
- Simple, semantic HTML5 structure
**CSS Styling:**
- Center the game on the page
- Retro arcade font for text (use Google Fonts: "Press Start 2P")
- Responsive design that scales appropriately
- Dark theme to match arcade aesthetic
**JavaScript Architecture:**
- Use object-oriented approach with classes for Pacman, Ghost, Game, etc.
- Implement game loop using requestAnimationFrame for smooth 60 FPS
- Separate concerns: rendering, game logic, input handling, collision detection
- Use 2D canvas context for all drawing operations
- Implement efficient collision detection using grid-based positioning
### Performance Optimization
- Use sprite sheets or canvas drawing for graphics
- Implement dirty rectangle rendering (only redraw changed areas)
- Optimize pathfinding algorithms for ghosts
- Minimize DOM manipulation during gameplay
### Code Organization
```
- index.html (minimal HTML structure)
- style.css (all styling)
- game.js (main game logic and loop)
- pacman.js (Pacman class and behavior)
- ghost.js (Ghost classes and AI)
- maze.js (Maze generation and collision detection)
- utils.js (Helper functions and constants)
```
### Additional Features to Consider
- Local storage for high score persistence
- Touch controls for mobile devices
- Difficulty settings (Easy, Normal, Hard)
- Classic mode vs Modern mode (with updated graphics)
- Two-player mode where second player controls ghosts
## Deliverable
Create a single HTML file with embedded CSS and JavaScript that can be opened directly in any modern web browser. The game should be immediately playable without any build process or server requirements. Ensure smooth performance on Chrome, Firefox, Safari, and Edge browsers.
The final game should feel responsive, challenging, and true to the original Pacman experience while leveraging modern web technologies for smooth gameplay.Phase 2: Spielentwicklung
Ich öffnete neue Chat-Sitzungen für jedes Modell und entfesselte ihre jeweiligen Prompts. Bemerkenswerterweise lieferten beide KI-Systeme beim ersten Versuch funktionierende, spielbare Pacman-Spiele.
Ergebnisvergleich
| Metrik | ChatGPT-5 | Claude Opus 4.1 |
|---|---|---|
| Prompt-Länge | 155 Zeilen | 112 Zeilen |
| Generierter Code | 550 Zeilen | 863 Zeilen |
| Spiel-Funktionalität | Funktioniert | Funktioniert |
| Erfolg beim ersten Versuch | Ja | Ja |
Hauptunterschiede
Code-Ausführlichkeit: Claude generierte deutlich mehr Code (863 vs 550 Zeilen), was auf einen detaillierteren Implementierungsansatz hindeutet, während GPT-5 eine prägnantere Lösung wählte.
Prompt Engineering: GPT-5 erstellte einen längeren, detaillierteren Prompt (155 vs 112 Zeilen), was auf unterschiedliche Ansätze zur Anweisungsvollständigkeit hinweist.
Probieren Sie es selbst aus
Um vollständige Transparenz zu gewährleisten und Ihnen zu ermöglichen, selbst zu urteilen, habe ich beide Chat-Sitzungen öffentlich gemacht:
Klicken Sie sich durch und spielen Sie beide Versionen, um zu sehen, welche Implementierung Sie mehr anspricht!
Fazit
Beide Modelle zeigten beeindruckende Fähigkeiten in der einstufigen Spielentwicklung. Die Wahl zwischen ihnen könnte auf persönliche Präferenzen hinauslaufen: GPT-5s prägnante Effizienz versus Claudes detaillierte Gründlichkeit. Sicher ist, dass wir eine aufregende Ära erleben, in der KI einfache Anfragen in voll funktionsfähige Anwendungen verwandeln kann.
Was sind Ihre Gedanken? Welche Implementierung haben Sie bevorzugt? Lassen Sie es mich in den Kommentaren wissen!
