181 lines
No EOL
7.1 KiB
Markdown
181 lines
No EOL
7.1 KiB
Markdown
# Spiel-Generator
|
||
### PH Weingarten · Medien- und Bildungsmanagement & Informatik (Lehramt)
|
||
|
||
---
|
||
|
||
## Was ist das?
|
||
|
||
Ein browserbasierter **Brettspiel-Generator** für einen Workshop an der PH Weingarten, der sich an Schülerinnen und Schüler der ca. 8. Klasse richtet. Kinder erstellen ihr eigenes digitales Brettspiel mit Mini-Games – ganz ohne Programmierkenntnisse. Im Hintergrund wird dabei live gültiger **Python-Code** generiert, der das Spielkonzept als Quellcode abbildet und den Schülerinnen und Schülern das Gefühl gibt, wirklich zu programmieren.
|
||
|
||
Das Projekt besteht aus zwei Dateien:
|
||
|
||
| Datei | Funktion |
|
||
|-------|----------|
|
||
| `editor.html` | 5-Schritte-Editor-Wizard zur Spielerstellung |
|
||
| `game.html` | Das fertige spielbare Brettspiel |
|
||
|
||
---
|
||
|
||
## Projektstruktur & Architektur
|
||
|
||
- **Technologie:** Reines HTML + CSS + JavaScript (keine Abhängigkeiten, kein Build-Prozess)
|
||
- **Hosting:** Gedacht für GitHub Pages
|
||
- **Datenaustausch:** Spielkonfiguration wird via `localStorage.gameConfig` gespeichert; `game.html` liest daraus beim Start
|
||
- **Keine Serverpflicht:** Alles läuft clientseitig
|
||
|
||
---
|
||
|
||
## Aktueller Stand
|
||
|
||
### Vollständig funktionierend
|
||
|
||
#### Editor (`editor.html`)
|
||
|
||
- **Schritt 1 – Grundinfos:** Entwicklername, Spielname, Beschreibung, Namensvorschläge, Live-Vorschau-Karte
|
||
- **Schritt 2 – Gestaltung:** 12 Spielfiguren, 12 Hintergründe/Welten, Live-Kombi-Vorschau
|
||
- **Schritt 3 – Spielfeld & Regeln:**
|
||
- Würfeln vs. Einzel-Schritt
|
||
- Leben-System vs. Punkte-System
|
||
- Feldanzahl (6–20) mit +/- Steuerung
|
||
- Drag-&-Drop Palette → Spielfeld (funktioniert ✅)
|
||
- Klick-to-Place für Mini-Games
|
||
- Erzähltexte vor/nach Feldern mit Emoji-Picker
|
||
- Board-Builder mit visueller Felddarstellung
|
||
- **Schritt 4 – Quiz:** Pro Quiz-Feld eine Karte mit Frage + 4 Antworten + richtiger Antwort; Autofill-Beispiele
|
||
- **Schritt 5 – Testen:** Review-Timeline, Launch-Button zu `game.html`, 8-Fragen-Feedback-Auswertung
|
||
|
||
#### Python-Live-Code (Split-Screen rechts)
|
||
|
||
- Progressiver Aufbau: Code erscheint **Schritt für Schritt** wenn Felder angeklickt/befüllt werden
|
||
- Beginn: Leerer Code mit Hinweiskommentar
|
||
- Fokus-getriggert: Jedes Feld/Button enthüllt genau den zugehörigen Codeabschnitt
|
||
- **Korrekte Python-Syntax** mit echtem Syntaxhighlighting (Keywords, Strings, Funktionen, Kommentare)
|
||
- Dynamischer Dateiname: `spielname_von_entwicklername.py`
|
||
- Resizer-Balken: Split-Breite per Maus verschiebbar
|
||
- Zeilennummern, Statusanzeige (`● Live` / `● Bereit`)
|
||
- Dateiname-Header mit macOS-Stoplight-Dots
|
||
|
||
#### Allgemein
|
||
|
||
- PH Weingarten Logo + Studiengänge im Header
|
||
- Sticky Progress-Bar (volle Breite) mit 5 Schritt-Dots
|
||
- Zusammenfassungs-Banner beim Vorwärtsnavigieren
|
||
- `localStorage`-Persistenz (Zustand bleibt nach Reload)
|
||
- **↺ Reset-Button** zum sauberen Neustart (löscht localStorage)
|
||
- Responsiv: Code-Panel blendet sich unter 900px aus
|
||
- Scrollbar-Styling einheitlich (lila, schlank)
|
||
|
||
---
|
||
|
||
#### Spiel (`game.html`)
|
||
|
||
- Vollständiges animiertes Spielfeld mit Canvas-Rendering
|
||
- Thema-abhängige Farben & Partikel (12 Hintergründe/Themen)
|
||
- Spielfigur mit Bounce-Effekt und Glow
|
||
- Farbkodierte Felder pro Mini-Game-Typ
|
||
- Besuchter-Pfad leuchtet auf
|
||
- HUD: Feld-Position, Leben oder Punkte
|
||
- Würfel-Animation
|
||
- Story-Overlay (Erzähltexte)
|
||
- Mini-Game-Overlay mit Beschreibung und Steuerungshinweis
|
||
- Win-Screen und Game-Over-Screen mit Statistiken
|
||
|
||
---
|
||
|
||
### 🎮 Mini-Games – Überblick
|
||
|
||
#### Im Spiel (`game.html`) – vollständig spielbar
|
||
|
||
| Mini-Game | Status |
|
||
|-----------|--------|
|
||
| 🐍 Snake | ✅ Vollständig |
|
||
| 🐦 Flappy Bird | ✅ Vollständig |
|
||
| 🃏 Memory | ✅ Vollständig |
|
||
| ❓ Quiz | ✅ Vollständig (nutzt eigene Fragen aus Schritt 4) |
|
||
| ⚡ Reaktionstest | ✅ Vollständig |
|
||
| Alle anderen 7 | ⚠️ Platzhalter (zeigen Emoji + „bald verfügbar"-Button) |
|
||
|
||
#### Im Editor (`editor.html`) – Test-Popup (▶ TEST)
|
||
|
||
| Mini-Game | Status |
|
||
|-----------|--------|
|
||
| 🐍 Snake | ✅ Vollständig |
|
||
| 🐦 Flappy Bird | ✅ Vollständig |
|
||
| 🃏 Memory | ✅ Vollständig |
|
||
| ⚡ Reaktionstest | ✅ Vollständig |
|
||
| ❓ Quiz | ✅ Demo (nutzt eigene Fragen wenn vorhanden) |
|
||
| 🏀 Basketball | ✅ Vollständig |
|
||
| 🍎 Äpfel fangen | ✅ Vollständig |
|
||
| 🌀 Labyrinth | ✅ Vollständig |
|
||
| 🔴 Simon Says | ✅ Vollständig |
|
||
| ⌨️ Tipp-Rennen | ✅ Vollständig |
|
||
| 🧩 Rätsel | ⚠️ Stub (Platzhalter-Demo) |
|
||
| 🔍 Fehler finden | ⚠️ Stub (Platzhalter-Demo) |
|
||
|
||
---
|
||
|
||
## 🔧 Bekannte offene Aufgaben
|
||
|
||
### Hoch-Priorität
|
||
|
||
| Aufgabe | Beschreibung |
|
||
|---------|--------------|
|
||
| 🎮 **7 Mini-Games im Spiel implementieren** | Basketball, Äpfel fangen, Labyrinth, Simon Says, Rätsel, Fehler finden, Tipp-Rennen sind im Editor testbar, aber in `game.html` noch Platzhalter |
|
||
| 🔗 **URL-System / Veröffentlichung** | `doPublish()` zeigt nur Alert. Ziel: Config als Base64 in URL kodieren, QR-Code generieren, direkter GitHub-Pages-Link |
|
||
|
||
### Mittel-Priorität
|
||
|
||
| Aufgabe | Beschreibung |
|
||
|---------|--------------|
|
||
| 📱 **Mobile-Optimierung** | Drag-&-Drop auf Touch-Geräten (aktuell nur Maus) |
|
||
| 🔄 **Zurück-Navigation** | `window.scrollTo` scrollt ggf. falsch beim Schritt-Zurückspringen |
|
||
| 🧩 **Rätsel-Mini-Game** | Vollständiges Zahlen-Puzzle implementieren |
|
||
| 🔍 **Fehler-finden-Mini-Game** | Vollständige Implementierung (zwei Bilder, Unterschiede suchen) |
|
||
|
||
### Niedrige Priorität / Nice-to-have
|
||
|
||
| Aufgabe | Beschreibung |
|
||
|---------|--------------|
|
||
| 📦 **GitHub Pages Setup** | Repository anlegen, Dateien hochladen, Pages aktivieren |
|
||
| 🎨 **Mehr Figuren/Welten** | Aktuell 12+12; erweiterbar |
|
||
| 🌍 **Sprachoptionen** | Aktuell nur Deutsch |
|
||
| 🏆 **Highscore-System** | Optional für Mehrfach-Spielen |
|
||
| 📊 **Feedback-Auswertung exportieren** | Schritt 5 wertet aus, aber kein Export |
|
||
|
||
---
|
||
|
||
## Workflow-Empfehlungen
|
||
|
||
- Der Generator läuft vollständig **offline/lokal** – einfach `editor.html` im Browser öffnen
|
||
- **Reset:** Button „↺ Reset" oben links im Header, oder in der Browser-Konsole:
|
||
```javascript
|
||
localStorage.removeItem('gameConfig'); location.reload();
|
||
```
|
||
- **Cache leeren** in Vivaldi/Chrome: `Ctrl+Shift+R` (Hard Reload), oder DevTools öffnen → Network → „Disable cache"
|
||
- Bei Entwicklung: Syntax-Checks via Node.js möglich
|
||
|
||
---
|
||
|
||
## Technische Hinweise
|
||
|
||
- Der Python-Code im Split-Screen ist **didaktisch korrekt** aber nicht ausführbar (kein `boardgame_engine`-Modul existiert). Das ist bewusst – es geht ums Erleben des Programmierens.
|
||
- Der State (`ST`-Objekt) wird bei jeder Eingabe in `localStorage` gesichert.
|
||
- `game.html` wird via `window.open()` aus dem Editor geöffnet und liest aus `localStorage.gameConfig`.
|
||
- Das `roundRect`-Canvas-API hat einen Polyfill für ältere Browser.
|
||
|
||
---
|
||
|
||
## Geschätzter Restaufwand
|
||
|
||
| Bereich | Aufwand |
|
||
|---------|---------|
|
||
| 7 Mini-Games in game.html fertig implementieren | ~3–5 Tage |
|
||
| URL/QR-Code Veröffentlichungs-System | ~1–2 Tage |
|
||
| Mobile Touch-Drag | ~1 Tag |
|
||
| GitHub Pages + Deployment | ~2–4 Stunden |
|
||
| Testing & Bugfixing für Workshop | ~1–2 Tage |
|
||
| **Gesamt** | **~6–10 Tage** |
|
||
|
||
---
|
||
|
||
*Stand: März 2026 · Entwicklung im Workshop mit Claude (Anthropic)* |