日本語
ネットには不文律がある。何かが存在すれば、誰かがその上でDOOMを動かそうとする。妊娠検査薬、トラクター、Flipper Zero（英語）、サーモスタット。長く、ばかばかしく、終わりなく伸びるリストだ。
だが今週、開発者のNiels Leenheerは、誰も予想しなかった場所へ冗談を運んだ。壁、床、樽、インプのひとつひとつがHTMLの<div>要素で、表示はすべてCSSという、遊べるDOOMの再実装を作った。canvasなし。WebGLなし。ただのカスケーディングスタイルシートが、本来やるはずのないことをしている。
ブラウザーで今すぐ遊べる。開発者がプレイ可能なデモを提供しているが、対応状況や性能はブラウザーによって異なる場合がある。
そもそもCSSで3Dシューティングをどう作るのか
短く答えるなら、恐ろしい量の数学と、多くのウェブ開発者が触れたことのない現代のCSS機能への深い知識で作る。
Leenheerは、1993年のシェアウェア版WADファイルから元のマップデータを抽出した。初代DOOMのエンジンが使ったものと同じデータだ。そして頂点、壁の区間、セクターをHTML要素へ変換した。各壁には、DOOMの座標をCSSカスタムプロパティとして与える。実際の幾何計算はCSSが行う。幅をhypot()、回転角をatan2()で求め、translate3d()とrotateY()で3D空間に配置する。
ゲームのロジックはJavaScriptで動く。しかし描画は、すべて純粋なCSSだ。JavaScriptがビューポートに渡すカスタムプロパティは、プレイヤーのX、Y、Z、角度の4つ。あとはCSSが引き受ける。ロジックと見た目のこの明快な分離は、プロジェクトの特に美しい部分だ。
カメラの代わりに世界を動かす
ここから少し哲学的に面白くなる。オタク的な意味で。CSSにはカメラがない。仮想レンズを3Dシーンに向け、動かすことはできない。そこでLeenheerは、初期の3Dグラフィックスの古典的な手を使った。世界の中をカメラが動く代わりに、プレイヤーの周囲で世界全体を動かすのだ。
前へ進む？ 世界が後ろへずれる。階段を上る？ 階段が下がる。すべての動きを反転する。考えると混乱するが、実際にはうまく機能する。
ゲーム開発の奇妙な歴史を掘り下げた（英語）ことがあるなら、こんな工夫が至るところにあると知っているだろう。元のDOOM自体もその宝庫だった。2026年にCSSを使って、同じ創造的な問題解決の精神を再現した人がいる。率直にいって、美しい。
床は、横倒しにしたdiv
DOM要素は初期状態では垂直だ。床は水平でなければならない。そこで各床にrotateX(90deg)を使い、適切な面へ回転させる。Leenheerは最初、符号を間違えたと認めている。床は存在したが、裏を向いていてプレイヤーには見えなかった。あるあるだ。
DOOMのセクターが取る不規則な形、L字の部屋、円に近い曲線、穴のある足場には、SVGパスとevenodd塗りつぶし規則によるclip-pathを使った。新しいCSSのshape()関数のおかげで、たった1年前よりもすっきり書けた。現代のCSSは強力になり続けており、こうした作品がそれを示している。
スプライトシートの工夫と、ゾンビの行進
DOOMの敵は、常にカメラを向く2Dスプライトだ。ビルボーディングと呼ばれる技法である。敵には見る角度ごとの画像があるが、元のゲームは8方向のうち固有の5組だけを保存し、残りは左右反転で作っていた。Leenheerは、スプライトシート、CSSのsteps()アニメーション、反対向き用のscaleX()で再現した。
予想外の問題もあった。敵が全員、完全に同期して行進していたのだ。すべてのゾンビ兵の左足が、まったく同じフレームで地面に着く。Leenheerの言葉では「ひどく不気味」だった。修正は、JavaScriptでランダムなanimation-delayを設定し、各敵の歩行周期をずらすこと。小さな違いが、「技術デモ」と「生きている感じのするもの」を分ける。
始まりはオシロスコープ
cssDOOMは何もないところから生まれたわけではない。Leenheerは以前、1980年代のオシロスコープで動くDOOMを作っていた。それによって、マップ抽出のコードと、必要な数学への確かな理解を得ていた。
本人が最も面白くないと考えたJavaScriptのゲームループには、Claudeの助けを借り、元のCコードを基に近似的なループを作った。初代DOOMのソースは長年公開されており、Leenheerは難しい部分に時間を使いたかった。CSSに、設計目的ではないことをさせる部分だ。cssDOOMの完全なソースはGitHubで公開されている。
ミーム以上の意味
「DOOMは動く？」は確かにミームだ。しかしcssDOOMのような作品は、単なる冗談ではない。ブラウザー技術のストレステストでもある。CSSを限界まで押し、現代のブラウザーが実際にどこまで扱えるかを見せる。各壁でhypot()、atan2()、CSSカスタムプロパティ、clip-path、@property宣言を使っている。ブラウザーの機能を、普段よりずっと野心的に組み合わせているわけだ。対応や性能はブラウザーと端末で変わり得る。
Keith Clarkは何年も前にCSSだけのFPSデモを作り、考え方が実現可能だと示した。Leenheerはさらに進み、敵、扉、リフト、スプライトアニメーションを備えた遊べる作品を描画した。実験的な再実装であり、元のエンジンを完全に忠実に再現したという主張ではない。2010年のCSSにできたことと、今できることの隔たりは驚くほど大きい。
スピードランナーがゲームを分解する様子（英語）を見たり、インディー開発者がゼロから世界を作る姿（英語）を追ったりしたことがあるなら、技術の最も面白い瞬間は、誰かが規則を無視して、ばかげたことを試すと決めた時に生まれると知っているだろう。
cssDOOMはばかげている。見事でもある。そしてcssdoom.wtfで今すぐ遊べる。
どうぞ。あなたのブラウザーなら耐えられる。たぶん。
2026-03-30公開の英語版の記事を日本語に翻訳しました。翻訳日：2026年10月30日。翻訳にはAIを使用し、記事内の時点は原文に合わせています。
