NielsLeenheer

NielsLeenheer / cssDOOM

Public

A DOOM engine implemented in CSS

45
3
100% credibility
Found Mar 29, 2026 at 45 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
JavaScript
AI Summary

A playable browser demo recreating the original DOOM game with all visuals rendered using CSS 3D transforms on styled DOM elements.

How It Works

1
🌐 Discover cssDOOM

You hear about a wild project recreating the classic DOOM game using only web page styles.

2
🖱️ Jump into the demo

Click the link to cssdoom.wtf and watch the eerie 3D world load right in your browser.

3
🎮 Start blasting

Grab your mouse or keys to run through haunted halls, shooting zombies and dodging fireballs in smooth 3D.

4
🔫 Gear up and fight

Pick up shotguns, rockets, and health packs while battling demons that chase and attack you.

5
🚪 Explore secrets

Flip switches to open doors, ride moving platforms, and hunt for keys to deeper levels.

🏆 Conquer the map

Clear the level feeling amazed that this full DOOM experience runs purely on web styles.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 45 to 45 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is cssDOOM?

cssDOOM reimplements the original DOOM engine in the browser, rendering walls, floors, sprites, and effects purely with CSS 3D transforms on DOM elements—no canvas or WebGL needed. JavaScript handles game logic like movement, combat, and AI, pulling geometry straight from id Software's open-source DOOM engine code for accurate E1M1 gameplay with enemies, weapons, doors, and lifts. Play it live on GitHub Pages at cssdoom.wtf for a web-based DOOM engine tutorial in action.

Why is it gaining traction?

It stands out by pushing CSS to its limits with trig functions like hypot and atan2 for 3D scene math, plus @property for smooth animations on player position and sector lights—delivering playable FPS perf despite thousands of transformed DOM nodes. Developers dig the strict JS/CSS split: JS sets four custom props per frame, CSS handles the rest, making it a masterclass in CSS-driven rendering versus typical WebGL DOOM ports. The blog post explains the DOOM engine mechanics clearly, hooking retro game fans and CSS tinkerers.

Who should use this?

Frontend engineers exploring CSS 3D for interactive scenes, like virtual tours or product viewers without heavy GL libs. Game port devs wanting a lightweight web DOOM engine reference for maps and physics. Educators or doom engineers building CSS DOOM variants, from GitHub online demos to Windows deploys.

Verdict

Cool proof-of-concept for studying CSS as a DOOM engine renderer—fork the GitHub source code and tweak for your maps. With 45 stars and 1.0% credibility score, it's early/experimental (browser quirks, no tests), so great for learning, not prod deploys.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.