ohne dämliche Emojis
This commit is contained in:
Spiel-Generator Workshop
parent
2db4a7cb79
commit
3ba191a490
1 changed files with 94 additions and 105 deletions
199
README.md
199
README.md
|
|
@ -1,7 +1,7 @@
|
||||||
# 🎲 Spiel-Generator
|
# Spiel-Generator
|
||||||
### PH Weingarten · Medien- und Bildungsmanagement & Informatik (Lehramt)
|
### PH Weingarten — Medien- und Bildungsmanagement & Informatik (Lehramt)
|
||||||
|
|
||||||
> Browserbasierter Brettspiel-Generator für den Workshop — Schülerinnen und Schüler der ca. 8. Klasse erstellen ihr eigenes digitales Brettspiel mit Mini-Games, ganz ohne Programmierkenntnisse. Dabei entsteht live valider **Python-Code**, der das Spielkonzept abbildet und das Gefühl echten Programmierens vermittelt.
|
Browserbasierter Brettspiel-Generator für den Workshop an der PH Weingarten. Schülerinnen und Schüler der Jahrgangsstufe 8 erstellen ihr eigenes digitales Brettspiel mit Mini-Games, ohne Programmierkenntnisse vorauszusetzen. Im Hintergrund wird dabei live valider Python-Code generiert, der das Spielkonzept als Quellcode abbildet.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -15,60 +15,72 @@ edu-boardgame-generator/
|
||||||
├── logo.png # PH Weingarten Logo
|
├── logo.png # PH Weingarten Logo
|
||||||
└── minigames/
|
└── minigames/
|
||||||
├── _api.js # Gemeinsame API für alle Mini-Games
|
├── _api.js # Gemeinsame API für alle Mini-Games
|
||||||
├── snake.js # 🐍 Snake
|
├── snake.js
|
||||||
├── flappy.js # 🐦 Flappy Bird
|
├── flappy.js
|
||||||
├── memory.js # 🃏 Memory
|
├── memory.js
|
||||||
├── quiz.js # ❓ Quiz
|
├── quiz.js
|
||||||
├── reaction.js # ⚡ Reaktionstest
|
├── reaction.js
|
||||||
├── basketball.js # 🏀 Basketball
|
├── basketball.js
|
||||||
├── catch.js # 🍎 Äpfel fangen
|
├── catch.js
|
||||||
├── maze.js # 🌀 Labyrinth (generiertes Maze)
|
├── maze.js
|
||||||
├── simon.js # 🔴 Simon Says
|
├── simon.js
|
||||||
├── typing.js # ⌨️ Tipp-Rennen
|
├── typing.js
|
||||||
├── puzzle.js # 🧩 15-Zahlen-Puzzle
|
├── puzzle.js
|
||||||
└── spotdiff.js # 🔍 Fehler finden
|
└── spotdiff.js
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Technologie & Architektur
|
## Technologie
|
||||||
|
|
||||||
- **Reines HTML + CSS + JavaScript** — keine Abhängigkeiten, kein Build-Prozess
|
- Reines HTML, CSS und JavaScript — keine Abhängigkeiten, kein Build-Prozess
|
||||||
- **Hosting:** GitHub Pages (oder beliebiger statischer Webserver)
|
- Hosting: Beliebiger statischer Webserver (nginx empfohlen)
|
||||||
- **Datenaustausch:** Spielkonfiguration via `localStorage.gameConfig`
|
- Datenaustausch zwischen Editor und Spiel: `localStorage` (Testmodus) sowie URL-Hash (geteilter Link)
|
||||||
- **Mini-Game API:** Jedes Modul exportiert `launch()` (Spiel) + `preview()` (Editor-Test)
|
- Mini-Game API: Jedes Modul exportiert `launch()` (Vollspiel) und `preview()` (Editor-Vorschau)
|
||||||
- **⚠️ Wichtig:** Wegen `<script src="...">` muss die App über HTTP(S) laufen — nicht direkt per `file://`
|
|
||||||
|
|
||||||
### Lokalen Server starten
|
**Wichtig:** Die Anwendung muss über HTTP(S) ausgeliefert werden. Der direkte Aufruf per `file://` wird wegen CORS-Beschränkungen bei `<script src>` nicht unterstützt.
|
||||||
|
|
||||||
|
### Lokalen Entwicklungsserver starten
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Python (empfohlen)
|
|
||||||
python3 -m http.server 8000
|
python3 -m http.server 8000
|
||||||
# → http://localhost:8000/editor.html
|
# Aufruf: http://localhost:8000/editor.html
|
||||||
|
|
||||||
# Node.js
|
|
||||||
npx serve .
|
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## URL-Sharing
|
||||||
|
|
||||||
|
Der Veröffentlichen-Button im Editor erzeugt einen selbsttragenden Link:
|
||||||
|
|
||||||
|
```
|
||||||
|
https://example.com/game.html#z:H4sIAAAAAAAAA6tWKkktLlGyUlIqS...
|
||||||
|
```
|
||||||
|
|
||||||
|
**Technisch:**
|
||||||
|
- Konfiguration wird als JSON serialisiert, mit pako (DEFLATE) komprimiert und als Base64 in den URL-Hash kodiert
|
||||||
|
- Typische Link-Länge: 800 bis 1100 Zeichen (QR-Code-tauglich, Limit ca. 4000 Zeichen)
|
||||||
|
- `game.html` liest beim Start den Hash und rekonstruiert die Konfiguration
|
||||||
|
- Fallback auf `localStorage` (Testmodus aus dem Editor), danach auf eine Demo-Konfiguration
|
||||||
|
- Kein Backend erforderlich — der Server liefert ausschliesslich statische Dateien
|
||||||
|
|
||||||
|
Das Share-Modal bietet: Link kopieren, QR-Code, E-Mail, WhatsApp sowie die Native Share API.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Mini-Game API
|
## Mini-Game API
|
||||||
|
|
||||||
Jede Mini-Game-Datei registriert sich als `window.MG_<id>`:
|
Jede Mini-Game-Datei registriert sich als globale Variable `window.MG_<id>`:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
window.MG_snake = {
|
window.MG_snake = {
|
||||||
id: 'snake',
|
id: 'snake',
|
||||||
emoji: '🐍',
|
|
||||||
name: 'Snake',
|
name: 'Snake',
|
||||||
desc: 'Steuere die Schlange...',
|
desc: 'Steuere die Schlange...',
|
||||||
controls: 'Pfeiltasten / WASD',
|
controls: 'Pfeiltasten / WASD',
|
||||||
multi: 1, // 1=einmalig, 3=max 3x, 99=unbegrenzt
|
multi: 1, // 1 = einmalig, 3 = max. 3x, 99 = unbegrenzt
|
||||||
|
|
||||||
// Vollständiges Spiel (game.html)
|
launch(wrap, W, H, cfg) { ... return { stop() {} }; },
|
||||||
launch(wrap, W, H, cfg) { ... return { stop() {} }; },
|
|
||||||
|
|
||||||
// Kompakte Vorschau (Editor Test-Popup)
|
|
||||||
preview(wrap, W, H, cfg) { ... return { stop() {} }; },
|
preview(wrap, W, H, cfg) { ... return { stop() {} }; },
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
@ -82,86 +94,63 @@ Gemeinsame Hilfsfunktionen stehen über `window.MGAPI` bereit:
|
||||||
|
|
||||||
## Neues Mini-Game hinzufügen
|
## Neues Mini-Game hinzufügen
|
||||||
|
|
||||||
1. Datei `minigames/meinspiel.js` anlegen (Vorlage: eine bestehende Datei kopieren)
|
1. Datei `minigames/meinspiel.js` anlegen (Vorlage: bestehende Datei kopieren)
|
||||||
2. `window.MG_meinspiel = { ... }` implementieren
|
2. `window.MG_meinspiel = { ... }` implementieren
|
||||||
3. In `editor.html` und `game.html` eintragen:
|
3. In `editor.html` und `game.html` vor `</body>` eintragen:
|
||||||
- `<script src="minigames/meinspiel.js"></script>` vor `</body>`
|
```html
|
||||||
4. In der Editor-Logik (`MINIGAMES`-Array in `editor.html`) einen Eintrag hinzufügen
|
<script src="minigames/meinspiel.js"></script>
|
||||||
|
```
|
||||||
|
4. Im `MINIGAMES`-Array in `editor.html` einen Eintrag hinzufügen
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Aktueller Stand
|
## Aktueller Stand
|
||||||
|
|
||||||
### ✅ Vollständig implementiert
|
### Vollständig implementiert
|
||||||
|
|
||||||
**Editor (`editor.html`)**
|
**Editor (`editor.html`)**
|
||||||
- Schritt 1: Entwicklername, Spielname, Beschreibung, Vorschau
|
- Schritt 1: Entwicklername, Spielname, Beschreibung, Vorschau
|
||||||
- Schritt 2: 12 Spielfiguren, 12 Welten/Hintergründe
|
- Schritt 2: 12 Spielfiguren, 12 Welten und Hintergründe
|
||||||
- Schritt 3: Würfeln/Schritte, Leben/Punkte, Feldanzahl, Drag&Drop, Erzähltexte
|
- Schritt 3: Spielregeln (Würfeln/Schritte, Leben/Punkte), Feldanzahl (6–20), Drag-and-Drop, Erzähltexte
|
||||||
- Schritt 4: Quiz-Fragen mit 4 Antworten
|
- Schritt 4: Quiz-Fragen mit je 4 Antwortoptionen
|
||||||
- Schritt 5: Review, Spielstart, Feedback-Auswertung
|
- Schritt 5: Review-Zusammenfassung, Spielstart, Feedback-Auswertung
|
||||||
- Python Live-Code Split-Screen (progressiv, fokusgetriggert)
|
- Python-Live-Code-Split-Screen (progressiv, fokusgetriggert, mit Syntaxhervorhebung)
|
||||||
- ↺ Reset-Button, localStorage-Persistenz, responsiv
|
- Reset-Button, localStorage-Persistenz, responsives Layout
|
||||||
|
|
||||||
**Spiel (`game.html`)**
|
**Spiel (`game.html`)**
|
||||||
- Animiertes Canvas-Spielfeld, themenabhängige Farben/Partikel
|
- Animiertes Canvas-Spielfeld mit themenabhängigen Farben und Partikeln
|
||||||
- Würfelanimation, Story-Overlays, HUD
|
- Würfelanimation, Story-Overlays, HUD (Leben/Punkte)
|
||||||
- Win/GameOver-Screen mit Statistiken
|
- Win- und GameOver-Screen mit Statistiken
|
||||||
|
|
||||||
### 🎮 Mini-Games
|
### Mini-Games
|
||||||
|
|
||||||
| Game | Status Editor-Vorschau | Status Vollspiel |
|
| Mini-Game | Editor-Vorschau | Vollspiel |
|
||||||
|------|----------------------|-----------------|
|
|------------------|----------------|-----------|
|
||||||
| 🐍 Snake | ✅ | ✅ |
|
| Snake | Ja | Ja |
|
||||||
| 🐦 Flappy Bird | ✅ | ✅ |
|
| Flappy Bird | Ja | Ja |
|
||||||
| 🃏 Memory | ✅ | ✅ |
|
| Memory | Ja | Ja |
|
||||||
| ❓ Quiz | ✅ | ✅ |
|
| Quiz | Ja | Ja |
|
||||||
| ⚡ Reaktionstest | ✅ | ✅ |
|
| Reaktionstest | Ja | Ja |
|
||||||
| 🏀 Basketball | ✅ | ✅ |
|
| Basketball | Ja | Ja |
|
||||||
| 🍎 Äpfel fangen | ✅ | ✅ |
|
| Früchte fangen | Ja | Ja |
|
||||||
| 🌀 Labyrinth | ✅ (generiertes Maze) | ✅ |
|
| Labyrinth | Ja | Ja |
|
||||||
| 🔴 Simon Says | ✅ | ✅ |
|
| Simon Says | Ja | Ja |
|
||||||
| ⌨️ Tipp-Rennen | ✅ | ✅ |
|
| Tipp-Rennen | Ja | Ja |
|
||||||
| 🧩 Zahlen-Puzzle | ✅ (15-Puzzle) | ✅ |
|
| Zahlen-Puzzle | Ja | Ja |
|
||||||
| 🔍 Fehler finden | ✅ (Bauernhof-Szene) | ✅ |
|
| Fehler finden | Ja | Ja |
|
||||||
|
|
||||||
### 🔧 Offene Aufgaben
|
### Offene Punkte
|
||||||
|
|
||||||
| Aufgabe | Priorität |
|
| Aufgabe | Priorität |
|
||||||
|---------|-----------|
|
|---------|-----------|
|
||||||
| **Veröffentlichungs-System**: ✅ Implementiert (URL-Hash, QR-Code, Share-Buttons) | ✅ Fertig |
|
| Weitere Szenarien für "Fehler finden" (aktuell: Bauernhof) | Mittel |
|
||||||
| **Mehr Szenen für Fehler finden** (spotdiff): 3–5 verschiedene Bilder | 🟡 Mittel |
|
| Schwierigkeitsgrade in Mini-Games | Mittel |
|
||||||
| **Schwierigkeitsgrade** in Mini-Games (leicht/mittel/schwer) | 🟡 Mittel |
|
| Touch/Mobile Drag-and-Drop im Editor | Mittel |
|
||||||
| **Touch/Mobile** Drag&Drop im Editor | 🟡 Mittel |
|
| Nginx-Konfiguration mit HTTP Basic Auth | Hoch |
|
||||||
| **Highscore-System** optional | 🟢 Niedrig |
|
|
||||||
| **Mehrsprachigkeit** | 🟢 Niedrig |
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## URL-Sharing System
|
## Deployment
|
||||||
|
|
||||||
Der "🚀 Veröffentlichen"-Button im Editor erzeugt einen **selbsttragenden Link**:
|
|
||||||
|
|
||||||
```
|
|
||||||
https://deinserver.de/game.html#z:H4sIAAAAAAAAA6tWKkktLlGyUlIqS...
|
|
||||||
```
|
|
||||||
|
|
||||||
**Technisch:**
|
|
||||||
- Config → `JSON.stringify` → `pako.deflate` (gzip) → `Base64` → `#URL-Hash`
|
|
||||||
- Typische Länge: ~800–1100 Zeichen ✅ QR-Code-tauglich (< 4000 Zeichen)
|
|
||||||
- `game.html` liest beim Start den Hash und dekomprimiert ihn
|
|
||||||
- Fallback auf `localStorage` (Editor-Testmodus), dann auf Demo-Config
|
|
||||||
|
|
||||||
**Share-Modal** bietet:
|
|
||||||
- 📋 Link kopieren
|
|
||||||
- 📱 QR-Code (direkt scannen mit Handy-Kamera)
|
|
||||||
- 📧 Per E-Mail teilen
|
|
||||||
- 💬 WhatsApp
|
|
||||||
- 📲 Native Share API (auf Mobil)
|
|
||||||
|
|
||||||
**Kein Backend nötig** – der Server liefert nur statische Dateien.
|
|
||||||
|
|
||||||
## Deployment (GitHub Pages)
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone git@git.md-phw.de:mbm/edu-boardgame-generator.git
|
git clone git@git.md-phw.de:mbm/edu-boardgame-generator.git
|
||||||
|
|
@ -170,13 +159,13 @@ cd edu-boardgame-generator
|
||||||
# Dateien bearbeiten ...
|
# Dateien bearbeiten ...
|
||||||
|
|
||||||
git add .
|
git add .
|
||||||
git commit -m "feat: ..."
|
git commit -m "..."
|
||||||
git push origin main
|
git push origin main
|
||||||
```
|
```
|
||||||
|
|
||||||
GitHub Pages → Settings → Pages → Branch: `main` / Root
|
Der Webserver muss lediglich statische Dateien ausliefern. Eine Beispiel-nginx-Konfiguration mit HTTPS und optionaler Zugangsbeschränkung ist in Vorbereitung.
|
||||||
|
|
||||||
**Wichtig:** Der Generator muss über `https://` aufgerufen werden (nicht `file://`), damit `<script src>` funktioniert.
|
**Wichtig:** Der Generator muss über `https://` aufgerufen werden, damit `<script src>` funktioniert.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -187,7 +176,7 @@ GitHub Pages → Settings → Pages → Branch: `main` / Root
|
||||||
localStorage.removeItem('gameConfig'); location.reload();
|
localStorage.removeItem('gameConfig'); location.reload();
|
||||||
```
|
```
|
||||||
|
|
||||||
Vivaldi/Chrome: `Ctrl+Shift+R` (Hard Reload)
|
Hard Reload im Browser: `Ctrl+Shift+R`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -195,13 +184,13 @@ Vivaldi/Chrome: `Ctrl+Shift+R` (Hard Reload)
|
||||||
|
|
||||||
| Datei | Größe |
|
| Datei | Größe |
|
||||||
|-------|-------|
|
|-------|-------|
|
||||||
| `editor.html` | ~102 KB |
|
| `editor.html` | ca. 330 KB |
|
||||||
| `game.html` | ~43 KB |
|
| `game.html` | ca. 57 KB |
|
||||||
| `codegen.js` | ~14 KB |
|
| `codegen.js` | ca. 14 KB |
|
||||||
| `logo.png` | ~89 KB |
|
| `logo.png` | ca. 89 KB |
|
||||||
| `minigames/` (13 Dateien) | ~77 KB |
|
| `minigames/` (13 Dateien) | ca. 77 KB |
|
||||||
| **Gesamt** | **~325 KB** |
|
| Gesamt | ca. 567 KB |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
*Entwickelt im Workshop mit Claude (Anthropic) · Stand März 2026*
|
*Entwickelt im Rahmen eines Workshops an der PH Weingarten, März 2026*
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue