Spiel-Generator

PH Weingarten — Medien- und Bildungsmanagement & Informatik (Lehramt)

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.

---

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
    ├── flappy.js
    ├── memory.js
    ├── quiz.js
    ├── reaction.js
    ├── basketball.js
    ├── catch.js
    ├── maze.js
    ├── simon.js
    ├── typing.js
    ├── puzzle.js
    └── spotdiff.js

---

Technologie

• Reines HTML, CSS und JavaScript — keine Abhängigkeiten, kein Build-Prozess
• Hosting: Beliebiger statischer Webserver (nginx empfohlen)
• Datenaustausch zwischen Editor und Spiel: localStorage (Testmodus) sowie URL-Hash (geteilter Link)
• Mini-Game API: Jedes Modul exportiert launch() (Vollspiel) und preview() (Editor-Vorschau)

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

python3 -m http.server 8000
# Aufruf: http://localhost:8000/editor.html

---

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

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

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

  launch(wrap, W, H, cfg)  { ... return { stop() {} }; },
  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: bestehende Datei kopieren)
2. window.MG_meinspiel = { ... } implementieren
3. In editor.html und game.html vor </body> eintragen:

   <script src="minigames/meinspiel.js"></script>
   

4. Im 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 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 mit themenabhängigen Farben und Partikeln
• Würfelanimation, Story-Overlays, HUD (Leben/Punkte)
• Win- und GameOver-Screen mit Statistiken

Mini-Games

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 Punkte

Aufgabe	Priorität
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

---

Deployment

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

# Dateien bearbeiten ...

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

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, damit <script src> funktioniert.

---

Cache leeren (Entwicklung)

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

Hard Reload im Browser: Ctrl+Shift+R

---

Dateigrößen

Datei	Größe
editor.html	ca. 330 KB
game.html	ca. 57 KB
codegen.js	ca. 14 KB
logo.png	ca. 89 KB
minigames/ (13 Dateien)	ca. 77 KB
Gesamt	ca. 567 KB

---

Entwickelt im Rahmen eines Workshops an der PH Weingarten, März 2026