docs: update PLAN.md development log with completed Story Mode phase and mobile roadmap
This commit is contained in:
parent
1577c68564
commit
3765333a66
148
PLAN.md
148
PLAN.md
@ -1,119 +1,49 @@
|
|||||||
# Chemie-Lernspiel Upgrade-Plan
|
# Chemie-Lernspiel Entwicklungs-Log & Roadmap
|
||||||
|
|
||||||
Dieses Dokument beschreibt die geplanten Erweiterungen für das Alchemie-Labor-Chemie-Lernspiel im Verzeichnis `chemie-spiel-dev`.
|
Dieses Dokument dokumentiert die erfolgreich abgeschlossenen Entwicklungsphasen und legt die Roadmap für zukünftige Versionen fest.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 1. Ziele des Upgrades
|
## 🏆 Abgeschlossene Phasen
|
||||||
- **Lernwert steigern:** Spieler erhalten spannende und verständliche Fakten über die entdeckten Moleküle.
|
|
||||||
- **Gamification:** Ein "Entdecker-Buch" (Lexikon/Bibliothek) im Sidebar motiviert dazu, alle Moleküle freizuschalten. Fortschritt wird im Browser (`localStorage`) gespeichert.
|
### Phase 1: Der erste Prototyp (Sandbox-Kern)
|
||||||
- **Visuelles Feedback & Saftigkeit (Juiciness):** Reaktionen erzeugen Partikel-Explosionen, Atome sehen aus wie 3D-Kugeln, und das Interface fühlt sich dynamischer an.
|
- **Drag & Drop System:** Atome können frei auf dem Labortisch gezogen und miteinander kollidiert werden.
|
||||||
- **Mehr Inhalt:** Zusätzliche Elemente (Schwefel, Eisen) und 12 neue Reaktionen (insgesamt 18 Rezepte).
|
- **8 Grundelemente:** Wasserstoff (H), Helium (He), Kohlenstoff (C), Stickstoff (N), Sauerstoff (O), Natrium (Na), Chlor (Cl), Schwefel (S), Eisen (Fe).
|
||||||
|
- **18 Rezepturenbuch:** Chemisch exakte Fusionsrezepte für Moleküle wie Wasser ($H_2O$), Salz ($NaCl$), Methan ($CH_4$), Salzsäure ($HCl$), Ammoniak ($NH_3$), etc.
|
||||||
|
- **Entdecker-Buch (Lexikon):** Sidebar-Lexikon, das den Fortschritt anzeigt, unentdeckte Rezepte verschlüsselt (`🔒 ???`) und freigeschaltete mit Alltags-Fakten anzeigt. Der Spielfortschritt persistiert im `localStorage`.
|
||||||
|
- **Partikel-Explosion:** Physikalisch animierte Farbfunken (Web Animations API) schießen bei erfolgreicher Synthese aus dem Fusionszentrum.
|
||||||
|
- **3D-Scherenmodell:** Atome haben durch CSS-Radial-Gradients ein plastisches 3D-Kugel-Aussehen.
|
||||||
|
|
||||||
|
### Phase 2: Das interaktive PSE-Cockpit (Option 1)
|
||||||
|
- **Periodensystem-Overlay:** Ein Klick auf "📊 Periodensystem" öffnet ein vollflächiges, dunkles Periodensystem-Interfache (CSS Grid, 18 Spalten x 4 Zeilen).
|
||||||
|
- **Wissenschaftliche Steckbriefe:** Detaillierte Karten für jedes Element mit Ordnungszahl, Atommasse, Gruppenbezeichnung und Alltagsvorkommen.
|
||||||
|
- **Aktives Schalenmodell (Bohr-Modell):** Eine dynamische Schalen-Visualisierung berechnet die Kreisbahnen der Elektronen trigonometrisch und lässt sie in flüssiger Bewegung rotieren. Jedes Atom hat seine reale Elektronenkonfiguration (z. B. Natrium: 2, 8, 1 Schalen).
|
||||||
|
- **Direktes Spawnen:** Elemente können direkt aus dem PSE-Steckbrief auf den Tisch gespawnt werden.
|
||||||
|
|
||||||
|
### Phase 3: Der Story-Modus (Missions-Zentrale)
|
||||||
|
- **Kampagnen-System:** Ein Umschalter zwischen "🧪 Sandbox" und "🏆 Story-Modus" in der Sidebar.
|
||||||
|
- **Kapitelbasierte Level:**
|
||||||
|
1. *Level 1: Die salzige Suppe* (Ziel: $NaCl$ Kochsalz)
|
||||||
|
2. *Level 2: Das Lebenselixier* (Ziel: $H_2O$ Wasser)
|
||||||
|
3. *Level 3: Der Mülleimerbrand* (Ziel: $CO_2$ Kohlendioxid)
|
||||||
|
4. *Level 4: Dünger für die Ernte* (Ziel: $NH_3$ Ammoniak)
|
||||||
|
5. *Level 5: Die Verdauungshilfe* (Ziel: $HCl$ Salzsäure)
|
||||||
|
- **Professor Atomus NPCs:** Ein stilisierter Avatar des Professors führt den Spieler mit Dialogen durch die Quests, gibt Hinweise und gratuliert zum Erfolg.
|
||||||
|
- **Level-Beschränkungen (Constraints):** Jedes Level schaltet nur diejenigen Elemente frei, die chemisch sinnvoll sind. Andere Elemente sind gesperrt, um den Lernpfad zu kanalisieren.
|
||||||
|
- **Erfolgs-Zertifikat:** Nach Abschluss des fünften Levels wird das Spiel offiziell mit einem Meistertitel gekrönt.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2. Detaillierte Features
|
## 🚀 Zukünftige Roadmap (Für die mobile App)
|
||||||
|
|
||||||
### A. Element- & Rezept-Erweiterung
|
### Phase 4: Molekül-Reaktionen (Säure-Base-Interaktionen)
|
||||||
Wir führen zwei neue Basiselemente ein:
|
- **Mehrstufige Reaktionen:** Ermöglichen von Kollisionen zwischen Atomen und Molekülen sowie Molekülen mit Molekülen.
|
||||||
- **Schwefel (S)** (Gelb, `#f1c40f`)
|
- **Beispiel:** Salzsäure ($HCl$) + Natronlauge ($NaOH$) $\rightarrow$ Kochsalz ($NaCl$) + Wasser ($H_2O$) (Klassische Neutralisation!).
|
||||||
- **Eisen (Fe)** (Metallisch-Grau, `#95a5a6`)
|
|
||||||
|
|
||||||
Damit erweitern wir das Rezeptbuch um folgende spannende Kombinationen:
|
### Phase 5: Multimedia & Grafik-Erweiterung
|
||||||
1. **H₂O (Wasser)**: 2x H + 1x O
|
- **Bilder & Animationen:** Ersatz der einfachen Kreise durch kunstvolle Texturen oder Element-Avatare.
|
||||||
2. **NaCl (Kochsalz)**: 1x Na + 1x Cl
|
- **Soundeffekte (SFX):** Integrieren von Audio-Signalen bei Reaktionen ("Zisch!", "Plopp!", "Puff!").
|
||||||
3. **O₂ (Sauerstoff)**: 2x O
|
|
||||||
4. **CO₂ (Kohlendioxid)**: 1x C + 2x O
|
|
||||||
5. **CH₄ (Methan)**: 1x C + 4x H
|
|
||||||
6. **NH₃ (Ammoniak)**: 1x N + 3x H
|
|
||||||
7. **HCl (Salzsäure)**: 1x H + 1x Cl
|
|
||||||
8. **NaOH (Natronlauge)**: 1x Na + 1x O + 1x H
|
|
||||||
9. **H₂S (Schwefelwasserstoff)**: 2x H + 1x S
|
|
||||||
10. **FeS (Eisensulfid)**: 1x Fe + 1x S
|
|
||||||
11. **SO₂ (Schwefeldioxid)**: 1x S + 2x O
|
|
||||||
12. **CO (Kohlenmonoxid)**: 1x C + 1x O
|
|
||||||
13. **H₂O₂ (Wasserstoffperoxid)**: 2x H + 2x O
|
|
||||||
14. **HCN (Blausäure)**: 1x H + 1x C + 1x N
|
|
||||||
15. **N₂ (Stickstoff)**: 2x N
|
|
||||||
16. **Cl₂ (Chlor)**: 2x Cl
|
|
||||||
17. **H₂ (Wasserstoff)**: 2x H
|
|
||||||
18. **C₂H₄ (Ethen)**: 2x C + 4x H
|
|
||||||
|
|
||||||
### B. Das Entdecker-Buch (Lexikon)
|
### Phase 6: Mobile Plattform-Portierung (iOS / Android)
|
||||||
- Befindet sich in der Sidebar unter der Elementen-Auswahl.
|
- **Entwicklungs-Framework:** Portierung in die **Godot Engine** (Open Source, extrem leichtgewichtig, perfekt für 2D-Physik und mobile UI-Skalierung).
|
||||||
- Zeigt den aktuellen Fortschritt an (z. B. "Entdeckt: 2 / 18").
|
- **Backend & Logins:** Cloud-Saves mit Firebase, damit Benutzer sich registrieren und ihren Spielstand geräteübergreifend synchronisieren können.
|
||||||
- Ungelöste Rezepte werden als ausgegraute Fragezeichen dargestellt (z. B. `??? (H₂O)` oder komplett anonymisiert).
|
|
||||||
- Entdeckte Moleküle leuchten auf, zeigen ihren vollen Namen und können angeklickt werden, um die Info-Karte erneut zu öffnen.
|
|
||||||
- Speicherung des Fortschritts in `localStorage`.
|
|
||||||
|
|
||||||
### C. Info-Modal (Pop-up)
|
|
||||||
- Sobald eine Reaktion stattfindet, öffnet sich ein wunderschönes Modal (verdunkelter, weichgezeichneter Hintergrund).
|
|
||||||
- Inhalt:
|
|
||||||
- Großer Titel mit der chemischen Formel (z. B. **H₂O (Wasser)**).
|
|
||||||
- Ein kurzes, interessantes "Wusstest du schon?"-Faktum (z. B. über die Giftigkeit von Natrium und Chlor einzeln vs. die Harmlosigkeit von Kochsalz).
|
|
||||||
- Ein "Schließen"-Button, der das Modal schließt und den Spielfluss fortsetzt.
|
|
||||||
|
|
||||||
### D. Visuelle Effekte & Animationen
|
|
||||||
- **Partikel-Explosion:** Bei einer erfolgreichen Reaktion fliegen 10-15 kleine, farbige Funken vom Reaktionszentrum in alle Richtungen weg und verblassen.
|
|
||||||
- **3D-Atome:** Atome erhalten einen radialen Farbverlauf, der ihnen ein plastisches, rundes Aussehen verleiht.
|
|
||||||
- **Tisch-Statistiken:** Ein kleiner Counter zeigt an, wie viele Atome und Moleküle sich gerade auf dem Tisch befinden.
|
|
||||||
- **Tisch leeren:** Ein Papierkorb-Button löscht alle Elemente vom Tisch, um Platz für neue Experimente zu schaffen.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Schritt-für-Schritt-Implementierung
|
|
||||||
|
|
||||||
### Schritt 1: HTML-Struktur aktualisieren (`index.html`)
|
|
||||||
- Neue Buttons für Schwefel (S) und Eisen (Fe) hinzufügen.
|
|
||||||
- Eine Sektion `#discovery-book` in der Sidebar einbauen.
|
|
||||||
- Den "Tisch leeren"-Button und die Statistik-Zähler im Labor-Tisch ergänzen.
|
|
||||||
- Das `#info-modal` Container-Skelett am Ende des Bodys hinzufügen.
|
|
||||||
|
|
||||||
### Schritt 2: CSS-Styling verfeinern (`style.css`)
|
|
||||||
- Sidebar-Scrollbarkeit verbessern, falls das Lexikon lang wird.
|
|
||||||
- Modernes Styling für das Modal (`position: fixed`, Flexbox-Zentrierung, `backdrop-filter: blur(5px)`).
|
|
||||||
- 3D-Look für Atome via Radial-Gradient (`background: radial-gradient(circle at 30% 30%, color 0%, darkcolor 100%)`).
|
|
||||||
- Schönes Design für das Entdecker-Buch (Grid oder List-Layout, Transitionen beim Freischalten).
|
|
||||||
- Partikel-CSS-Klasse für die Reaktionsexplosion.
|
|
||||||
|
|
||||||
### Schritt 3: JavaScript-Logik überarbeiten (`app.js`)
|
|
||||||
- Rezepte-Array mit allen 18 Rezepten, Farben und detaillierten Texten anlegen.
|
|
||||||
- Speicherlogik via `localStorage` einrichten (`discoveredMolecules` Set).
|
|
||||||
- Funktion `updateDiscoveryBook()` schreiben, die das Lexikon-UI aktualisiert.
|
|
||||||
- Funktion `triggerExplosion(x, y, color)` entwickeln, die DOM-basierte Partikel erzeugt und animiert.
|
|
||||||
- Modal-Logik integrieren (`showModal(recipe)`), die bei einer Reaktion aufgerufen wird und bei Klick auf das Lexikon.
|
|
||||||
- Event-Listener für "Tisch leeren" und die Positions-Zähler aktualisieren.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. Validierung & Tests
|
|
||||||
- **Webserver:** Läuft im Hintergrund auf Port 8080.
|
|
||||||
- **Funktionalität:**
|
|
||||||
1. Spawnen von Atomen klappt.
|
|
||||||
2. Drag & Drop funktioniert flüssig.
|
|
||||||
3. Zusammenführen von 2x H + 1x O öffnet das Wasser-Modal und erzeugt eine Partikel-Explosion.
|
|
||||||
4. Wasser wird im Entdecker-Buch freigeschaltet und persistiert bei Seiten-Reload.
|
|
||||||
5. "Tisch leeren" entfernt alle Atome und Moleküle.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. Rezept-Daten (Vorschau für `app.js`)
|
|
||||||
```javascript
|
|
||||||
const recipes = [
|
|
||||||
{
|
|
||||||
id: "h2o",
|
|
||||||
ingredients: ['H', 'H', 'O'],
|
|
||||||
result: 'H₂O (Wasser)',
|
|
||||||
color: '#3498db',
|
|
||||||
desc: "Wasser ist die Grundlage allen Lebens auf der Erde. Unser Körper besteht zu über 60% daraus, und es bedeckt mehr als 70% unseres Planeten!"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "nacl",
|
|
||||||
ingredients: ['Cl', 'Na'],
|
|
||||||
result: 'NaCl (Kochsalz)',
|
|
||||||
color: '#f5f6fa',
|
|
||||||
desc: "Natriumchlorid kennen wir alle als Speisesalz. Faszinierend: Natrium ist ein explosives Metall und Chlor ein giftiges Gas – zusammen ergeben sie ein lebenswichtiges Gewürz!"
|
|
||||||
},
|
|
||||||
// ...weitere 16 Rezepte
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user