CSS Doom: renderizado del juego sin Canvas

Doom en CSS puro: Renderizado sin Canvas ni WebGL

El desarrollador Niels Lehner lanzó el proyecto cssDoom —una implementación completa del clásico juego Doom, donde todos los gráficos se renderizan usando solo CSS. La lógica del juego se implementa en JavaScript, sin usar canvas ni WebGL. Utiliza el código fuente original de Doom de id Software, disponible en archivos WAD. El proyecto está alojado en GitHub bajo la licencia GPLv2.

Todos los elementos visuales —sprites, paredes texturizadas, niveles, efectos— se forman a partir de elementos div. Se posicionan en espacio 3D usando las propiedades CSS transform y transform-style: preserve-3d. JavaScript no interfiere directamente con los estilos: en su lugar, establece propiedades CSS personalizadas basadas en la geometría de vértices del archivo WAD. CSS calcula independientemente el ancho, alto y transformaciones usando funciones trigonométricas.

Adaptación de coordenadas y bucle del juego

El sistema de coordenadas de Doom difiere del 3D de CSS: Doom usa un sistema 2D donde Y aumenta hacia el norte, mientras que en CSS Y apunta hacia arriba y Z hacia el espectador. La transformación se implementa mediante translate3d(x, -z, -y). Las propiedades personalizadas se definen en coordenadas de Doom, y CSS las interpreta.

El bucle del juego en JavaScript rastrea la posición del jugador, la entrada, colisiones e IA de enemigos. Se trata de un puerto directo del código original. La separación es estricta: JS solo actualiza propiedades clave como --player-x, --player-y, --player-z, --player-angle. CSS mueve todo el mundo relativo al jugador, simulando una cámara (CSS no tiene cámara). El movimiento y la vista son solo actualizaciones a estas cuatro propiedades.

Soporta vista en primera persona, con la opción de cambiar a la vista general del mapa.

Detalles técnicos de la construcción de la escena

El proceso comienza con el análisis del archivo WAD: se extraen definiciones de líneas, definiciones de lados y parámetros de sectores. Se generan elementos div a partir de ellos con la geometría de vértices original. CSS usa calc() para los cálculos:

• El ancho y alto de los elementos se determinan por ángulos del campo de visión y distancia.
• Las transformaciones tienen en cuenta la perspectiva.

Ejemplo de una estructura simplificada de propiedades personalizadas:

:root {
  --player-x: 0;
  --player-y: 0;
  --player-angle: 0;
}

.scene-element {
  width: calc(var(--doom-width) * var(--perspective-factor));
  height: calc(var(--doom-height) * var(--perspective-factor));
  transform: translate3d(
    calc(var(--doom-x)),
    calc(-var(--doom-z)),
    calc(-var(--doom-y))
  ) rotateY(var(--player-angle));
}

Este enfoque asegura el rendimiento: el renderizador CSS del navegador optimiza las transformaciones 3D en la GPU.

Comparación con otros experimentos

cssDoom continúa la línea de puertos no convencionales de Doom. Previamente, Adam Rice desarrolló Doom Over DNS: el juego se ejecuta a través de registros TXT DNS de Cloudflare. El archivo WAD se comprime en ~1964 registros y se descomprime sobre la marcha por un script de PowerShell. Se cargan DLL de .NET en memoria sin escribir en disco. Esto demuestra límites de protocolos, pero se queda corto de cssDoom en complejidad visual.

| Aspecto | cssDoom | Doom Over DNS |

|---------------|----------------------|---------------------|

| Renderizado | CSS 3D div | Estándar (navegador)|

| Lógica | JS (puerto Doom) | PowerShell + .NET |

| Dependencias | Solo CSS/JS | Consultas DNS |

| Accesibilidad | GitHub | Zona pública Cloudflare |

Puntos clave

• Renderizado completo de Doom en CSS: divs en espacio 3D simulan raycasting.
• Propiedades personalizadas + calc() para transformaciones dinámicas de datos WAD.
• Separación estricta de JS (lógica) y CSS (visuales) para optimización.
• Adaptación de coordenadas de Doom a 3D CSS mediante inversión de ejes.
• Código abierto en GitHub, licencia GPLv2.

El proyecto es útil para estudiar los límites de CSS3 en el desarrollo de juegos, especialmente animaciones de transform y propiedades personalizadas en escenarios en tiempo real.

— Editorial Team