One Button Murmelbahn - Digital Escape

Vorprozess

Aufgabenstellung
Die Aufgabe war es, eine interaktive Murmelbahn zu programmieren, welche von einem Spieler mit nur einem Button bedienbar ist. Am Ende sollten alle Bahnen zu einer langen Murmelbahn zusammengeführt werden. Für das Programmieren selbst kombinierten wir HTML, Javascript und Libraries, wie zum Beispiel matter.js oder auch p5.js.

Ideenfindung
Direkt zu Beginn des Prozesses erstellten wir Moodboards, um die verschiedenen Ideen festzuhalten. Unsere Überthemen waren ein Freizeitbad, eine Stadtlandschaft sowie eine Weltraumszenerie.

Entwurf
Inspiriert durch die aktuelle Situation der Online-Lehre, kamen wir schlussendlich zu dem Entwurf eines digitalen Raumes. Dieser digitale Raum in Form eines Browserfenster, stellt später unsere Spielfläche dar.
In Figma erstellten wir eine abstrakte Darstellung und sammelten verschiedene Entwürfe für die interaktiven Hindernisse in unserem Browserfenster.

Digital escape

Spielprinzip
Das Spielfeld der Murmelbahn bildet das Browserfenster, welches in einem Bildschirm eingebettet im Hintergrund liegt. Dieser Hintergrund dient durch seine bunte Farbgebung als Kontrast zu dem grauen, tristen Browserfenster.

Das Fenster gliedert sich in drei verschiedene Level, welche durch Scrolling im Spielfluss unterteilt werden. Unsere Murmel, visuell dargestellt in Form des “Apple-Ladecursors”, wird mit der Space-Taste als One-Button durch das Spiel bewegt.

Der Spieler hat die Aufgabe verschiedene Elemente in dem Browserfenster zu überwinden. Das Ziel des Spiels ist es, durch das Hüpfen in den Mülleimer, der sich am unteren Rand des Spielfeldes befindet, dem grauen digitalen Raum zu entfliehen, um in das bunte, wahre Leben einzutauchen.

Elemente

Variantenbildung
Nach dem Festlegen der verschiedenen UI Elemente, die als Hindernisse dienen, erstellten wir mehrere Varianten der Level des Browserfensters.

In Kombination mit dem bunten Hintergrund haben wir die finale Darstellung des Browserfensters ausgewählt:

Endergebnis