In this class we focus on learning programming as a tool to create, prototype and visualize.
This semester the final projects are slide puzzles game.
Let’s Play!
In this class we cover basic programming elements such as variables, loops, conditions and classic algorithms. As well we cover complexity, prioritization and framing which is especially important in a creative and innovative context.
Als Aufgabe sollten wir ein 8-Puzzle via Javascript Programmieren:
Das 8-Puzzle ist ein Rätselspiel bestehend aus 8 nummerierten Teilen und einem freien Platz, die auf einem 3x3-Feld angeordnet sind. Das Ziel des Spiels besteht darin, die Teile so zu verschieben, dass sie in der richtigen Reihenfolge sortiert sind, indem der freie Platz genutzt wird, um die benachbarten Teile zu tauschen.
Mein 8-Puzzle verfügt über folgende Funktionen:
-> Es ist responsiv und kann daher auch auf Mobilgeräten gespielt werden.
-> Die Puzzleteile können per Klick oder Drag & Drop gesteuert werden.
-> Der Spieler kann die Größe des Spielfelds von 3x3 bis 8x8 auswählen.
-> Bei Interaktionen mit bestimmten Elementen werden akustische Signale ausgegeben,
-> außerdem gibt eseine Hintergrundmusik.
-> Das Spiel kann durch den Pause-Button pausiert werden.
-> Es gibt einen Algorithmus, der 3x3-Puzzles so schnell wie möglich lösen kann.
Inspiration des Stils:
Ich wollte meinem Puzzle einen neonartigen Look verleihen. Daher habe ich nach coolen Stilen gesucht, die diesen Look kommunizieren können.
Dabei fiel mir der Cyberpunk-Stil ins Auge, den ich zuerst umsetzen wollte. Nachdem ich jedoch einige AI-generierte Cyberpunk-Stilbilder von Autos gesehen hatte, entschied ich mich, den Stil eher in Richtung Drift-Autos zu bringen. Der schnelle und aufregende Flair von Drift-Autos gefiel mir sehr, ebenso wie die damit assoziierte Drift-Phonk-Musik.
Anschließend habe ich den Stil in meinem Puzzle durch AI-generierte Bilder und eine Drift-Phonk-Hintergrundmusik umgesetzt.
Die Größte Herausforderung:
Die Größte Herausforderung war es den Algorithmus zum Automatischen lösen des 3x3 Puzzles zu Coden.
Dazu musste ich erstmal verstehen welche Algorithmen für diesen Vorgang geeignet waren.
Dabei stieß ich immer wieder auf den A* oder A-Star-Algorithmus. Dieser unterscheidet sich von anderen Algorithmen dadurch, dass er nur jene Wege berechnet, die sich als besonders effizient herrausstellen. Das erreicht er, indem er jedem Schritt einen Prioritätswert zuordnet und die Schritte mit der besten Priorität berechnet. Der Prioritätswert entsteht durch eine Kombination aus der Anzahl bisheriger Schritte und einer Schätzung, wie weit es von dem aktuellen Schritt bis zum Ziel ist.
