編譯 | 蘇宓

出品 | CSDN（ID：CSDNnews）

多年來(lái)，“HTML、CSS 到底算不算是編程語(yǔ)言”一直是前端圈一個(gè)頗具爭(zhēng)議的話題。

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

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

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

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

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

項(xiàng)目地址：https://github.com/NielsLeenheer/cssDOOM

Niels Leenheer 是誰(shuí)？

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

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

本次 CSS 版《Doom》，正是在該實(shí)驗(yàn)的基礎(chǔ)上迭代開發(fā)而來(lái)。

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

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

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

">

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

為此，Niels Leenheer 加入視域剔除機(jī)制，自動(dòng)隱藏玩家視野外的幾何模型。

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

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

局限性

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

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

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

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

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

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

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

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

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

答案是：可以。確實(shí)可以。

來(lái)源：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

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