testprojekt/docs/superpowers/specs/2026-03-31-retro-arcade-platform-design.md

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