DOOM Reborn Through CSS Alone

Niels Leenheer wanted to see how far he could push a modern web browser, and as it turns out, the answer is much further than most people would have expected. He completely reconstructed the visual environment of the original 1993 DOOM game using only cascading style sheets (CSS). Every wall, floor tile, barrel, and charging imp is a standard HTML div element. Here’s the interesting part: JavaScript controls all of the game logic, while the browser handles all of the drawing using pure CSS. The end result is a game that runs well on any modern tab and feels quite similar to the real thing.

All of the map data comes from the original DOOM WAD file, thus everything in the first episode is precisely where it should be, including every vertex, line, sector, and so on. It’s then only a matter of a tiny script transforming those numbers into thousands of divs, each with its own set of custom properties for storing things like start and end points, floor height, and ceiling height. CSS then converts those values into something you can see.

A single wall begins as a simple div with the coordinates of its two endpoints and vertical range assigned. CSS then does its magic, calculating the wall’s width on the fly, determining its rotation angle, and arranging it in three dimensions. The rotateY command causes it to face the same way it did in 1993, and it does the same for all other surfaces in the level.

Floors and ceilings are treated similarly, with an extra 90-degree rotateX to ensure they lie flat, and any more complex, non-rectangular items are clipped into the correct outline using clip-path. The backdrop’s position is defined via world coordinates rather than screen coordinates, so the brick pattern remains nicely aligned across surrounding surfaces, flowing smoothly from one chamber to another.

Getting the camera movement right proved difficult because CSS lacks a built-in camera object. Instead of guiding the player through the globe, Leenheer reverses the scene. Four unique characteristics track the player’s location and facing angle, and the root scene container uses the inverse of these values every frame to create the illusion that the world is moving. It’s actually quite ingenious.

The enemies are all just flat spritesheets that always face the player, with JavaScript setting a custom property every frame to select the appropriate row of the sheet, mirroring the image, and flipping it around for angles on the opposite side. Walking cycles, assault frames, pain reactions, and death animations all employ data-state attributes, while the shimmering invisibility effect on spectres is simply an SVG filter that adds turbulence and displacement to the sprite.
[Source]