僅靠CSS、HTML復刻《DOOM》，程序員極限“整活”：把div元素當3D游戲引擎用

編譯 | 蘇宓

出品 | CSDN（ID：CSDNnews）

多年來，“HTML、CSS 到底算不算是編程語言”一直是前端圈一個頗具爭議的話題。

一邊是工程師堅持認為，它們只是標記與樣式描述工具，不具備傳統(tǒng)意義上的邏輯能力；另一邊則認為，在現(xiàn)代瀏覽器體系下，CSS 已經(jīng)具備足夠復雜的表達能力，甚至可以完成一些超出“樣式表”范疇的工作。

爭論還沒完全有結(jié)論，一個更“實戰(zhàn)化”的例子就出現(xiàn)了。

來自荷蘭的開發(fā)者 Niels Leenheer 近日做了一件看起來有點離譜的事：他沒有使用 WebGL，也沒有依賴任何游戲引擎，僅僅依靠最基礎(chǔ)的 HTML 和 CSS，就復刻出了一個“能玩的《DOOM》”。

在這個被稱為 cssDOOM 的項目里，墻壁、地板、木桶、甚至惡魔怪物，都不是傳統(tǒng)意義上的圖形資源，而是通過一個個在三維空間中不斷變形的

標簽構(gòu)建出來的。JavaScript 只負責游戲邏輯與主循環(huán)，而所有畫面的渲染工作，則完全交給 CSS 來完成。

項目地址：https://github.com/NielsLeenheer/cssDOOM

Niels Leenheer 是誰？

Niels Leenheer 是一位資深開發(fā)者，他最為人熟知的創(chuàng)建了是 HTML5 標準測試網(wǎng)站 HTML5test.com，以及瀏覽器用戶代理解析工具 WhichBrowser。同時，他也是 Fronteers 大會委員會的成員。

此前，他曾完成一項趣味實驗，成功在示波器上運行《Doom》，并借此編寫代碼，從原版游戲 WAD 資源文件中提取地圖數(shù)據(jù)。

本次 CSS 版《Doom》，正是在該實驗的基礎(chǔ)上迭代開發(fā)而來。

純靠 HTML、CSS，Doom 是怎么實現(xiàn)的？

Niels Leenheer 首先將提取的游戲地圖數(shù)據(jù)，編譯為由數(shù)千個`

`元素構(gòu)成的靜態(tài)場景。

">

每一個元素都標注了《Doom》原始坐標參數(shù)。

隨后，瀏覽器的布局與合成系統(tǒng)會接管渲染工作，通過 CSS 的 transform 以及諸如 hypot()、atan2() 等數(shù)學函數(shù)，把這些元素渲染成定位在三維空間中的對象。

}

與其讓 JavaScript 負責完整的三維幾何計算，這個實現(xiàn)選擇了一種更“偷懶”的方式：腳本只傳遞原始的坐標點，以及地板和天花板的高度等參數(shù)作為自定義屬性，其余諸如墻體寬度、旋轉(zhuǎn)角度等三角計算，全部交給 CSS 引擎來完成。

這種分工是有意為之的：游戲核心循環(huán)邏輯改編自《毀滅戰(zhàn)士》開源 C 語言代碼，由 JavaScript 負責運行，同時僅向 CSS 開放坐標數(shù)據(jù)、狀態(tài)參數(shù)與少量自定義屬性，構(gòu)成輕量化渲染層。

Niels Leenheer 也曾嘗試把游戲狀態(tài)和邏輯完全交給 CSS 來處理，但很快發(fā)現(xiàn)并不現(xiàn)實，于是放棄了這一思路，不過渲染路徑依然幾乎完全留在樣式層完成。

整個項目中一個關(guān)鍵難點，在于如何把《DOOM》的坐標體系和渲染技巧，適配到瀏覽器的 3D 處理方式上。比如地面，就是通過將

元素繞 X 軸旋轉(zhuǎn) 90 度來實現(xiàn)的，然后再借助 clip-path 的 polygon()，或更新的 shape() 語法，將其裁剪成任意形狀的扇區(qū)多邊形，從而支持復雜輪廓甚至奇偶填充規(guī)則。

在不同區(qū)域之間實現(xiàn)無縫紋理鋪設的關(guān)鍵，是將背景位置錨定在“世界坐標系”中。例如，如果一個元素在水平和垂直方向分別偏移了 200px 和 400px，那么它的 background-position 就會被設置為 -200px -400px，這樣紋理圖案就能像被連續(xù)鋪在一整塊平面上一樣對齊。

場景的移動方式也比較特殊：它并不是通過“攝像機”來移動視角（因為 CSS 本身并沒有真正的攝像機概念），而是通過移動整個“世界”來實現(xiàn)效果。JavaScript 會記錄玩家的位置和角度，并將其存儲在四個自定義屬性中，而 CSS 會對這些數(shù)值進行反向計算，使場景朝相反方向移動，同時通過額外的 translate 來補償透視效果，其余部分則交給瀏覽器的渲染系統(tǒng)完成。

敵人和投射物的精靈渲染則依賴“廣告牌（billboard）”技術(shù)：CSS 會讓每個 sprite 始終面向觀察者，在需要時通過 scaleX 進行鏡像翻轉(zhuǎn)，并使用 step() 動畫來推進精靈幀序列，而 JavaScript 只負責更新對應的狀態(tài)屬性。

