Die Herausforderung

2048 ist ein Schiebepuzzle, bei dem Sie nummerierte Kacheln kombinieren:

• 4x4-Raster mit Kacheln
• Kacheln gleiten, wenn Sie die Pfeiltasten druecken
• Gleiche Kacheln verschmelzen (2+2=4, 4+4=8 usw.)
• Ziel: eine Kachel mit der Zahl 2048 erstellen
• Game Over, wenn keine Zuege mehr moeglich sind

Wir generieren dieses gesamte Spiel mit einem Prompt. Kein manuelles Coden.

Was Sie lernen werden:

• Wie viel ein einzelner Prompt produzieren kann
• Wann man eingreifen vs. die KI arbeiten lassen sollte
• Wie man KI-generierten Code iteriert

Das Projekt aufsetzen

Erstellen Sie ein frisches Projekt fuer diese Uebung:

npm create vite@latest game-2048 -- --template vanilla
cd game-2048
npm install
npm run dev

Oeffnen Sie jetzt Ihren KI-Coding-Agenten im selben Verzeichnis:

opencode  # oder: claude

Stellen Sie sicher, dass Ihr Dev-Server unter http://localhost:5173 laeuft, bevor Sie fortfahren.

Der einzelne Prompt

Hier ist der Prompt. Kopieren Sie ihn exakt -- der Detailgrad ist beabsichtigt:

Build a complete 2048 game in this Vite project.

Requirements:
- 4x4 grid with sliding number tiles
- Arrow keys to move tiles (up/down/left/right)
- Tiles with the same number merge when pushed together
- New tile (2 or 4) appears after each move in a random empty cell
- Score counter that tracks points (earned by merging tiles)
- "New Game" button to restart
- Game over detection (no valid moves remaining)
- Win detection (2048 tile created)
- Smooth CSS animations for sliding and merging

Visual design:
- Centered on page, clean modern look
- Each tile number has a distinct background color
- Dark rounded tiles on a lighter board
- Score displayed prominently above the board
- Responsive — works on mobile (swipe support is a bonus)

Implement everything in index.html, main.js, and style.css.
Use no external libraries.

Fuegen Sie dies in Ihren KI-Agenten ein und lassen Sie ihn arbeiten.

Was Sie erwarten koennen

Die KI wird typischerweise:

1. index.html umschreiben -- Spielbrett-Container, Punktestand-Anzeige, Buttons
2. Spiellogik in main.js erstellen -- Raster-Zustand, Bewegung, Verschmelzung, Punktezhlung
3. Alles in style.css stylen -- Raster-Layout, Kachel-Farben, Animationen

Haeufige Muster im KI-generierten 2048:

• Das Raster ist meist ein 2D-Array: [[0,0,2,0],[0,4,0,0],...]
• Bewegungsfunktionen fuer jede Richtung (links, rechts, hoch, runter)
• Farbzuordnung: {2: '#eee4da', 4: '#ede0c8', 8: '#f2b179', ...}
• CSS Grid oder Flexbox fuer das Spielbrett-Layout

Was beim ersten Versuch meist funktioniert:

• Grundlegendes Raster-Rendering
• Kachelbewegung und Verschmelzung
• Punkteverfolgung
• Visuelles Design

Was manchmal Iteration braucht:

• Animationsfluessigkeit
• Grenzfaelle in der Verschmelzungslogik (z.B. 2-2-2-2 sollte 4-4 ergeben, nicht 8)
• Mobile Touch-/Swipe-Unterstuetzung
• Game-Over-Erkennung (muss ALLE moeglichen Zuege pruefen)

Am Ergebnis iterieren

Nach der ersten Generierung oeffnen Sie http://localhost:5173 und spielen Sie das Spiel.

Haeufige Probleme und wie man sie behebt:

Wenn Kacheln nicht korrekt verschmelzen:

Die Verschmelzungslogik hat einen Bug: wenn ich [2, 2, 2, 2] habe
und nach links schiebe, entsteht [8] aber es sollte [4, 4] sein.
Jede Kachel sollte nur einmal pro Zug verschmelzen. Behebe die
Merge-Funktion in main.js.

