HeadlinesBriefing favicon HeadlinesBriefing.com

CSS Engineer Builds DOOM in Pure CSS: Pushing Browser Limits

Hacker News •
×

A developer has built a playable version of DOOM entirely in CSS, proving modern browser capabilities can handle complex 3D rendering without WebGL. Every wall, floor, barrel, and imp is a <div> element positioned in 3D space using CSS transforms. The game logic runs in JavaScript, but all rendering happens through CSS calculations.

This project started after creating a DOOM version for a 1980s oscilloscope, giving the developer existing code to extract maps and understand the math. Initial attempts to handle game state and logic in CSS proved too complicated, so the project split into JavaScript for game mechanics and CSS for rendering. The developer used Claude to port the original DOOM C code into JavaScript, focusing on the CSS challenges.

The implementation uses high school geometry—Pythagoras for wall width and arctangent for rotation—with CSS functions like hypot() and atan2() doing the heavy lifting. The clever trick of moving the entire world instead of a camera, combined with CSS custom properties for player position, creates smooth first-person movement entirely through style calculations.