Egy holland fejlesztő, Niels Leenheer elkészítette a Doom egy teljesen játszható változatát úgy, hogy a játék grafikáját kizárólag HTML-elemekkel és CSS-sel rajzolta ki. Nincs hagyományos grafikus motor, a pályák falai, padlói, szörnyei és tárgyai mind egyszerű div elemekből állnak.
A JavaScript csak a játékmenetet kezeli, vagyis a mozgást, az ellenfelek viselkedését és a játéklogikát, maga a megjelenítés szinte teljes egészében CSS-en múlik.
Leenheer egy igazi zseni, aki korábban már készített egy különleges Doom-verziót, amely oszcilloszkópon futott, és ebben is annak a projektnek a kódját használta fel újra. A Doom eredeti WAD fájljából kinyerte a pályaadatokat, majd minden falat, padlót és objektumot külön divként helyezett el a böngészőben.
A padlók és mennyezetek is egyszerű div elemek, amelyeket 90 fokkal elforgatott, majd ezeket pontosan a Doom pályáinak alakjára vágta, az egyes szektorok textúrái is úgy illeszkednek egymáshoz, mintha egyetlen nagy felületre lennének festve.
Mivel a CSS-ben nincs valódi kamera, azt találta ki, hogy itt nem a játékos mozog a világban, hanem az egész világ mozog a játékos körül. A JavaScript néhány egyedi CSS-változóban tárolja a játékos pozícióját és irányát, a CSS pedig ezek alapján eltolja és elforgatja a teljes pályát.
Az ellenfelek és a lövedékek is CSS segítségével jelennek meg. Az impek és más szörnyek mindig a játékos felé fordulnak, ahogy az eredeti Doomban is. A sprite-ok különböző képkockáit CSS-animációk váltogatják, míg a lövedékek egyszerűen egyik pontból a másikba repülnek egy translate animáció segítségével.
A világítás is meglepően elegáns módon működik. A Doom egyes pályarészei sötétebbek vagy világosabbak, ezt pedig a fejlesztő úgy oldotta meg, hogy minden területhez egy külön fényerőértéket adott, amit a CSS filter: brightness() használ. Így ha egy szoba sötét, minden benne lévő objektum automatikusan halványabb lesz.
A projektnek vannak korlátai. A böngészők nem igazán arra készültek, hogy több ezer 3D-ben forgatott div elemet jelenítsenek meg egyszerre, ezért a nagyobb pályák már megakaszthatják a teljesítményt, különösen mobilon. Emiatt a fejlesztőnek külön optimalizációt kellett írnia, amely elrejti azokat az objektumokat, amelyeket a játékos éppen nem lát.
Leenheer szerint a projekt célja nem az volt, hogy a CSS leváltsa a modern grafikus technológiákat, hanem az, hogy megmutassa, mire képes a mai webes technológia.
"Ez arról szól, hogy feszegetjük a CSS határait"
