GAME DEVELOPMENT / CSS RENDERING
cssDOOM
DOOM, rendered entirely with CSS. Every wall, floor, sprite, and effect is a styled DOM element placed in 3D space with CSS transforms. JavaScript runs the game loop; the browser's CSS engine does the drawing. (and no, I did not code the source code.)
Click the fullscreen icon in the top-right of the game for mouse-look. Arrow keys or WASD move, Space opens doors, and clicking fires.
How it works
The scene is built from DOOM's own linedefs, sidedefs, and sectors. Each surface becomes a div whose width, height, and 3D transform are calculated by CSS from raw WAD coordinates using hypot(), atan2(), sin(), and cos(). The game loop only updates a handful of custom properties — player position and angle — and CSS moves the world around them.
This is Niels Leenheer's open-source cssDOOM project, embedded here as a live build. The original write-up and playable site are linked below.