Willys Works

Hier findest du alle kleinen Spielereien und Mini-Projekte an einem Ort.

3D Zauberwuerfel mit JS-Logik

Zeit: 00:00.00

Moves: 0

Status: Geloest

Scramble:

Steuerung: U, R, F, L, B, D. Mit Shift jeweils inverted.

Der 3D-Zauberwuerfel ist die direkte Fortsetzung des 2D-State-Cubes. Nachdem beim 2D-Wuerfel klar geworden war, dass die eigentliche Staerke nicht in den sichtbaren HTML-Tabellen liegt, sondern in einem sauber verwalteten Wuerfelzustand, stellte sich fuer mich der naechste logische Schritt: Wenn der Zustand ohnehin schon unabhaengig von der Ausgabe gedacht wird, muesste sich dieselbe Grundidee auch in eine raeumlichere Darstellung uebertragen lassen.

Der wichtigste Unterschied liegt deshalb nicht darin, dass ploetzlich ein vollkommen anderer Wuerfel entstanden ist, sondern darin, dass sich die technische Grundlage verschoben hat. Im 2D-Projekt wurde der Zustand noch serverseitig in PHP veraendert und anschliessend als abgewickeltes Netz aus Tabellen neu ausgegeben. In dieser Variante lebt der Zustand waehrend der laufenden Seite im Browser. JavaScript merkt sich weiterhin sechs Seiten mit jeweils neun Feldern, fuehrt Zuege wie U, D, F, B, R oder L direkt auf diesen Arrays aus und baut danach alle sechs Seiten mit ihren 54 Stickern neu aus diesem Zustand auf.

Die Logik aus dem 2D-Wuerfel bleibt dadurch erkennbar erhalten. Auch hier werden einzelne Seiten gedreht, Reihen und Spalten der angrenzenden Seiten ausgelesen, an anderer Stelle wieder eingesetzt und bei Bedarf gespiegelt, wenn die Perspektive des Wuerfels das verlangt. Neu ist aber, dass diese Flaechen nicht mehr als flaches Tabellen-Netz nebeneinander liegen, sondern mit CSS-3D-Transformationen zu einem kleinen Raumkoerper zusammengesetzt werden.

Aus der vorher eher abstrakten Zustandsmaschine wird dadurch eine deutlich greifbarere Version desselben Gedankens. Die Ansicht des Wuerfels kann mit der Maus frei gedreht werden, Zuege lassen sich ueber die Tastatur ausloesen, Scramble, Reset, Move-Zaehler und Timer laufen direkt im Frontend mit. Trotzdem bleibt die Darstellung bewusst nur die Oberflaeche des Ganzen: Entscheidend ist weiterhin der interne Zustand, aus dem die sechs Seiten immer wieder neu aufgebaut werden.

Rueckblickend schliesst dieses Projekt genau an die Grenze an, die der 2D-Wuerfel gezeigt hat. Die PHP-Variante war gut, um die reine Wuerfellogik nachvollziehbar zu machen. Die 3D-Variante nimmt diesen Kern mit, verlegt ihn aber dorthin, wo direkte Interaktion und raeumliche Ausgabe besser aufgehoben sind: ins Frontend. Damit ist der 3D-Zauberwuerfel weniger ein kompletter Neustart, sondern eher der naechste Ausbau derselben Idee.