DOOM en CSS? Un programador hace que el navegador renderice un shooter sin un motor gráfico
Arkadiy Andrienko
Un programador de los Países Bajos lanzó una versión del clásico shooter DOOM que funciona sin un motor gráfico. Todos los gráficos en el juego se renderizan a través de CSS, y javascript solo maneja la lógica, el movimiento del jugador y el comportamiento de los monstruos.
El proyecto se llama cssDoom, y para crearlo el autor tomó los archivos WAD originales de la versión de 1993 y convirtió cada elemento de la escena en bloques HTML, con su posición en el espacio definida a través de transformaciones CSS. El principal problema técnico: CSS no tiene cámara, así que el autor lo solucionó con un truco clásico: el jugador no se mueve, todo el mundo a su alrededor lo hace. javascript pasa cuatro parámetros a CSS: las coordenadas X, Y, Z del jugador y el ángulo de visión, y el motor CSS desplaza y rota toda la escena en la dirección opuesta. Correr DOOM en varios dispositivos es una noticia antigua ya, pero rehacerlo así es más interesante.
El principal problema es que los navegadores no están optimizados para miles de elementos transformados en 3D. Los mapas grandes hacen que Safari en iOS se bloquee, así que se añadió un sistema de culling: los elementos fuera del campo de visión o demasiado lejanos se ocultan. Hubo un problema con el cielo en el juego. Dado que el DOOM original hace trampas y dibuja la textura del cielo en paredes 2D sobre la geometría real. En un 3D honesto, ese truco no funciona, y a través de las ventanas se pueden ver cosas que no deberían estar allí.
En cssDoom, están disponibles los nueve niveles del primer episodio y cinco niveles de dificultad. Además de la vista estándar en primera persona, hay un modo donde la cámara sube al techo, así como un modo de seguimiento en tercera persona — y la posición de la cámara allí se calcula completamente en CSS.
El código fuente está en GitHub y cualquiera puede jugar la versión del navegador.
¿Qué piensas — tienen experimentos como este alguna utilidad práctica más allá de “¿puede CSS ejecutar DOOM?” O es solo un truco técnico que no afecta al desarrollo real? Comparte tus pensamientos en los comentarios.