A developer built a fully playable DOOM renderer using only CSS for rendering, with JavaScript handling only the game loop. Every wall, floor, sprite, and enemy is a <div> positioned in 3D space using CSS transforms. The project showcases advanced CSS features including 3D transforms with trig functions (hypot, atan2, sin,
Table of contents
Back to high schoolThe coordinate problemMoving the world, not the cameraFloors are divs, tipped sidewaysLining up all of those texturesAnimating doors, lifts, and @propertySprite animations and the mirror trickProjectiles, explosions and bullet puffsLighting with filter: brightness()Invisible Spectres and SVG filtersResponsive DOOM and anchor positioningSpectator viewThe culling problemDepth sortingWhere DOOM just cheatsWas it worth it?6 Comments
Sort: