CSS is DOOMed: How Modern Web Standards Rendered the Classic FPS Entirely with CSS Transforms
Developer Niels Leenheer has successfully rendered the classic game DOOM using modern CSS, proving the immense progress of web styling capabilities over the last 30 years. While the game logic and state are handled by JavaScript—partially generated with the assistance of Claude AI based on the original C source code—every visual element including walls, floors, barrels, and imps is a <div> element positioned in 3D space using CSS transforms. This project, which evolved from a previous experiment running DOOM on a 1980s oscilloscope, serves as a stress test for browser limits. Although the author initially attempted to handle game logic within CSS, it proved too complex, leading to a hybrid approach that highlights the power of modern CSS rendering.
Key Takeaways
- Pure CSS Rendering: Every graphical element in the game, from the environment to the enemies, is a standard HTML
<div>positioned using CSS 3D transforms. - Hybrid Architecture: While rendering is handled by CSS, the game logic and loop run in JavaScript to manage complexity.
- AI-Assisted Development: The developer used Claude to help port the original DOOM C source code into a JavaScript game loop.
- Browser Stress Test: The project was designed specifically to find the limits of modern browser performance and demonstrate how far CSS has progressed in three decades.
In-Depth Analysis
From Oscilloscopes to Modern Web Standards
The project originated from the developer's previous success in running DOOM on a 1980s oscilloscope. This prior experience provided the foundational math and the necessary code to extract maps from the original game files. The transition to CSS was driven by a desire to showcase the evolution of web technology. By treating the browser as a 3D engine, the developer transformed the traditional perception of CSS from a simple styling language into a powerful rendering tool capable of handling complex spatial transformations.
The Limits of CSS Logic vs. Rendering
During the proof-of-concept phase, the author explored the possibility of handling game state and logic entirely within CSS. However, while rendering proved to be "absolutely" feasible, the logic required for a functional game like DOOM was deemed too complicated for CSS alone. To maintain focus on the CSS rendering aspect, the developer utilized Claude to create an approximate version of the game loop in JavaScript. This allowed the project to leverage the original DOOM source code—which has been public for years—without the manual labor of a hand-coded port, focusing instead on the innovative use of 3D transforms for the visual output.
Technical Implementation of the 3D World
The core of the engine relies on the 3D capabilities of modern CSS. Every wall, floor, and sprite (like barrels and imps) is represented by a <div>. These elements are manipulated in a 3D space, allowing the browser's rendering engine to handle the perspective and depth that traditionally required dedicated graphics APIs. This approach highlights the significant progress CSS has made over the last 30 years, moving from basic document styling to a tool capable of recreating iconic 3D gaming experiences.
Industry Impact
This project serves as a significant benchmark for the web development industry, demonstrating that modern CSS has reached a level of maturity where it can handle complex 3D rendering tasks previously reserved for Canvas or WebGL. It underscores the potential for "CSS-first" visual experiences and encourages developers to rethink the boundaries between styling and engine-level rendering. Furthermore, the use of AI to port legacy C code to JavaScript highlights a growing trend in how developers can use LLMs to handle repetitive architectural tasks, allowing them to focus on creative and experimental implementations of web standards.
Frequently Asked Questions
Question: Is the game logic also written in CSS?
No. While the developer initially attempted to include game logic and state in CSS, it was found to be too complicated. The game logic and loop are handled by JavaScript, while the rendering is done entirely through CSS.
Question: How are the 3D graphics generated without WebGL?
The game uses standard HTML <div> elements for every object in the game. These elements are positioned and oriented in a 3D environment using CSS transforms, which the browser then renders as a cohesive 3D scene.
Question: What was the role of AI in this project?
The developer used Claude to help port the original DOOM C source code into a JavaScript game loop. This allowed the developer to focus on the CSS rendering challenges rather than manually rewriting the well-known game logic.
