CSSだけでDOOMが動いた。数千個の<div>、三角関数、そして純粋な狂気

「なんでそんなことを？」という問いに対する最善の答えは「CSSでDOOMが作れるから」だ。

オランダの開発者Niels Leenheerが、1993年の伝説的FPSゲーム「DOOM」を**CSSだけで3Dレンダリング**することに成功した。壁も床も樽もインプ（敵キャラ）も、すべて`<div>`要素。位置と角度の計算はCSS。ゲームロジックだけJavaScriptが担う。

Hacker Newsに投稿されると「これは本物だ」「正気じゃない」という反応が相次ぎ、スコアは200超えを記録。cssdoom.wtfで今すぐ遊べる。

どうやってやったのか

Leenheerは元のDOOM WADファイルから頂点・壁・セクターデータを抽出。それぞれの壁を`<div>`要素に変換し、CSSのカスタムプロパティで座標を渡す。そして**CSSの`hypot()`と`atan2()`関数**を使って幅と角度を計算、`translate3d`と`rotateY`で3D空間に配置する。

.wall {
  width: calc(hypot(var(--delta-x), var(--delta-y)) * 1px);
  transform:
    translate3d(calc(var(--start-x) * 1px), ...)
    rotateY(atan2(var(--delta-y), var(--delta-x)));
}

「JavaScriptがゲームループを回し、CSSがレンダリングをやる。これが私にとってちょうどいいバランスだった」とLeenheerは書いている。

以前に同じDOOMを**1980年代のオシロスコープで動かした**こともあるというから、この人の「なぜ」への答えは永遠に「できるから」なのだろう。

CSSはこんなに成熟した

プロジェクトの要点は「CSSがここまで来た」という証明だ。`hypot()`、`atan2()`、CSS 3D transforms——これらは30年前には存在しなかった機能だ。ゲームを動かすのに必要な三角関数が、今やブラウザのスタイルシートエンジンに組み込まれている。

コードはGitHubで公開済み。「ポートフォリオに書けること」の限界を、また一人の開発者が押し広げた。