Knikkerbaan - Murmelbahn

Im Projekt “One-Tap Murmelbahn” der Kurse “Programmiertes Entwerfen 1” und “Programmiersprachen 1”, bestand unsere Aufgabe darin, eine Murmelbahn zu kreieren, welche im Browser läuft und nur mithilfe der Leertaste kontrolliert werden kann.
Im Rahmen dieses Projekts ist die Knikkerbaan entstanden.

Beschreibung

Die Murmel, in unserem Fall ein Wollknäuel, landet in einem Kinderzimmer. Angestoßen von einer Katze, sucht sie sich mithilfe des Spielers einen Weg nach draußen.
Dabei erfüllt die Leertaste zwei Funktionen, die dabei helfen, das Wollknäuel durch die vielfältigen Hindernisse des Kinderzimmers zu navigieren. Durch einfaches, kurzes Antippen der Leertaste, führt das Knäuel einen Sprung aus, während es durch Halten der Leertaste in der Zeit zurückversetzt wird.

Ideenfindung

Nachdem wir uns viel Inspiration aus allen möglichen Bereichen gesucht, einige Ideen erstellt, und einige wieder verworfen hatten, haben wir uns letztendlich für das Thema Kinderzimmer entschieden. Unsere Murmel sollte also als Wollknäuel ins Zimmer fallen, von der Katze ins Rollen gebracht und durch das Kinderzimmer navigiert werden. Dazu passend haben wir uns visuell für die Optik einer Kinderzeichnung entschieden. Ursprünglich war unsere Idee, dass sich das Wollknäuel beim Fortschreiten des Levels immer weiter abrollt und so einen Faden auf seinem Weg hinterlässt.

An diesem Faden sollte sich das Knäuel dann, durch Halten der Leertaste, wieder aufrollen können. Diese Idee haben wir allerdings wieder verworfen, da wir hier an die Grenzen der uns vorgegebenen Libraries gestoßen sind. Der Kompromiss war, dass wir diese Funktion leicht umgeändert haben; und so ist die Time-Rewind-Funktion entstanden, welche nun ein zentrales Element unserer Murmelbahn darstellt.

Schaffensprozess

Dazu haben wir uns zunächst Hindernisse überlegt, welche zum einen in einem normalen Kinderzimmer zu finden sind, zum anderen aber auch eine gewisse Herausforderung für die Spieler:innen mit sich bringen.
Aus unseren Favoriten dieser Hindernisse, haben wir dann ein grobes Leveldesign erstellt und dieses mit einfachen Objekten nachgebaut. Danach ging es daran, den Code zu verfeinern und die Zeichnungen zu erstellen.

Video

Das Ergebnis unseres Projekts könnt ihr hier als Video sehen.

Hier findet ihr den Link zu unserem GitHub Repository und auf GitHub Pages kann man die Knikkerbaan sofort im Browser ausprobieren.