Die Herausforderung: Space Invaders

Space Invaders ist schwieriger als 2048, weil es Folgendes beinhaltet:

• Echtzeit-Spielschleife (60fps Rendering)
• Kollisionserkennung
• Mehrere Entitaetstypen (Spieler, Feinde, Geschosse)
• Zustandsverwaltung (Leben, Punkte, Level)
• Tastatureingabe-Verarbeitung (kontinuierlich, nicht einmalig)

Hier wechseln wir vom Vibe Coding zu einem strukturierteren Ansatz.

Projekt-Setup

npm create vite@latest space-invaders -- --template vanilla
cd space-invaders
npm install
npm run dev

Erstellen Sie eine AGENTS.md, bevor Sie Code schreiben:

# AGENTS.md

## Projektuebersicht
Space-Invaders-Spiel mit Vanilla-JavaScript und HTML Canvas.
Keine externen Spielbibliotheken -- pure Canvas-API.

## Architektur
- `main.js` — Spielinitialisierung und Schleife
- `game.js` — Spielzustand, Punkte, Levelverwaltung
- `player.js` — Spielerschiff: Bewegung, Schiessen
- `enemy.js` — Feindraster: Bewegungsmuster, Schiessen
- `bullet.js` — Geschossphysik und Kollisionserkennung
- `renderer.js` — Alle Canvas-Zeichenoperationen
- `style.css` — Seitenlayout und UI ausserhalb des Canvas

## Code-Stil
- ES-Module mit benannten Exporten
- Klassen fuer Spielentitaeten (Player, Enemy, Bullet)
- Konstanten in UPPER_SNAKE_CASE am Anfang der Dateien
- Spielschleife verwendet requestAnimationFrame

Der strukturierte Prompt

Statt eines massiven Prompts in Phasen aufteilen:

Phase 1 -- Kern-Engine:

Create the game engine following the architecture in AGENTS.md.

Start with:
1. HTML Canvas element (800x600) centered on page
2. Game loop using requestAnimationFrame at 60fps
3. Player ship at bottom center that moves left/right with arrow keys
4. Shooting with spacebar — bullets move upward
5. FPS counter in the corner for debugging

Don't add enemies yet — just the player, movement, and shooting.

Phase 2 -- Feinde:

Add the enemy grid:
1. 5 rows of 11 enemies, arranged in a grid
2. Enemies move horizontally, then drop down when hitting edges
3. Enemies speed up as fewer remain
4. Collision detection: player bullets destroy enemies
5. Score: +10 per enemy destroyed, displayed on screen

Phase 3 -- Vollstaendiges Spiel:

Add remaining game features:
1. Enemy shooting — random enemies fire downward at intervals
2. Player has 3 lives — loses one when hit by enemy bullet
3. Game over when lives reach 0 or enemies reach player row
4. Win condition: all enemies destroyed → next level (faster enemies)
5. Start screen with "Press ENTER to play"
6. Game over screen with final score and "Press ENTER to restart"

Warum Multi-Datei wichtig ist

Einzeldatei-Spiele funktionieren fuer 2048 (~200 Zeilen). Space Invaders wird ueber 500 Zeilen haben.

Probleme mit Einzeldatei-Spielen:

• KI verliert den Ueberblick bei grossen Dateien
• Ein System kann nicht geaendert werden, ohne andere zu gefaehrden
• Keine wiederverwendbaren Komponenten
• Schwer zu debuggen

Vorteile der Multi-Datei-Architektur:

• Jede Datei ist klein genug, damit die KI sie vollstaendig versteht
• Kollisionslogik aendern, ohne das Rendering zu beruehren
• Systeme unabhaengig testen
• KI kann sich auf eine Datei zur Zeit konzentrieren

Bei Multi-Datei-Projekten sagen Sie der KI, welche Datei sie aendern soll:

In enemy.js, aendere das Feindbewegungsmuster von linear
zu sinusfoermig -- Feinde sollen wellenfoermig nach links und
rechts schwingen, waehrend sie sich nach unten bewegen.

Eine Portfolio-Homepage bauen

Erstellen Sie jetzt eine Homepage, die Ihre 2048- und Space-Invaders-Spiele praesentiert:

npm create vite@latest my-portfolio -- --template vanilla
cd my-portfolio
npm install

Der Prompt:

Build a portfolio homepage with the following:

1. Hero section with my name and "AI-Assisted Developer" tagline
2. Project cards section with two cards:
   - "2048" — sliding puzzle game, link to /games/2048/
   - "Space Invaders" — classic arcade game, link to /games/space-invaders/
