Ein Browser-Spiel im Flappy-Bird-Stil mit vollem Story-Modus. Arthur, ein mutiger Leuchtfisch, muss seine Freundin Sara aus den Klauen von Juri, dem Killerfischhund, retten – durch fünf Levels vom Korallenriff bis in den Unterwasser-Vulkan.
index.html in einem modernen Browser öffnen. Keine Installation,
keine Abhängigkeiten. Fürs Speichern der Highscores empfiehlt sich ein
lokaler Server:
python3 -m http.server 8000
Dann http://localhost:8000 aufrufen.
Story-Modus – 5 Levels mit Cutscenes, zwei Boss-Kämpfen und Happy End:
| # | Level | Theme | Ziel-Score | Besonderheit |
|---|---|---|---|---|
| 1 | Das verschwundene Leuchten | Riff | 8 | Einstieg |
| 2 | Die Fisch-Unterwelt | Unterwelt | 10 | Neon-Algen, Schätze |
| 3 | Kays Angriff! | Ruinen | 12 | Boss: Kay |
| 4 | Der Abgrund – Juris Reich | Abyss | 14 | Dunkel, Anglerfische |
| 5 | Der letzte Kampf | Vulkan | 14 | Boss: Juri |
Endlos-Modus – klassisches Flappy mit drei Schwierigkeitsgraden und Highscore-Liste pro Stufe.
| Aktion | Eingabe |
|---|---|
| Schwimmen hoch | Leertaste, Klick oder Tap |
| Pause | P oder Pause-Symbol |
| Cutscene weiter | Leertaste/Klick/Tap |
- Arthur – Leuchtfisch, Protagonist, blau mit glühenden Flossen
- Sara – Arthurs Freundin, von Juri gefangen gehalten
- Juri – Killerfischhund, Herrscher der Unterwelt (Endboss)
- Kay – Mechanischer Tintenfisch-Dieb (Zwischen-Boss)
- Alina & Leon – Fliegende Riesenkraken, die Retter im Finale
- Qualle – Botin, bringt Arthur die schlimme Nachricht
| Objekt | Wirkung |
|---|---|
| Perle | +5 Punkte |
| Schatztruhe | +10 Punkte |
| Magische Muschel | +20 Punkte |
| Blasenschild | 1 Treffer-Schutz |
| Sauerstoffblase | 2 Treffer-Schutz |
| Leuchtblitz | Trifft Boss, zerstört alle Projektile |
| Tintenwolke | Kurzzeitig unsichtbar (~3s) |
Kay (Level 3): Mechanischer Tintenfisch mit Tintenraketen. 3 HP. Zwei Wege zum Sieg:
- Leuchtblitze einsammeln und ihn 3x treffen
- oder 18 Sekunden ausweichen
Juri (Level 5): Lava-Fischhund mit Feuerkugeln. 3 HP.
- Leuchtblitze nutzen oder 25 Sekunden überstehen.
arthurs-bossfight/
├── index.html # Einstieg + DOM-Overlays
├── README.md
├── css/
│ └── style.css
└── js/
├── storage.js # Highscore-Persistenz
├── sound.js # Web-Audio-SFX
├── background.js # Parallax mit 6 Themes
├── bird.js # Arthur (Fisch) Physik & Rendering
├── pipe.js # Korallen-Säulen
├── pearl.js # 7 Sammel-/Power-Up-Typen
├── story.js # Level- & Charakter-Daten, Dialoge
├── cutscene.js # Cutscene-Renderer mit Portraits
├── boss.js # Kay & Juri Boss-Mechaniken
├── menu.js # DOM-UI
├── game.js # Engine mit Story- & Endlos-Mode
└── main.js # Glue, Input
Die Engine nutzt eine State-Machine mit folgenden Zuständen:
menu → cutscene → playing → (boss) → cutscene (outro) → ... → victory.
Jedes Level definiert eigene Pipe-Parameter, Collectible-Pools und
einen optionalen Boss. Der Story-Modus nutzt das Level-System, um
automatisch durch die Kampagne zu leiten; der Endlos-Modus umgeht das
und nutzt stattdessen feste Schwierigkeitsgrade.
Der Delta-Time-Loop normalisiert alle Bewegungen auf einen 60-fps-Frame
(dt = 1.0), damit das Spiel auf 144 Hz und 60 Hz identisch wirkt.
Parallax-Hintergründe haben 6 Themes (reef, underworld, ruins, abyss, volcano, sky). Jedes Theme definiert Wasserfarben, Lichtstrahlen, Kelp-Farbton, Partikel-Stil und die Silhouetten der fernen Kreaturen.
Beispiel-Projekt – frei verwendbar.