From 3ba191a490c6a9668a1bd64e627f6b44cb6d7b55 Mon Sep 17 00:00:00 2001 From: Spiel-Generator Workshop Date: Sun, 15 Mar 2026 13:25:47 +0100 Subject: [PATCH] =?UTF-8?q?ohne=20d=C3=A4mliche=20Emojis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 199 ++++++++++++++++++++++++++---------------------------- 1 file changed, 94 insertions(+), 105 deletions(-) diff --git a/README.md b/README.md index 9e4c302..46ba57c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# 🎲 Spiel-Generator -### PH Weingarten · Medien- und Bildungsmanagement & Informatik (Lehramt) +# Spiel-Generator +### 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 └── minigames/ ├── _api.js # Gemeinsame API für alle Mini-Games - ├── snake.js # 🐍 Snake - ├── flappy.js # 🐦 Flappy Bird - ├── memory.js # 🃏 Memory - ├── quiz.js # ❓ Quiz - ├── reaction.js # ⚡ Reaktionstest - ├── basketball.js # 🏀 Basketball - ├── catch.js # 🍎 Äpfel fangen - ├── maze.js # 🌀 Labyrinth (generiertes Maze) - ├── simon.js # 🔴 Simon Says - ├── typing.js # ⌨️ Tipp-Rennen - ├── puzzle.js # 🧩 15-Zahlen-Puzzle - └── spotdiff.js # 🔍 Fehler finden + ├── snake.js + ├── flappy.js + ├── memory.js + ├── quiz.js + ├── reaction.js + ├── basketball.js + ├── catch.js + ├── maze.js + ├── simon.js + ├── typing.js + ├── puzzle.js + └── spotdiff.js ``` --- -## Technologie & Architektur +## Technologie -- **Reines HTML + CSS + JavaScript** — keine Abhängigkeiten, kein Build-Prozess -- **Hosting:** GitHub Pages (oder beliebiger statischer Webserver) -- **Datenaustausch:** Spielkonfiguration via `localStorage.gameConfig` -- **Mini-Game API:** Jedes Modul exportiert `launch()` (Spiel) + `preview()` (Editor-Test) -- **⚠️ Wichtig:** Wegen `` vor `` -4. In der Editor-Logik (`MINIGAMES`-Array in `editor.html`) einen Eintrag hinzufügen +3. In `editor.html` und `game.html` vor `` eintragen: + ```html + + ``` +4. Im `MINIGAMES`-Array in `editor.html` einen Eintrag hinzufügen --- ## Aktueller Stand -### ✅ Vollständig implementiert +### Vollständig implementiert **Editor (`editor.html`)** - Schritt 1: Entwicklername, Spielname, Beschreibung, Vorschau -- Schritt 2: 12 Spielfiguren, 12 Welten/Hintergründe -- Schritt 3: Würfeln/Schritte, Leben/Punkte, Feldanzahl, Drag&Drop, Erzähltexte -- Schritt 4: Quiz-Fragen mit 4 Antworten -- Schritt 5: Review, Spielstart, Feedback-Auswertung -- Python Live-Code Split-Screen (progressiv, fokusgetriggert) -- ↺ Reset-Button, localStorage-Persistenz, responsiv +- Schritt 2: 12 Spielfiguren, 12 Welten und Hintergründe +- Schritt 3: Spielregeln (Würfeln/Schritte, Leben/Punkte), Feldanzahl (6–20), Drag-and-Drop, Erzähltexte +- Schritt 4: Quiz-Fragen mit je 4 Antwortoptionen +- Schritt 5: Review-Zusammenfassung, Spielstart, Feedback-Auswertung +- Python-Live-Code-Split-Screen (progressiv, fokusgetriggert, mit Syntaxhervorhebung) +- Reset-Button, localStorage-Persistenz, responsives Layout **Spiel (`game.html`)** -- Animiertes Canvas-Spielfeld, themenabhängige Farben/Partikel -- Würfelanimation, Story-Overlays, HUD -- Win/GameOver-Screen mit Statistiken +- Animiertes Canvas-Spielfeld mit themenabhängigen Farben und Partikeln +- Würfelanimation, Story-Overlays, HUD (Leben/Punkte) +- Win- und GameOver-Screen mit Statistiken -### 🎮 Mini-Games +### Mini-Games -| Game | Status Editor-Vorschau | Status Vollspiel | -|------|----------------------|-----------------| -| 🐍 Snake | ✅ | ✅ | -| 🐦 Flappy Bird | ✅ | ✅ | -| 🃏 Memory | ✅ | ✅ | -| ❓ Quiz | ✅ | ✅ | -| ⚡ Reaktionstest | ✅ | ✅ | -| 🏀 Basketball | ✅ | ✅ | -| 🍎 Äpfel fangen | ✅ | ✅ | -| 🌀 Labyrinth | ✅ (generiertes Maze) | ✅ | -| 🔴 Simon Says | ✅ | ✅ | -| ⌨️ Tipp-Rennen | ✅ | ✅ | -| 🧩 Zahlen-Puzzle | ✅ (15-Puzzle) | ✅ | -| 🔍 Fehler finden | ✅ (Bauernhof-Szene) | ✅ | +| Mini-Game | Editor-Vorschau | Vollspiel | +|------------------|----------------|-----------| +| Snake | Ja | Ja | +| Flappy Bird | Ja | Ja | +| Memory | Ja | Ja | +| Quiz | Ja | Ja | +| Reaktionstest | Ja | Ja | +| Basketball | Ja | Ja | +| Früchte fangen | Ja | Ja | +| Labyrinth | Ja | Ja | +| Simon Says | Ja | Ja | +| Tipp-Rennen | Ja | Ja | +| Zahlen-Puzzle | Ja | Ja | +| Fehler finden | Ja | Ja | -### 🔧 Offene Aufgaben +### Offene Punkte | Aufgabe | Priorität | |---------|-----------| -| **Veröffentlichungs-System**: ✅ Implementiert (URL-Hash, QR-Code, Share-Buttons) | ✅ Fertig | -| **Mehr Szenen für Fehler finden** (spotdiff): 3–5 verschiedene Bilder | 🟡 Mittel | -| **Schwierigkeitsgrade** in Mini-Games (leicht/mittel/schwer) | 🟡 Mittel | -| **Touch/Mobile** Drag&Drop im Editor | 🟡 Mittel | -| **Highscore-System** optional | 🟢 Niedrig | -| **Mehrsprachigkeit** | 🟢 Niedrig | +| Weitere Szenarien für "Fehler finden" (aktuell: Bauernhof) | Mittel | +| Schwierigkeitsgrade in Mini-Games | Mittel | +| Touch/Mobile Drag-and-Drop im Editor | Mittel | +| Nginx-Konfiguration mit HTTP Basic Auth | Hoch | --- -## URL-Sharing System - -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) +## Deployment ```bash git clone git@git.md-phw.de:mbm/edu-boardgame-generator.git @@ -170,13 +159,13 @@ cd edu-boardgame-generator # Dateien bearbeiten ... git add . -git commit -m "feat: ..." +git commit -m "..." 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 `