CSSQuake

Artículo original ↗ Discusión en Hacker News ↗

Una recreación de Quake en el navegador, renderizada con HTML y CSS (con TypeScript a cargo de la lógica del juego), está llamando la atención tanto como una demostración técnica como un regreso nostálgico al pasado. Los comentaristas elogian la ingeniosidad de usar transformaciones 3D de CSS para un FPS completamente jugable, a la vez que señalan rarezas de rendimiento, problemas de control y la cuestión más amplia de si un sistema de estilo declarativo debería ser capaz de un renderizado tan complejo, parecido al de un juego, en primer lugar.

Renderizado e implementación

  • El juego usa CSS y HTML solo para el renderizado; toda la lógica central del juego está escrita en JavaScript/TypeScript.
  • Los elementos DOM y las transformaciones 3D de CSS reemplazan el renderizado tradicional con canvas/WebGL.
  • Un paso de compilación extrae datos de QuakeC/progs.dat a JSON (estados, modelos, ataques, sonidos) que consume el runtime de TypeScript para un juego con sensación “Quake‑ish”.
  • Algunos comentaristas señalan funciones de audio de CSS (style sheets aural), pero el sonido en esta demo se controla mediante una opción dentro del juego / un atajo de teclado, no con CSS puro.

Relación con otros proyectos y linaje

  • Varias personas comparan esto con un proyecto similar de “CSS Doom”; el hilo aclara que son proyectos separados.
  • Ambos se ven como parte de una línea más larga de motores experimentales CSS3D y demos FPS anteriores.

Problemas de jugabilidad, controles y UX

  • Se reportan varias rarezas de control: movimiento con rebote elástico, quedarse atascado en esquinas y pendientes, atravesar objetos y dificultad para salir del juego.
  • El menú puede desaparecer al hacer clic en la ventana; la solución es usar Tab para mostrar el menú, Esc para salir o cerrar la pestaña.
  • Algunos botones originalmente requerían disparar en lugar de tocar; luego este comportamiento se ajustó.
  • Las extensiones de modo oscuro pueden hacer que partes del mapa sean casi invisibles.

Rendimiento y diferencias entre navegadores

  • Las experiencias varían mucho: algunos ven 60 FPS fluidos incluso en hardware modesto, mientras que otros informan tirones severos o bloqueos.
  • Safari/WebKit se reporta con frecuencia como entrecortado y con fallos; Chrome y Firefox en varias plataformas suelen ir más suaves.
  • Muchos contrastan el rendimiento entrecortado con lo bien que el Quake original funcionaba en hardware 1990s mucho más débil, destacando el costo de usar CSS como canal de renderizado.

Reacciones a CSS como medio

  • Hay una gran admiración por la hazaña técnica y el espíritu de “porque podemos”.
  • Algunos lo ven como un uso impresionante pero inherentemente ineficiente de un lenguaje de estilos declarativo.
  • Otros argumentan que simplemente aprovecha capacidades 3D ya existentes y que es un reto divertido, no una elección seria de motor.

Nostalgia y notas culturales

  • Hay numerosas reacciones nostálgicas de personas que jugaron Quake hace décadas y aún recuerdan niveles y movimiento por memoria muscular.
  • El hilo también incluye bromas ligeras sobre chistes de CSS (float, z‑index, centrar divs) y comentarios del estilo “¿ha ido la ciencia demasiado lejos?”.