
THE BREACH — Cybersecurity Escape Room
Ein browserbasiertes 360°-Escape-Room-Spiel für Security-Awareness-Schulungen: Mitarbeitende erleben live einen Cyberangriff, sammeln Beweise in sieben Räumen und rekonstruieren am Ende den gesamten Angriffsverlauf.
Zielgruppe
Mitarbeitende, Security-Awareness-Schulung
Lernziel
Sicherheitsbewusstsein für Passwörter, Phishing, Social Engineering, Datenschutz und Multi-Faktor-Authentifizierung praxisnah und ohne trockene Theorie vermitteln.
Meine Rolle
Konzept, Instructional Design nach Gagnés Nine Events, technische Umsetzung
Ergebnis
Sieben thematische Räume mit je einer authentischen Sicherheitsaufgabe, KI-Assistentin EVA als adaptives Hint-System und abschließender Beweis-Rekonstruktion im War Room.
Eingesetzte Tools
Mein Denkprozess
Wie ich von der ersten Idee zur fertigen Lösung gekommen bin — Entscheidungen, Stolpersteine und was am Ende dabei herausgekommen ist.
Schritt 01
Herausforderung
Klassische Security-Awareness-Schulungen werden oft abgehakt statt verinnerlicht. Mitarbeitende sollten Angriffsmuster nicht nur kennen, sondern im Kontext selbst erleben — als Teil eines echten Vorfalls, nicht als Foliensatz.
- Zielgruppe: Mitarbeitende ohne IT-Hintergrund
- Anforderung: browserbasiert, keine Installation
- Anforderung: Transfer zu Passwörtern, Phishing, Social Engineering, MFA
Schritt 02
Analyse
Zielgruppe analysiert
Geringe Motivation für klassische Compliance-Schulungen.
Lernziele definiert
Fünf Themenfelder als konkrete Einzelaufgaben statt abstrakter Regeln.
Didaktik gewählt
Gagnés Nine Events of Instruction als Gerüst für jede Rauminteraktion.
Technik bewertet
Begehbares 3D für die letzte Station — mehr Präsenzgefühl als reine 360°-Panoramen.
Schritt 03
Konzept
Raum-Bogen
Sieben Räume vom Erstkontakt bis zur War-Room-Rekonstruktion.
Rauminteraktion
Je Raum: Hinweis finden → Aufgabe lösen → Beweis sammeln.
HUD-Layout
Tablet und Beweis-Inventar als feste Bedienelemente skizziert.
Moodboard
Kalte, technische Cyber-Ästhetik mit gezielten Warnfarben für Spannung.
Schritt 04
Umsetzung
React Three Fiber
Begehbare 3D-Räume mit React-Komponentenmodell statt reinem Three.js-Boilerplate.
Zustand
Zentraler, einfach testbarer Spielzustand über Phasen, Räume und Beweise hinweg.
TypeScript
Bei verzweigter Aufgaben- und Hinweislogik früh Fehler abfangen.
Vite
Schnelle Iteration bei häufigen Anpassungen an Hotspot-Platzierung.
Schritt 05
Herausforderungen & Lösungen
Problem
Eine „KI-Assistentin” ohne echte Logik wirkt wie ein reines Textfenster.
Lösung
EVA als adaptives Hint-System mit gestuften Hinweisen statt Komplettlösung.
Problem
Standard-Icons wirken in begehbaren 3D-Räumen je nach Kameraabstand riesig oder winzig.
Lösung
Eigene JavaScript-Erweiterung für die Skalierung relativ zur echten Objektgröße.
Problem
Eine Video-Aufgabe ließe sich sonst einfach wegklicken.
Lösung
Echte Zeitvalidierung gegen die tatsächliche Videozeit statt gegen einen Timer.
Schritt 06
Ergebnis
Sieben thematische Räume mit authentischen Aufgaben, adaptivem Hint-System und finaler Beweis-Rekonstruktion.
Gelernt
Spannung und Lerntransfer schließen sich nicht aus, wenn jede Spielmechanik an ein konkretes Sicherheitsverhalten gekoppelt ist.
Heute anders
Ich würde das Hinweissystem noch früher testen lassen — es beeinflusst Frustration am stärksten.
Selbst ausprobieren
Am besten spricht das Ergebnis für sich — wirf einen Blick in die Demo.
Demo ansehenWeitere Projekte in Lernspiele
Vokabel-Quiz-Arena
Ein Multiplayer-Quizspiel für den Fremdsprachenunterricht mit Live-Ranglisten.

THE BRIEFING — KI-Gesprächssimulation
Ein Serious Game für Instructional Designer: Im Konferenz-Layout führst du ein Erstgespräch mit einem KI-simulierten Kunden und deckst durch gezielte Fragen das eigentliche Projekt auf, bevor du eine Lösung versprichst.