CSS is DOOMed

20 hours ago

CSS is used to render DOOM in 3D space using HTML <div> elements and transforms, with game logic handled by JavaScript.
The project separates concerns: JavaScript manages the game loop and state, while CSS handles rendering via custom properties and trigonometry functions like hypot() and atan2().
Key techniques include moving the world instead of a camera, using CSS for animations (doors, lifts, projectiles), and implementing culling and depth sorting for performance.
Modern CSS features like @property, clip-path, anchor positioning, and SVG filters are leveraged, though browser bugs and performance limitations are noted.
The renderer demonstrates CSS's capabilities for complex 3D projections, sprite animations, and responsive design, pushing the boundaries of what's possible in a browser.

Hasty Briefsbeta