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