CSS Doom: vykreslování hry bez Canvas

Doom v čistém CSS: realizace renderování bez Canvasu a WebGL

Vývojář Nils Lenheer vydal projekt cssDoom – kompletní implementaci klasické hry Doom, kde je veškerá grafika vykreslována pouze CSS. Herní logika je realizována v JavaScriptu, bez použití canvasu nebo WebGL. Jako základ slouží zdrojový kód Doom od id Software, dostupný v souborech WAD. Projekt je umístěn na GitHubu pod licencí GPLv2.

Všechny vizuální prvky – sprity, texturované stěny, úrovně, efekty – se vytvářejí z div prvků. Tyto prvky se pozicují v 3D prostoru pomocí CSS vlastností transform a transform-style: preserve-3d. JavaScript se přímo nezasahuje do stylů: místo toho se nastavují uživatelské CSS vlastnosti na základě geometrie vrcholů ze souboru WAD. CSS sám počítá šířku, výšku a transformace s využitím trigonometrických funkcí.

Adaptace souřadnic a herní smyčka

Systém souřadnic Doom se liší od CSS 3D: Doom používá sestupný 2D systém (Y roste na sever), v CSS směřuje Y nahoru, Z k divákovi. Transformace se realizuje přes translate3d(x, -z, -y). Uživatelské vlastnosti se definují v souřadnicích Doom a CSS je interpretuje.

Herní smyčka v JavaScriptu sleduje pozici hráče, vstup, kolize a AI nepřátel. Jedná se o přímý port originálního kódu. Rozdělení je jasné: JS aktualizuje pouze klíčové vlastnosti jako --player-x, --player-y, --player-z, --player-angle. CSS posouvá celý svět vzhledem k hráči a simuluje kameru (v CSS kamera není). Pohyb a pohled – to je aktualizace čtyř vlastností.

Podporován je pohled z první osoby s možností přepnutí na mapový pohled.

Technické detaily stavby scény

Proces začíná parsováním souboru WAD: extrahují se lineární, boční a sektorové parametry. Na jejich základě se generují div prvky s původní geometrií vrcholů. CSS aplikuje calc() pro výpočty:

• Šířka a výška prvků se určují úhly pohledu a vzdáleností.
• Transformace zohledňují perspektivu.

Příklad zjednodušené struktury uživatelských vlastností:

:root {
  --player-x: 0;
  --player-y: 0;
  --player-angle: 0;
}

.scene-element {
  width: calc(var(--doom-width) * var(--perspective-factor));
  height: calc(var(--doom-height) * var(--perspective-factor));
  transform: translate3d(
    calc(var(--doom-x)),
    calc(-var(--doom-z)),
    calc(-var(--doom-y))
  ) rotateY(var(--player-angle));
}

Tento přístup zajišťuje výkon: CSS renderer prohlížeče optimalizuje 3D transformace na GPU.

Srovnání s jinými experimenty

cssDoom navazuje na řadu netradičních portů Doom. Dříve Adam Rice vyvinul Doom Over DNS: hra se spouští přes DNS TXT záznamy Cloudflare. Soubor WAD se komprimuje do ~1964 záznamů, dekomprimuje se PowerShell skriptem za běhu. DLL .NET se načítají do paměti bez zápisu na disk. To demonstruje limity protokolů, ale zaostává za cssDoom v vizuální složitosti.

| Aspekt | cssDoom | Doom Over DNS |

|--------|---------|---------------|

| Renderování | CSS 3D div | Standardní (prohlížeč) |

| Logika | JS (port Doom) | PowerShell + .NET |

| Závislosti | Pouze CSS/JS | DNS dotazy |

| Dostupnost | GitHub | Veřejná zóna Cloudflare |

Co je důležité

• Kompletní renderování Doom v CSS: div v 3D prostoru simulují raycasting.
• Uživatelské vlastnosti + calc() pro dynamické transformace z dat WAD.
• Přísné oddělení JS (logika) a CSS (vizualita) pro optimalizaci.
• Adaptace souřadnic Doom pro CSS 3D prostřednictvím inverze os.
• Otevřený kód na GitHubu, licence GPLv2.

Projekt je užitečný pro studium limitů CSS3 v herním vývoji, zejména animací transform a custom properties v real-time scénářích.

— Editorial Team