DOOM on CSS? Programmer makes browser render shooter without a graphics engine

A programmer from the Netherlands released a version of the classic shooter DOOM that runs without a graphics engine. All graphics in the game are rendered via CSS, and javascript only handles the logic, player movement, and monster behavior.

The project is called cssDoom, and to create it the author took the original WAD files from the 1993 version and turned every scene element into HTML blocks, with their position in space defined via CSS transforms. The main technical problem: CSS has no camera, so the author got around it with a classic trick — the player doesn’t move, the entire world around them does. javascript passes four parameters to CSS: the player’s X, Y, Z coordinates and the viewing angle, and the CSS engine shifts and rotates the entire scene in the opposite direction. Running DOOM on various devices is old news by now, but reworking it like this is more interesting.

The main problem is that browsers aren’t optimized for thousands of 3D-transformed elements. Large maps cause Safari on iOS to crash, so a culling system was added: elements outside the field of view or too far away are hidden. There was a problem with the sky in the game. Since the original DOOM cheats and draws the sky texture on 2D walls over the real geometry. In honest 3D that trick doesn’t work, and through windows you can see things that shouldn’t be there.

In cssDoom, all nine levels of the first episode and five difficulty levels are available. Besides the standard first-person view, there’s a mode where the camera goes up to the ceiling, as well as a third-person follow mode — and the camera position there is computed entirely in CSS.

The source code is on GitHub and anyone can play the browser version.

What do you think — do experiments like this have any practical use beyond “can CSS run DOOM?” Or is it just a technical stunt that doesn’t affect real development? Share your thoughts in the comments.