CSSで『Doom』が動く。「最新のCSSがいかに強力か」を確かめたかったと開発者

Munenori Taniguchi

2026/03/30 17:30

Share

• 
• 

英国のコンピューター科学者ティム・バーナーズ＝リーが世界初のウェブブラウザー「WorldWideWeb」を発表して以来のウェブ技術信奉者だという、開発者のNiels Leenheer氏が、本来ならウェブページの表示を修飾するために用いられるカスケード・スタイルシートすなわちCSSで、古典FPSゲーム『Doom』を動かす『cssDOOM』を構築、公開した。

もちろんCSSだけでゲームを構築することはできないため、ゲームの根幹部分にはJavaScriptを使っているものの「すべての壁、床、ドラム缶、敵キャラ（imp）は、すべて（HTML）の<div>タグ」内に記述され、CSSのtransformプロパティで回転、拡大縮小、傾斜、移動といった効果を与え、三角関数を用いて3D空間に描画しているとのこと。

Leenheer氏は、cssDOOMを作ろうと考えた最初こそCSSで可能な限りすべてを再現しようとしたものの、すぐにゲームロジックは複雑すぎると気づき、ゲームの描画に関する部分をCSSで完成させた後に、AnthropicのClaude AIを使用して、公開されているDOOMのオリジナルソースコードからJavaScriptで動作するゲームループの近似バージョンを作成した。

具体的にどのようにしてCSSでDoomの世界を構築したかは、Leenheer氏が詳しくウェブページに記しているので、興味がある人はそちらを参照すると良いだろう。

また、実際にできあがったものを試したい場合は、URL https://cssdoom.wtf/ にアクセスすれば、すぐにDoomの世界が画面上に現れる。レスポンシブデザインになっているので、スマートフォンのブラウザーでも動作する。右上のアイコンで全画面表示に切り替えれば、WASDキーおよびマウス操作でゲームをプレイできる。ウィンドウ表示の場合は左右への視点移動はキーボードのカーソル（矢印）キーになる。

もちろんSafariやFirefox、Cromeなど、ブラウザーごとの処理の仕方の違いによるバグなどもあるにはあるが、cssDOOMは全体としてマップからアニメーションまですべてCSSで描画されているとは思えない出来栄えだ。

Leenheer氏は解説記事の最後に「CSSでDOOMは動くのか？」という問いに「Yes. それは可能だ」と力強く答えている。