Español
Hay una ley no escrita de internet: si algo existe, alguien intentará ejecutar DOOM en ello. Pruebas de embarazo, tractores, Flipper Zero (en inglés), termostatos. La lista es larga, es ridícula y nunca deja de crecer.
Pero esta semana, el desarrollador Niels Leenheer llevó la broma a un lugar que nadie esperaba. Creó una reimplementación jugable de DOOM en la que cada pared, suelo, barril e imp es un elemento HTML <div>, renderizado íntegramente con CSS. Sin canvas. Sin WebGL. Solo hojas de estilo en cascada haciendo cosas para las que nunca fueron concebidas.
Puedes jugar ahora mismo en tu navegador. El desarrollador ofrece una demo jugable; la compatibilidad y el rendimiento pueden variar según el navegador.
¿Cómo se crea siquiera un juego de disparos en 3D con CSS?
La respuesta corta: con una cantidad aterradora de matemáticas y un conocimiento profundo de funciones modernas de CSS que la mayoría de los desarrolladores web nunca ha utilizado.
Leenheer extrajo los datos originales de los mapas del archivo WAD de la versión shareware de 1993 (los mismos datos que utilizaba el motor original de DOOM) y convirtió cada vértice, segmento de pared y sector en elementos HTML. Cada pared recibe sus coordenadas originales de DOOM como propiedades personalizadas de CSS. Después, CSS se encarga de la geometría: calcula anchos con hypot(), ángulos de rotación con atan2() y coloca todo en el espacio 3D mediante translate3d() y rotateY().
La lógica del juego se ejecuta en JavaScript. Pero el renderizado, todo él, es CSS puro. JavaScript pasa cuatro propiedades personalizadas al área de visualización (las coordenadas X, Y y Z del jugador y su ángulo), y CSS se ocupa del resto. Esa separación clara entre lógica e imagen es una de las partes más elegantes de todo el proyecto.
Mover el mundo en lugar de la cámara
Aquí es donde la cosa se pone interesante desde el punto de vista filosófico (en plan nerd). CSS no tiene cámara. No puedes apuntar una lente virtual hacia una escena 3D y moverla. Así que Leenheer recurrió a un truco clásico de los primeros gráficos 3D: en lugar de mover la cámara por el mundo, mueves el mundo entero alrededor del jugador.
¿Das un paso adelante? El mundo se desplaza hacia atrás. ¿Subes las escaleras? Las escaleras bajan. Cada movimiento se invierte. Pensarlo resulta desconcertante, pero en la práctica funciona perfectamente.
Si alguna vez has explorado la extraña historia del desarrollo de videojuegos (en inglés), sabes que esta clase de trucos está por todas partes. El propio DOOM original estaba lleno de ellos. Que alguien haya recreado ese mismo espíritu de resolución creativa de problemas con CSS en 2026 es, sinceramente, hermoso.
Los suelos no son más que divs inclinados
Los elementos del DOM son verticales por defecto. Los suelos deben ser horizontales. Por eso, cada suelo recibe un rotateX(90deg) para girarlo al plano correcto. Leenheer admite que se equivocó de signo la primera vez. El suelo estaba allí, pero orientado hacia el lado equivocado, invisible para el jugador. Un clásico.
Para las formas irregulares que pueden adoptar los sectores de DOOM (habitaciones en L, curvas más o menos circulares, plataformas con agujeros), utilizó clip-path con trazados SVG y la regla de relleno evenodd. La nueva función shape() de CSS hizo que esto resultara más limpio de lo que habría sido incluso un año antes. El CSS moderno sigue ganando potencia, y proyectos como este lo demuestran.
El truco de las hojas de sprites y la marcha de los zombis
Los enemigos de DOOM son sprites 2D que siempre miran hacia la cámara (una técnica llamada billboarding). Cada enemigo tiene sprites para distintos ángulos de visión, y el juego original almacenaba solo 5 conjuntos únicos de las 8 orientaciones, reflejando los restantes. Leenheer reprodujo esto con hojas de sprites, animaciones CSS steps() y una inversión con scaleX() para las direcciones reflejadas.
Surgió un problema inesperado: todos los enemigos marchaban perfectamente sincronizados. El pie izquierdo de cada zombi tocaba el suelo en el mismo fotograma exacto. En palabras de Leenheer, resultaba «profundamente inquietante». La solución fue un animation-delay aleatorio definido en JavaScript para desfasar el ciclo de marcha de cada enemigo. Un detalle diminuto que marca la diferencia entre una «demo técnica» y «algo que parece vivo».
Todo empezó con un osciloscopio
El proyecto cssDOOM no surgió de la nada. Leenheer había creado anteriormente una versión de DOOM que funcionaba en un osciloscopio de los años ochenta, lo que le proporcionó el código para extraer mapas y una comprensión sólida de las matemáticas implicadas.
Para el bucle de juego de JavaScript (la parte que le parecía menos interesante), utilizó Claude como ayuda para crear una aproximación en JavaScript a partir del código fuente original en C. El código fuente original de DOOM lleva años siendo público, y Leenheer quería dedicar su tiempo a la parte difícil: hacer que CSS hiciera cosas para las que no se diseñó. El código fuente completo de cssDOOM está disponible en GitHub.
Por qué importa más allá del meme
«¿Puede ejecutar DOOM?» es un meme, sí. Pero proyectos como cssDOOM son más que bromas. Son pruebas de esfuerzo para la tecnología de los navegadores. Llevan CSS hasta sus límites absolutos y revelan lo que los navegadores modernos realmente pueden manejar. Cada pared del juego utiliza hypot(), atan2(), propiedades personalizadas de CSS, clip-path y declaraciones @property. Son funciones del navegador utilizadas en una combinación excepcionalmente ambiciosa. La compatibilidad y el rendimiento pueden variar según el navegador y el dispositivo.
Keith Clark creó hace años una demo de un juego de disparos en primera persona renderizado solo con CSS que demostró que la idea era posible. Leenheer la llevó más lejos al renderizar un proyecto jugable con enemigos, puertas, ascensores y animaciones de sprites. Es una reimplementación experimental, no una afirmación de fidelidad total al motor original. La diferencia entre lo que CSS podía hacer en 2010 y lo que puede hacer ahora es asombrosa.
Si alguna vez has visto a speedrunners destripar videojuegos (en inglés) o seguido a desarrolladores independientes construir mundos enteros desde cero (en inglés), sabes que las cosas más interesantes de la tecnología ocurren cuando alguien decide ignorar las reglas y probar algo absurdo.
cssDOOM es absurdo. También es brillante. Y puedes jugar ahora mismo en cssdoom.wtf.
Adelante. Tu navegador puede soportarlo. Probablemente.
Traducción al español del artículo original en inglés del 2026-03-30. Traducido con ayuda de IA el 2026-11-02; las referencias temporales siguen siendo las del original.