場景光照、自動門、升降平臺、彈道特效，統(tǒng)統(tǒng)被轉(zhuǎn)化為可動態(tài)變更的樣式狀態(tài)問題。區(qū)域亮度以級聯(lián)自定義屬性存儲，搭配亮度濾鏡統(tǒng)一調(diào)暗昏暗區(qū)域，無需逐個修改場景元素；游戲大門通過自定義屬性綁定 CSS 過渡動畫，實現(xiàn)抬升開合，腳本僅需切換狀態(tài)標簽，動畫播放完全交由瀏覽器原生驅(qū)動。

彈藥彈道通過起點、終點坐標與飛行時長定義，CSS 依靠位移動畫完成彈道位移，搭配獨立旋轉(zhuǎn)屬性，讓投射物始終朝向玩家。

現(xiàn)代布局特性還被巧妙用來實現(xiàn)游戲自適應適配。原版固定寬度的狀態(tài)欄，被重構(gòu)為文檔對象模型獨立組件，彈藥數(shù)值、生命值、角色頭像、護甲值、鑰匙道具拆分展示，通過彈性布局自動排版，在窄屏設備上自動換行適配。

觀戰(zhàn)模式則新增一套 CSS 鏡頭邏輯。

跟隨視角利用角度正弦、余弦函數(shù)結(jié)合計算屬性，測算偏移數(shù)值，將鏡頭固定在玩家斜后方與斜上方；視角切換依靠獨立的位移、旋轉(zhuǎn)屬性，讓第一人稱與第三人稱跟隨視角之間實現(xiàn)絲滑過渡。

性能與畫面精度問題，也暴露了這套純 CSS 方案的固有短板。包含數(shù)千個三維變形元素的大型地圖，極易導致移動端蘋果瀏覽器出現(xiàn)畫面卡頓，甚至程序崩潰。

為此，Niels Leenheer 加入視域剔除機制，自動隱藏玩家視野外的幾何模型。

基礎(chǔ)版剔除邏輯由 JavaScript 編寫，遍歷場景元素，根據(jù)距離與角度切換隱藏屬性。

Niels Leenheer 還測試了純 CSS 剔除方案：通過樣式參數(shù)定義可見性判定，結(jié)合延時動畫與關(guān)鍵幀規(guī)則，利用樣式特性實現(xiàn)元素的自動顯示與隱藏。

局限性

《Doom》原生渲染的部分核心邏輯，很難直接復刻至 CSS 環(huán)境。

原版游戲會將天空紋理以純二維形式，繪制在地圖實體前方的虛擬墻體上；而CSS渲染必須構(gòu)建完整三維空間，天空圖層需要置于所有景物后方。

這一差異會導致原版被天空遮擋的模型暴露出來，Niels Leenheer 只能額外增加剔除規(guī)則，隱藏玩家視角中被天空墻體遮擋的物體。

Niels Leenheer 明確表示，該項目絕非 WebGL、WebGPU 專業(yè)圖形渲染方案的替代品，性能瓶頸也客觀存在，但這并非本次開發(fā)的核心目的。

他在分享中提到，這項開發(fā)旨在突破 CSS 的能力邊界。三角函數(shù)運算、自定義屬性動畫、裁剪路徑、SVG濾鏡、錨點定位等成熟商用級 CSS 特性，都被賦予了標準制定者從未設想過的全新用途。

最終成品完整可玩，直觀證明：只要合理運用大量`

`元素與現(xiàn)代 CSS 語法，無需調(diào)用任何圖形編程接口，就能在瀏覽器中完整復刻《毀滅戰(zhàn)士》的游戲世界。

長久以來，愛好者不斷挖掘各類低門檻、非常規(guī)設備運行《毀滅戰(zhàn)士》的可能性，CSS 只是最新的趣味載體。

也正如 Niels Leenheer 所言，如果說還有什么意義的話，那它至少回答了一個沒人真正問過的問題：CSS 能不能跑《DOOM》？

答案是：可以。確實可以。

來源：https://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/

https://www.techspot.com/news/111922-developer-rebuilds-doom-using-only-css-html-turning.html

【活動分享】"48 小時，與 50+ 位大廠技術(shù)決策者，共探 AI 落地真路徑。"由 CSDN&奇點智能研究院聯(lián)合舉辦的「全球機器學習技術(shù)大會」正式升級為「奇點智能技術(shù)大會」。2026 奇點智能技術(shù)大會將于 4 月 17-18 日在上海環(huán)球港凱悅酒店正式召開，大會聚焦大模型技術(shù)演進、智能體系統(tǒng)工程、OpenClaw 生態(tài)實踐及 AI 行業(yè)落地等十二大專題板塊，特邀來自BAT、京東、微軟、小紅書、美團等頭部企業(yè)的 50+ 位技術(shù)決策者分享實戰(zhàn)案例。旨在幫助技術(shù)管理者與一線 AI 落地人員規(guī)避選型風險、降低試錯成本、獲取可復用的工程方法論，真正實現(xiàn) AI 技術(shù)的規(guī)?；涞嘏c商業(yè)價值轉(zhuǎn)化。這不僅是一場技術(shù)的盛宴，更是決策者把握 2026 AI 拐點的戰(zhàn)略機會。