Spiel-Würfel in HTML und CSS

[Rolf B]

Mein Shadow DOM Spielplatz:

https://jsfiddle.net/Rolf_b/ma2jscL9/

Die Darstellung zeigt ein Gitternetz (als visuellen Bezug für die Ansicht) und 4 Würfel.

Teil 1 des JS dient für die Ansichtssteuerung.

Die Ansicht als Ganzes kann gedreht (Tasten 1 und 2) und gekippt (Tasten q und a) werden. Die Perspektivdistanz kann mit + und - geändert werden. Sei still, Gunnar, das Ganze ist nicht anders bedienbar, das ist ein Experimentierplatz.

Die Ansichtsparameter werden im localStorage gespeichert, d.h. wenn man was am Fiddle ändert und mit Run aktualisiert, bleibt die Ansicht erhalten.

Die Taste t würfelt neu.

Teil 2 registriert das custom element <die-3d>

Das Shadow DOM eines Würfels enthält ein div und darin 6 SVGs. Das div dient dazu, den Würfel auf eine bestimmte Seite zu drehen, ohne den äußeren Transform (für die Würfelposition) und die inneren Transforms (für die SVGs) bearbeiten zu müssen. Die SVGs werden per Transform korrekt in den Raum gedreht.

Das die-3d Element kennt ein Attribut namens "face", das die Lage des Würfels angibt. Der eingestellte Wert wird auf der Vorderseite des Würfels gezeigt. Damit das klappt, wird das face-Attribut vom custom element als observed attribute registriert. Zusätzlich wird für JavaScript auch ein Property face bereitgestellt, so dass man nicht mit setAttribute rummachen muss. Plausis für die face-Werte habe ich weggelassen.

Teil 3 spielt ein bisschen mit den Würfeln rum

Sicherlich noch erweiterbar.

Rolf