Der Klimawächter ist kein Spiel um einen high score. Er soll Schülerinnen und Schülern der 1.–4. Klasse Sekundarstufe I (ca. 10–14 Jahre) vermitteln, dass:
TypeScript + Vite (keine Framework-Schicht)Three.js für die 3D-Versiongame.html, game-3d.html, erdbeben.html, energiemix.html)| Datei | Rolle |
|---|---|
src/core/game-engine.ts | Abstract base: Ticks, Resources, Goals, Save/Load, Subscribe-Pattern, Citizen-Events |
src/ui/game-ui.ts | Wiederverwendbare UI-Komponente mit Panels, Graphen, Auto-Save, End-Screen |
src/ui/info-overlay.ts | Kindgerechte Begriffserklärungen (Info-Buttons öffnen Overlay) |
src/sims/sim-05-treibhaus/game.ts | Klimawächter-Spiellogik |
src/sims/sim-05-treibhaus/game-renderer.ts | 2D-Canvas-Renderer |
src/sims/sim-05-treibhaus-3d/game-renderer-3d.ts | Three.js 3D-Renderer |
Alle Spielstände werden pro Spiel-ID in localStorage persistiert. Version-Bump (v2) verhindert, dass alte inkonsistente Saves geladen werden. Ein resetting-Flag verhindert, dass der beforeunload-Handler beim Reset sofort wieder speichert.
Es existiert ein automatischer Test unter tests/unit/sim-05-trace.test.ts, der das Spiel rein rechnerisch über 75 Jahre für verschiedene Strategien durchspielt und die Werte tabellarisch ausdruckt. Starten mit:
npx vitest run sim-05-trace --reporter=verbose
| Strategie | Ergebnis 2100 | Status |
|---|---|---|
| Nichts tun | Temp 17.9°C, Flut 52% | ❌ |
| Nur Wälder | Temp 17.1°C | ❌ (knapp) |
| Nur Solar | Temp 15.5°C, Budget knapp | ✅ |
| Nur Wind | Temp 15.5°C, Budget ok | ✅ |
| Nur Deiche | Temp 17.9°C — Klima läuft durch | ❌ |
| Wälder + Solar | grenzwertig — meist verloren | ⚠️ |
| Solar + Wind + 1 Deich | alle Goals ✅ | ✅ |
serializeSubclass() Hook.resetting-Flag.Jede Aktion → debounced Save nach 1.5 s. Sofortiges Save bei Tab-Wechsel oder Page-Verlassen. Auto-Load beim erneuten Öffnen.
Modaler Dialog mit Avatar, Message und 2–3 Choice-Karten. Jede Wahl hat echte Konsequenzen. Spiel pausiert automatisch bis der Spieler entscheidet. Bibliothek: 7 Events über die 75 Jahre verteilt (Fischerin, Forscherin, Bauer, Hotel, Jugend-Streik, Industrie, Bergdorf).
Im Header oben rechts (🔄). Löscht den Save-Slot und lädt die Seite neu.
Save/Load/Finish/Reset/Home sind jetzt reine Symbole mit Tooltips. Speed-Buttons mit Zahlen (×1, ×2, ×4) und Kamera-Controls (＋, −, ⊙) sind in den Header gewandert. Das spart Platz unten und macht die Graphen größer.
GameUI unterstützt mode: 'guided' mit totalDurationSec. Im Guided-Mode wird msPerTick automatisch so gesetzt, dass das Spiel genau die vorgegebene Zeit dauert, und Speed-Buttons > 1 sind unsichtbar. Bereit für späteres Lehrer-Backend.
Neue Ressource ⚡ Strom, Anzeige als „Bedarf/Kapazität MW" in der Status-Box. Bedarf = 1 MW pro 1.000 Einwohner. Kapazität ergibt sich aus den gebauten Kraftwerken:
Bei Stromausfall (Bedarf > Kapazität): siehe nächste Karte.
Wenn der Strom ausfällt, fällen die Bewohner pro Jahr 2 Bäume und verheizen das Holz. Konsequenzen:
Game führt einen Counter treesChoppedForHeat; Renderer liest ihn pro Frame und tötet die Differenz an lebendigen Bäumen.
Neue Methode game.demolishMeasure(id). UI: 🗑-Button auf jeder Karte mit count>0. Renderer entfernt das zuletzt platzierte Mesh, gibt Geometrie/Material frei. Erlaubt Reparatur falscher Frühentscheidungen (z.B. Kohlekraftwerk wieder loswerden, sobald Wind genug liefert).
Citizen-Event „Lina, die Fischerin" war auf Tick 4 — viel zu früh. Ist jetzt auf Tick 15 (≈ 1 Minute Spielzeit). Spieler kann zuerst seine Strom-Versorgung in den Griff bekommen, bevor das erste Bürger-Dilemma kommt.
Ein DifficultyConfig-System mit 3 Levels (🟢/🟡/🔴) bestimmt Startbudget, Steuern, Stromausfall-Schonfrist und die Härte der Klima-Folgen. Spieler wählt beim ersten Start in einem Selector-Overlay; danach klickt er das Level-Badge oben in der Topbar, um zu wechseln (mit Bestätigung, weil das Spiel neu startet).
URL-Parameter ?level=N erzwingt ein Level (für späteren Lehrer-Override). Save-File enthält das Level für Resume.
Alle Maßnahmen-Werte (Cost, Upkeep, CO₂-Wirkung, Schutz) erneut halbiert — gleicher Effekt pro Mio €, aber doppelt so viele individuelle Bauschritte. Mehr Streuung, mehr Spielmöglichkeiten.
Wald-Upkeep zusätzlich auf 0.5 Mio €/Jahr reduziert (statt 1) — damit ist Wald jetzt die günstigste Option pro CO₂-Reduktion (12.5 Mio €/ppm vs Wind 15, Solar 17.9). Das passt zur didaktischen Erwartung „Bäume sind die Naturlösung".
Kleine Tabelle direkt unter dem Budget-Wert in der Status-Box zeigt: + Steuern, (+ Tourismus), − Wartung, (− Klima-Schaden), = Netto pro Jahr. Tourism- und Klima-Zeilen sind dynamisch sichtbar. Netto wird grün/rot gefärbt. Lebt mit der gedämpften Display-Animation.
Hat in der ersten Spielanalyse sofort sichtbar gemacht, dass eine Bilanz von −9 Mio €/Jahr auf Dauer nicht überleben kann.
Der Holzsteg am vorderen Strand hat jetzt eine schräge Holz-Rampe, die vom Inland-Niveau (auf der Insel selbst) hochsteigt zur Plankenkante (Y=0.85). Damit bleibt der Steg auch bei steigendem Meeresspiegel über die Rampe erreichbar. Die Rampe sitzt physisch auf dem Inselhang und wird vom Wasser nicht überspült.
Aktuell könnte ein Spieler theoretisch nur Deiche/Hochwasserschutz bauen und ignorieren, dass CO₂ die Ursache ist — solange Temperatur knapp unter 17 °C bleibt. Das vermittelt die falsche Lektion „Mauern reichen". Ideen zum Adressieren:
Wichtig für die nächste Iteration — adressiert die Kernfrage „Sind Deiche wirklich eine gute Lösung?" (Antwort: nur als Pflaster, nicht als Heilung).
Option A aus dem ursprünglichen Interaktions-Konzept. Maßnahmen werden aus dem Shop auf die 3D-Insel gezogen, statt automatisch platziert. Standortabhängige Wirkung: Solar im Vulkan-Schatten = −20% Effizienz, Wind am Hang = +20% etc.
Voraussetzung für Phase C (Wohnungsbau): Sobald Schüler Häuser kauft, muss er sie auch SETZEN können — sonst frustrierend.
SimCity-artige Bevölkerungsdynamik:
Bei Sturmflut, Hitzewelle, Murenabgang ein kurzes (10–20 s) Klick-Mini-Spiel. Erfolg mildert den Schaden.
Beide Renderer (2D und 3D) bilden die Insel nicht mehr als Pfannkuchen ab, sondern als geneigtes Plateau. Die vordere (niedrige) Seite taucht absichtlich ins Wasser — so ist schon am Start sichtbar, dass man nicht die ganze Insel retten kann.
landSurface(x)-Helper interpoliert Y-Koordinate für Platzierung von Häusern, Bäumen, Solaranlagen.Im 3D-Renderer steht ein erloschener Vulkan am hohen Ende der Insel. Sein oberes Drittel ist von einem opaken Gletscher-Deckel bedeckt. Der Deckel schrumpft mit steigender Temperatur:
Im 2D-Renderer wird derselbe Gletscher-Deckel als Trapez mit Alpha-loser Farbverschiebung dargestellt.
Jedes Starthaus im 3D hat eine kleine graue Sphere-Wolke über dem Dach. Sobald der Spieler Solar oder Gründächer baut, verschwindet pro Anlage eine Wolke. Direkte visuelle Verbindung zwischen Maßnahme und Effekt.
Die neue GraphConfig unterstützt:
Graphen sind jetzt etwa doppelt so groß wie vorher (90 px statt ca. 36 px Höhe).
Das neue info-overlay.ts-Modul bietet eine Bibliothek kindgerechter Erklärtexte. Jeder Graph und jedes wichtige Event hat einen (i)-Button, der ein Overlay öffnet. Zielgruppe: 10–14 Jahre, einfache Sätze, max. 3 Absätze plus "Merksatz".
src/ui/info-overlay.ts als INFO_TOPICS-Objekt zentralisiert und können leicht ergänzt werden. Aufruf: openInfoOverlay(INFO_TOPICS.co2)
Bisher hat das Spiel folgende Folgen von Temperatur- und Meeresspiegelanstieg modelliert:
| Folge | Auslöser | Wirkung |
|---|---|---|
| Häuser werden überflutet | Sealevel > 35 cm (nach Protection) | Bevölkerungsrückgang |
| Vegetation stirbt (Mangroven, Felder) | Sealevel > 20 cm | Warn-Event mit Info-Overlay |
| Trinkwasser versalzt | Sealevel > 35 cm | Budget-Abzug pro Jahr + Bevölkerungsrückgang |
| Gletscher schmilzt | Temp > 16.8 °C | Warn-Event, visueller Schrumpf |
| Bergdorf gefährdet | Temp > 16.5 °C (Tick 50) | Citizen-Event (Anna vom Bergdorf) |
landSurface(x) prüfen (Häuser auf dem Keil, nicht auf dem alten groundY)game.html, erdbeben.html, energiemix.html) einbaueninfoKey versehen (mehr Kontext für Kinder)game_runs als CSV