98 lines
3.4 KiB
Markdown
98 lines
3.4 KiB
Markdown
# Retro Arcade Platform — Design Spec
|
||
|
||
**Date:** 2026-03-31
|
||
|
||
## Overview
|
||
|
||
Erweiterung des bestehenden Snake-Spiels zu einer kleinen Retro-Arcade-Plattform mit vier Spielen. Alle Dateien sind plain HTML/CSS/JS, kein Build-Schritt, kein Server, kein Package Manager — direkt im Browser öffenbar.
|
||
|
||
## Spiele
|
||
|
||
1. **Snake** — bestehendes `snake.html`, minimal angepasst
|
||
2. **Tetris** — neu
|
||
3. **Breakout** — neu
|
||
4. **Space Invaders** — neu
|
||
|
||
## Dateistruktur
|
||
|
||
```
|
||
testprojekt/
|
||
├── index.html ← Startmenü (neu)
|
||
├── style.css ← gemeinsame Styles (neu)
|
||
├── scores.js ← Highscore-Logik (neu)
|
||
├── snake.html ← angepasst (shared assets einbinden)
|
||
├── tetris.html ← neu
|
||
├── breakout.html ← neu
|
||
└── spaceinvaders.html ← neu
|
||
```
|
||
|
||
## Architektur
|
||
|
||
### Gemeinsame Assets
|
||
|
||
**`style.css`**
|
||
- Navy/Teal-Theme: Hintergrund `#1a1a2e`, Akzent `#4ecca3`, Schrift `Courier New`
|
||
- Gemeinsame Klassen: Body-Layout, Überschriften, HUD, Canvas-Border, Overlay, Buttons, Game-Kacheln
|
||
- Wird von allen HTML-Dateien via `<link rel="stylesheet" href="style.css">` eingebunden
|
||
|
||
**`scores.js`**
|
||
- `getHighscore(game)` — liest aus `localStorage` (`hs_snake`, `hs_tetris`, `hs_breakout`, `hs_spaceinvaders`), gibt `0` zurück wenn kein Eintrag
|
||
- `setHighscore(game, score)` — speichert nur wenn `score > getHighscore(game)`
|
||
- Wird via `<script src="scores.js"></script>` eingebunden
|
||
|
||
### Startmenü (`index.html`)
|
||
|
||
- Titel: "RETRO ARCADE" in Teal, zentriert
|
||
- 2×2 Grid mit einer Kachel pro Spiel
|
||
- Jede Kachel zeigt: Spielname + aktuellen Highscore (gelesen beim Seitenload via `scores.js`)
|
||
- Klick auf Kachel → öffnet die jeweilige Spieldatei (`href="snake.html"` etc.)
|
||
- Highscores werden beim Öffnen von `index.html` frisch aus `localStorage` gelesen — immer aktuell
|
||
|
||
### Einzelne Spiele
|
||
|
||
Jedes Spiel bekommt:
|
||
- `<link rel="stylesheet" href="style.css">` und `<script src="scores.js"></script>` im Head
|
||
- "← Menü"-Button oben links, verlinkt auf `index.html`
|
||
- Beim Game Over: `setHighscore('tetris', score)` (bzw. jeweiliger Spielname) aufrufen, bevor der Overlay angezeigt wird
|
||
- Spielspezifische Styles (z.B. Tetris-Blockfarben) inline im jeweiligen `<style>`-Block
|
||
|
||
### Snake-Anpassung
|
||
|
||
`snake.html` wird minimal geändert:
|
||
- Inline-CSS für gemeinsame Stile auf `style.css` auslagern
|
||
- `scores.js` einbinden
|
||
- "← Menü"-Button hinzufügen
|
||
- `setHighscore('snake', score)` bei Game Over aufrufen
|
||
|
||
## Highscore-Speicherung
|
||
|
||
| localStorage-Key | Spiel |
|
||
|---------------------|---------------|
|
||
| `hs_snake` | Snake |
|
||
| `hs_tetris` | Tetris |
|
||
| `hs_breakout` | Breakout |
|
||
| `hs_spaceinvaders` | Space Invaders|
|
||
|
||
Ein Highscore wird nur überschrieben wenn der neue Score höher ist.
|
||
|
||
## Visueller Stil
|
||
|
||
Einheitliches Navy/Teal-Theme, abgeleitet vom bestehenden Snake-Design:
|
||
|
||
- Background: `#1a1a2e`
|
||
- Akzentfarbe: `#4ecca3`
|
||
- Text: `#e0e0e0`
|
||
- Sekundärtext: `#a0a0c0`
|
||
- Schrift: `'Courier New', monospace`
|
||
- Canvas/Kachel-Border: `2px solid #4ecca3`, Glow via `box-shadow`
|
||
|
||
Jedes Spiel behält seine eigenen Spielmechanik-spezifischen Farben (z.B. Tetris-Blockfarben), aber das Rahmenlayout (HUD, Overlay, Menübutton) ist identisch.
|
||
|
||
## Nicht im Scope
|
||
|
||
- Sound / Musik
|
||
- Mobile-Touch-Steuerung
|
||
- Globale Ranglisten / Server
|
||
- Animierte Übergänge zwischen Spielen
|
||
- Schwierigkeitsstufen
|