Spiel-Würfel in HTML und CSS

[Matthias Scharwies]

Servus!

Hallo Matthias,

nice 😀

Ich hatte nämlich auch schon versucht, ein SVG Element (also bspw. ein <rect> innerhalb des <svg>) aus seiner Ebene zu heben - fail. Und alles, was ich im Netz fand, sagte mir: Geht Nicht™️

Ich hatte auch gedacht, dass ich die entsprechenden CSS-Eigenschaften einfach auf SVG-Elemente anwenden könnte - Pustekuchen. Das muss ich im entsprechenden Tutorial noch ergänzen.

Ob man da per Shadow DOM etwas hinbekommt, um im Spiel-HTML nur noch das x-cube Element zu haben?

Das wäre schon attraktiv - zumindest als weiteres ToDo.

Und die Ecken - naja, wohl nicht abrunden, aber abfasen, ob das geht?

Das Frickl-Beispiel (muss eh noch geändert werden) hat jetzt abgerundete Seiten und damit Löcher, in denen manchmal der Hintergrund durchblitzt.

Da bräuchte man Dreiecke, die das verdecken. Für jede abgeschrägte Kante noch ein SVG - puh 😟

Richtig mit „runden“ Ecken und mit Schattenwurf geht's wohl nur mit Blender oder three.js: https://thescottkrause.com/emerging_tech/gameification-threejs-webcrypto-accelerator-blender-gltf/

Auch das Rollen und Klackern (audio) kriegt man wohl nicht realistisch hin.

Herzliche Grüße

Matthias Scharwies