Wenn Animationen ruckeln:

Die Kachel-Animationen sind ruckelig. Verwende CSS-Transitions
(transform und opacity, 150ms ease-in-out) anstelle von
JavaScript-Animation. Kacheln sollten sanft an ihre neue
Position gleiten.

Wenn Game Over nicht ausloest:

Die Game-Over-Erkennung ist fehlerhaft -- sie prueft nur, ob das
Board voll ist, aber nicht, ob benachbarte Kacheln verschmelzen
koennen. Korrigiere es, um alle vier Richtungen auf moegliche
Verschmelzungen zu pruefen.

Jede Iteration sollte sich auf EIN spezifisches Problem konzentrieren. Bitten Sie die KI nicht, alles auf einmal zu reparieren.

Feinschliff hinzufuegen

Sobald das Kernspiel funktioniert, fuegen Sie den Feinschliff hinzu:

Add these polish features to the 2048 game:

1. Best score — save to localStorage, show next to current score
2. Tile pop animation — new tiles should scale from 0 to 100%
   over 100ms when they appear
3. Merge animation — merged tiles briefly scale to 120% then back
4. Keyboard shortcut — press 'R' to restart
5. Mobile swipe support — detect touch gestures for movement

Dieser zweite Prompt liefert typischerweise 90%+ des Gewuenschten. Die KI hat den vollen Kontext des bestehenden Codes und kann Features inkrementell hinzufuegen.

Was wir gelernt haben

Diese Uebung demonstriert mehrere Schluesselprinzipien:

1. Die 80/20-Regel: Ein einziger guter Prompt bringt Sie 80% des Weges. Die restlichen 20% erfordern gezielte Iteration.

2. Spezifitaet zaehlt: "Bau ein 2048-Spiel" liefert viel schlechtere Ergebnisse als unser detaillierter Prompt mit visuellen Design-Spezifikationen und Grenzfall-Anforderungen.

3. Schmal iterieren: Reparieren Sie jeweils eine Sache. "Behebe den Merge-Bug" ist besser als "behebe alle Bugs."

4. KI glaenzt bei klar definierten Problemen: 2048 hat klare Regeln -- die KI weiss genau, wie korrektes Verhalten aussieht.

5. Ueberpruefen ist essentiell: Selbst funktionierender Code kann subtile Bugs haben (wie das Doppel-Merge-Problem), die erst beim Spielen auffallen.

Herausforderung: Versuchen Sie, dasselbe Spiel von Hand zu bauen. Dann vergleichen Sie: Wie lange hat die KI vs. manuelles Coding gebraucht? Wie vergleicht sich die Code-Qualitaet?

---quiz question: Was sollte in einem 2048-Spiel passieren, wenn [2, 2, 2, 2] nach links geschoben wird? options:

• { text: "[8, 0, 0, 0] -- alles verschmilzt zu einem", correct: false }
• { text: "[4, 4, 0, 0] -- jede Kachel verschmilzt nur einmal pro Zug", correct: true }
• { text: "[2, 4, 2, 0] -- nur benachbarte Paare verschmelzen", correct: false } feedback: Jede Kachel kann nur einmal pro Zug verschmelzen. Also wird [2,2,2,2] zu [4,4,0,0] -- das erste Paar verschmilzt zu 4 und das zweite Paar verschmilzt zu 4. Das ist ein haeufiger KI-Bug, auf den man achten sollte.

---quiz question: Was ist die wichtigste Lektion aus dem Bau von 2048 mit einem einzigen Prompt? options:

• { text: "KI kann keine vollstaendigen Anwendungen bauen", correct: false }
• { text: "Ein detaillierter Prompt bringt Sie 80% des Weges, dann erledigt gezielte Iteration den Rest", correct: true }
• { text: "Man sollte KI-generierten Code nie ueberpruefen", correct: false } feedback: Die 80/20-Regel des KI-Codings -- ein sorgfaeltig ausgearbeiteter Prompt erzeugt den Grossteil des funktionierenden Codes, aber Sie brauchen gezielte Iteration, um Grenzfaelle zu beheben und das Ergebnis zu polieren.