CSS Minecraft

• Vollständiger Minecraft-Klon, der nur mit CSS umgesetzt wurde
• Ohne JavaScript sind alle Funktionen ausschließlich mit reinem HTML und CSS implementiert
• Für Interaktionen werden mit der CSS-Pseudoklasse :has() komplexe Trigger und responsive Logik entworfen und verarbeitet
• GitHub, CodePen und die offizielle Website bieten Quellcode und Demo
• Aktuelle Browser (Chromium 105+, Safari 15.4+, Firefox 121+) erforderlich

[reedids]

CSS-Kraftakt...

[anveloper]

Wow..

[ifmkl]

Wow..?

[mkyoon]

Heilige Makrele..

[ndrgrd]

Ist das so aufgebaut, dass man in jedem Feld einen Block auswählen kann und nur das Aussehen mit CSS gestaltet wurde? Wirklich beeindruckend.

[GN⁺]

Hacker-News-Kommentare

• Jemand meinte, das sei das beeindruckendste CSS-Werk, das er je gesehen habe; es habe ihn an die großartige alte CSS-Demo „A Single Div“ erinnert, und diese Demo habe deren Rekord nun gebrochen. Mit der Erwartung, sie selbst zu analysieren, teilte er auch den Link zu A Single Div.
  • Es wirke, als würden viele Elemente miteinander interagieren, aber beim Klicken reagiere nichts, was etwas schade sei; es wurde gefragt, ob das am mobilen Umfeld liege oder ob es grundsätzlich so sei.
• Ausdruck der Bewunderung dafür, wie genial und zugleich elegant die Idee sei, dazu persönliche Notizen darüber, wie die Demo funktioniert, mit einem geteilten Link zur Analyse von CSS Minecraft
• Für alle, die sich fragten, wie das State-Management umgesetzt sei: Ein Blick in den Quellcode habe gezeigt, dass Radio-Buttons verwendet würden und alle im HTML platzierbaren Blöcke enthalten seien.
  • Für alle, die sich nach dem Kamera-Status fragten, wurde ergänzt, dass die Animation im :active-Status der Buttons laufe und ansonsten angehalten sei.
  • Es wurde erstaunt angemerkt, dass man bei einer CSS-Demo noch nie einen derart mutigen Ansatz gesehen habe, verbunden mit großer Sympathie dafür.
  • Man habe sich gefragt, warum die Welt auf 9x9x9 begrenzt sei, und festgestellt, dass 46.000 Zeilen Code für jeden Block verschiedene Materialien festlegten (Luft, Stein, Gras, Erde, Baumstamm, Holz, Blätter, Glas); auch dieser Ansatz wirke interessant.
• Beim Besuch dieser Seite sei plötzlich auf humorvolle Weise der Wunsch aufgekommen, Minecraft noch einmal zu installieren.
• Die Meinung, dass es technisch äußerst beeindruckend sei, verbunden mit der persönlichen Erfahrung, dass es nach der Lebensmitte fast wie eine Rückkehr in die Kindheit wirke, mit HTML und CSS verschiedenste Apps und Websites zu bauen und daran Spaß zu haben.
• In Frageform wurde zusammengefasst, ob das Verständnis der Demo-Umsetzung korrekt sei: Voxel würden als umgesetzt, jede Fläche als mit unterschiedlichen CSS-Klassen definiert, für jede Blockart gebe es Voxel, von denen jeweils nur eines gleichzeitig aktiv sei; diese s seien als 9x9-Raster mit 10 Ebenen multipliziert mit den Blockarten (etwa 6500 Stück) angeordnet, und die gesamte Struktur sei von einem umschlossen, das CSS-Klassen für die Kamerasteuerung reagiere. Dazu kam Lob dafür, wie bahnbrechend dieser Ansatz sei.
• Das CSS umfasse nur 480 Zeilen, und zusammen mit dem Link zum CSS-Quellcode wurde die Information geteilt, dass das HTML 46.022 Zeilen (3,07 MB) habe.
• Reaktion, dass es wirklich erstaunlich sei, zusammen mit der Erfahrung, dass selbst Hunderte geöffnete Tabs unter Linux Chrome kein Problem darstellten.
  • Ergänzend die Meinung, dass der Browser Tabs bei großer Anzahl entlade und ihren Zustand auf der Festplatte speichere, sodass die Leistung kein Problem sei, solange man die Tabs nicht tatsächlich öffne.
• Es wurde die Frage aufgeworfen, wann es wohl ein webbasiertes Minecraft geben werde.
  • Erinnerung daran, dass man früher auf minecraft.net Minecraft Classic direkt spielen konnte.
  • Mit Witz wurde auf die alten Java-Applet-Zeiten angespielt und gescherzt, dass das Telefon klingele.
  • Es wurde daran erinnert, dass frühe Versionen von Minecraft („classic“) direkt im Webbrowser spielbar waren und man sie als Kind tatsächlich gespielt habe; später habe man das Spiel nicht mehr finden können und sich gefragt, ob es vielleicht nur eine Erinnerung aus einem Traum gewesen sei.
• Ehrlicher Ausruf, dass das wirklich großartig sei.