3. Each card has: screenshot placeholder, title, description, "Play" button
4. About section explaining this was built using AI coding tools
5. Footer with links to GitHub

Design:
- Dark theme with gradient accents
- Modern sans-serif font (system font stack)
- Responsive — looks good on mobile and desktop
- Smooth scroll between sections
- Subtle hover animations on project cards

Die Spiele einbetten

Um die Spiele vom Portfolio aus spielbar zu machen:

Add the built versions of my games to the portfolio:

1. Create a public/games/ directory
2. Copy the 2048 build output to public/games/2048/
3. Copy the Space Invaders build to public/games/space-invaders/
4. Make the "Play" buttons on the portfolio link to these paths
5. Add a "Back to Portfolio" link inside each game page

Die Spiele zuerst bauen:

cd ../game-2048 && npm run build
cd ../space-invaders && npm run build

Dann kopieren Sie die dist/-Ausgabe jedes Spiels nach my-portfolio/public/games/.

Multi-Projekt-Workflow

Die Arbeit ueber mehrere Projekte hinweg lehrt wichtige KI-Faehigkeiten:

Kontextwechsel:

• Wenn Sie zwischen Projekten wechseln, verliert die KI den Kontext
• Immer neu orientieren: "Ich arbeite jetzt am Portfolio-Projekt in /my-portfolio"
• Oder separate Terminal-Sitzungen pro Projekt verwenden

Projektuebergreifende Referenzen:

• "Style die Portfolio-Karten genauso wie die 2048-Spielplaettchen gestylt sind"
• Die KI kann Muster projektuebergreifend abgleichen, wenn Sie sie beschreiben

Abhaengigkeitsverwaltung:

• Jedes Projekt hat seine eigene package.json und node_modules
• Teilen Sie keine Abhaengigkeiten zwischen Projekten
• Das Portfolio ist unabhaengig -- es hostet nur die gebauten Spieldateien

Zentrale Erkenntnis: Echte Entwicklung umfasst mehrere zusammenhaengende Projekte. Ueben Sie jetzt das Verwalten von Kontext und Querverweisen.

Lektionen aus komplexen Projekten

Was sich aendert, wenn Projekte groesser werden:

Einfach (2048)	Komplex (Space Invaders + Portfolio)
Ein Prompt	Mehrere phasenweise Prompts
Einzelne Datei	Multi-Datei-Architektur
Keine AGENTS.md noetig	AGENTS.md ist unverzichtbar
Vibe Coding funktioniert	Spezifikationsgetriebener Ansatz erforderlich
Minuten zum Bauen	Stunden zum Bauen
Leicht zu verifizieren	Teststrategie noetig

Die goldene Regel: Mit wachsender Komplexitaet investieren Sie mehr in Vorausplanung und weniger in die Hoffnung, dass die KI es beim ersten Versuch richtig macht.

---quiz question: Warum ist eine Multi-Datei-Architektur fuer komplexe KI-gestuetzte Projekte wichtig? options:

• { text: "Sie macht das Projekt professioneller", correct: false }
• { text: "Jede Datei ist klein genug, damit die KI sie vollstaendig versteht, und Systeme koennen unabhaengig geaendert werden", correct: true }
• { text: "KI-Tools erfordern separate Dateien, um zu funktionieren", correct: false } feedback: Mit Multi-Datei-Architektur kann sich die KI auf eine ueberschaubare Datei zur Zeit konzentrieren, was die Fehlerwahrscheinlichkeit reduziert. Sie koennen auch ein System (wie Kollisionserkennung) aendern, ohne ein anderes (wie Rendering) zu gefaehrden.

---quiz question: Warum sollten Sie einen komplexen Projekt-Prompt in Phasen aufteilen statt in einen einzigen massiven Prompt? options:

• { text: "Um weniger API-Tokens zu verbrauchen", correct: false }
• { text: "Jede Phase kann verifiziert werden, bevor darauf aufgebaut wird, wodurch Probleme frueh erkannt werden", correct: true }
• { text: "KI-Modelle koennen nur 10 Zeilen gleichzeitig verarbeiten", correct: false } feedback: Phasenweise Entwicklung laesst Sie jede Komponente verifizieren, bevor Komplexitaet hinzugefuegt wird. Wenn die Spielschleife fehlerhaft ist, macht es keinen Sinn, Feinde hinzuzufuegen. Dieser Ansatz erkennt Probleme frueh und erleichtert das Debugging.