Im Rahmen des 100jährigen Bauhaus Jubiläums 2019 wurde ein interaktives Spiel für die Sonderausstellung Ausdruckstanz und Bauhausbühne im August Kestner Museum realisiert. Die Ausstellung wurde am 23.05.2019 eröffnet und kann bis zum 29.09.2019 betrachtet werden. Das Spiel wird während der gesamten Ausstellungsdauer zur Verfügung stehen.

Das Spiel „Kostüm-Ballett – Kombiniere dein eigenes Bauhaus-Kostüm!“ wurde mit JavaScript, CSS3 und HTML5 umgesetzt. Dabei kann man sein eigenes Bauhaus-Kostüm zusammenstellen. Es wurde als Progressive Web App (PWA) programmiert, sodass es auch offline gespielt werden kann. Das Spiel wurde vom WebLab in Kooperation mit der Abteilung Design und Medien der Fakultät III und dem August Kestner Museum erstellt.

Das Bild „Bauhaus Dance Costumes“ von Ciera Shaver aus dem Jahr 2016 diente dabei als Vorlage für die Kostüme. Der JavaScript Code basiert auf dem Potato Maker von Giulia Cardieri, der auf Codepen.io zur Verfügung gestellt wird.

Der Code wurde so verändert, dass die einzelnen Kostümteile als Image geladen werden, sobald diese im Menü ausgewählt werden. Ebenso ändert sich das Bild im übergeordneten Menü je nach Auswahl. Für die Umsetzung wurden kleinere JavaScript Funktionen geschrieben.

Die einzelnen Div-Container zu den jeweiligen Kostümteilen wurden in einem Dictionary gepackt, um sie einfach abrufen zu können.

Die Standardanzeige im Menü ist die Auswahl der Kopfbedeckung. In dieser Funktion wird das Untermenü der jeweiligen Kategorie generiert. Diese Funktion wurde gleichzeitig als Variable festgelegt. Um das Untermenü zu erstellen, wird auf die ID des Listenelements aus dem Hauptmenü zugegriffen, welches angeklickt wird.

Durch das Hinzufügen bzw. Entfernen der hidden Class, werden die gewählten Kostümteile im rechten Hauptbereich angezeigt und das vorherige Kostümteil entfernt. Diese Funktion ist ebenfalls eine Variable.

Diese Funktion verändert das Bild im Hauptmenü entsprechend dem derzeit gewählten Kostümteil.

Dies ist die Hauptfunktion, die dafür sorgt, dass alle Funktionen gleichzeitig ausgeführt werden. Hier werden die Variablen der drei oberen Funktionen aufgerufen.

One Comment

Comments are closed.