🎲 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.

---

Projektstruktur

edu-boardgame-generator/
├── editor.html          # 5-Schritte-Editor-Wizard
├── game.html            # Das fertige spielbare Brettspiel
├── codegen.js           # Python Live-Code-Generator (Split-Screen)
├── 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

---

Technologie & Architektur

• 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 <script src="..."> muss die App über HTTP(S) laufen — nicht direkt per file://

Lokalen Server starten

# Python (empfohlen)
python3 -m http.server 8000
# → http://localhost:8000/editor.html

# Node.js
npx serve .

---

Mini-Game API

Jede Mini-Game-Datei registriert sich als window.MG_<id>:

window.MG_snake = {
  id:       'snake',
  emoji:    '🐍',
  name:     'Snake',
  desc:     'Steuere die Schlange...',
  controls: 'Pfeiltasten / WASD',
  multi:    1,          // 1=einmalig, 3=max 3x, 99=unbegrenzt

  // Vollständiges Spiel (game.html)
  launch(wrap, W, H, cfg) { ... return { stop() {} }; },

  // Kompakte Vorschau (Editor Test-Popup)
  preview(wrap, W, H, cfg) { ... return { stop() {} }; },
};

cfg enthält: { theme, quizData, fieldIndex, devName, gameName }

Gemeinsame Hilfsfunktionen stehen über window.MGAPI bereit: makeCanvas, onResult, text, roundRect, resultScreen

---

Neues Mini-Game hinzufügen

1. Datei minigames/meinspiel.js anlegen (Vorlage: eine bestehende Datei kopieren)
2. window.MG_meinspiel = { ... } implementieren
3. In editor.html und game.html eintragen:
   • <script src="minigames/meinspiel.js"></script> vor </body>
4. In der Editor-Logik (MINIGAMES-Array in editor.html) einen Eintrag hinzufügen

---

Aktueller Stand

✅ 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

Spiel (game.html)

• Animiertes Canvas-Spielfeld, themenabhängige Farben/Partikel
• Würfelanimation, Story-Overlays, HUD
• Win/GameOver-Screen mit Statistiken

🎮 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)	✅

🔧 Offene Aufgaben

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

---

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)

git clone git@git.md-phw.de:mbm/edu-boardgame-generator.git
cd edu-boardgame-generator

# Dateien bearbeiten ...

git add .
git commit -m "feat: ..."
git push origin main

GitHub Pages → Settings → Pages → Branch: main / Root

Wichtig: Der Generator muss über https:// aufgerufen werden (nicht file://), damit <script src> funktioniert.

---

Cache leeren (Entwicklung)

# Browser-Konsole
localStorage.removeItem('gameConfig'); location.reload();

Vivaldi/Chrome: Ctrl+Shift+R (Hard Reload)

---

Dateigrößen

Datei	Größe
editor.html	~102 KB
game.html	~43 KB
codegen.js	~14 KB
logo.png	~89 KB
minigames/ (13 Dateien)	~77 KB
Gesamt	~325 KB

---

Entwickelt im Workshop mit Claude (Anthropic) · Stand März 2026