CSS Minecraft

• Un clon completo de Minecraft hecho solo con CSS
• Sin usar JavaScript, todas las funciones están implementadas únicamente con HTML y CSS
• Usa la pseudoclase :has() de CSS para diseñar disparadores complejos y lógica reactiva, manejando así las interacciones
• Hay código fuente y demos disponibles en GitHub, CodePen y el sitio oficial
• Requiere navegadores modernos (Chromium 105+, Safari 15.4+, Firefox 121+)

[reedids]

Demostración de fuerza con CSS...

[anveloper]

Guau..

[ifmkl]

Vaya..?

[mkyoon]

Santo cielo..

[ndrgrd]

¿Lo organizaron para que se pudiera seleccionar un bloque en cada casilla y solo decoraron la apariencia con CSS? La verdad, es impresionante.

[GN⁺]

Comentarios de Hacker News

• Comparte que le parece el caso más impresionante de arte en CSS que ha visto hasta ahora; dice que le recordó a un viejo y genial demo de CSS llamado “A Single Div”, y que este demo acaba de romper ese récord. También comparte el enlace de A Single Div con la expectativa de analizarlo por su cuenta.
  • Lamenta que muchos elementos parezcan interactivos pero no respondan al hacer clic; se pregunta si es por estar en móvil o si simplemente así es originalmente.
• Expresa admiración por lo ingeniosa y elegante que es la idea, y comparte unas notas personales sobre cómo funciona el demo: enlace al análisis de CSS Minecraft
• Para quienes tenían curiosidad por el manejo del estado, comenta que revisó el código fuente y descubrió que usa botones de opción, y que dentro del HTML están incluidos todos los bloques que se pueden colocar.
  • Añade una explicación para quienes tenían curiosidad por el estado de la cámara: descubrió que la animación se ejecuta mientras el botón está en estado :active y fuera de eso se detiene.
  • Dice que nunca había visto un enfoque tan atrevido en un demo de CSS, y que al mismo tiempo le encantó.
  • Se preguntaba por qué el mundo estaba limitado a 9x9x9, pero confirmó que las 46,000 líneas de código asignan a cada bloque distintos materiales (aire, piedra, césped, tierra, tronco, madera, hojas, vidrio), y comenta que ese enfoque también le parece interesante.
• Dice en tono divertido que visitar este sitio le dio ganas de volver a instalar Minecraft.
• Señala que es muy impresionante desde el punto de vista técnico, y comparte una experiencia personal: al haber pasado ya la mitad de su vida, siente más bien que volvió a la infancia y disfruta creando toda clase de apps y sitios con HTML y CSS.
• Resume en forma de pregunta si entendió bien la implementación del demo: los voxel se implementan como , cada cara se define como un con distintas clases CSS, hay un voxel por cada tipo de bloque y solo uno puede estar activo a la vez, estos se organizan como una cuadrícula de 10 capas de 9x9 multiplicada por los tipos de bloque (unas 6500 piezas), y toda la estructura está envuelta en un con clases CSS que responden al control de la cámara. Añade que este enfoque es muy innovador.
• Comenta que el CSS tiene apenas 480 líneas y comparte el enlace al código fuente CSS, además de mencionar que el HTML tiene 46,022 líneas (3.07MB).
• Reacciona diciendo que es realmente asombroso y comparte que en Chrome sobre Linux no tiene problemas incluso con cientos de pestañas abiertas.
  • Añade que, aunque haya muchas pestañas, el navegador las descarga de memoria y guarda su estado en disco, así que no hay problemas de rendimiento mientras no se abran realmente.
• Se pregunta cuándo existirá un Minecraft basado en la web.
  • Comparte el recuerdo de que antes se podía jugar Minecraft classic directamente en minecraft.net.
  • Menciona en tono juguetón la época de los Java Applets diciendo en broma que está sonando el teléfono.
  • Recuerda que las primeras versiones de Minecraft (“classic”) se podían jugar directamente en el navegador, y que él realmente las disfrutó de niño; luego no pudo volver a encontrar ese juego y llegó a preguntarse si no habría sido un recuerdo de un sueño.
• Expresa con total honestidad que es realmente impresionante.