CSS 毀滅戰士：用 CSS 打造 DOOM 引擎

背景

這篇文章介紹了一項令人驚嘆的技術實驗：利用現代 CSS 的強大功能，在瀏覽器中重新實現經典遊戲《毀滅戰士》（DOOM）。作者將遊戲中的牆壁、地板與怪物全部以 HTML 的 div 元素呈現，並透過 CSS 3D 轉換進行渲染，雖然遊戲邏輯仍由 JavaScript 驅動，但視覺呈現完全交給了 CSS 引擎，旨在探索網頁標準的極限。

社群觀點

在 Hacker News 的討論中，社群對於這項實驗展現了兩極但有趣的看法。一部分參與者對 CSS 的演進感到驚嘆，認為這證明了 CSS 已從單純的網頁樣式工具轉變為功能強大的運算引擎。特別是近年來新增的數學函數如 hypot() 與 atan2()，以及即將推出的條件判斷式，讓 CSS 逐漸具備了類程式語言的特性。有留言提到，過去要實現 CSS 圖靈完備需要依賴使用者點擊核取方塊，但現在甚至有人能用純 CSS 模擬 x86 CPU，這讓社群開始思考，未來是否連《毀滅戰士》的遊戲邏輯都能完全脫離 JavaScript，達成純 CSS 運行的境界。

然而，另一派觀點則對 CSS 的過度擴張持保留態度。有評論者質疑，CSS 本質上是為了網頁排版而設計的三十年老舊架構，即便功能不斷堆疊，其靈活性是否真的代表它是該任務的最佳工具。他們將 CSS 比喻為「萬能膠帶」，雖然什麼都能修補，但並不代表它是最專業的選擇。這種爭論延伸到了網頁開發的現狀：開發者之所以選擇 CSS，往往是因為它是瀏覽器中唯一的工具，而非因為它在處理複雜 UI 或 3D 渲染時比專門的圖形框架更優秀。甚至有意見指出，在現代處理器效能比當年運行《毀滅戰士》的 486 電腦快上萬倍的背景下，這種效能上的「暴力破解」雖然有趣，但也反映出技術工具在定位上的模糊。

此外，社群也針對使用體驗提出了實務建議。有網友指出該網頁在捲動體驗上可以更進一步，建議引入 CSS 捲動捕捉功能來增強沉浸感。同時，不少行動裝置使用者驚訝地發現，儘管渲染邏輯複雜，但在手機瀏覽器上的運行卻異常流暢。這種「萬物皆可 DOOM」的駭客精神引發了廣泛共鳴，討論中不乏幽默的調侃，認為下一步或許就是挑戰在洗衣機螢幕或微波爐上運行這款遊戲，甚至開玩笑說未來人工智慧可能會嘗試在人類大腦中運行它。

延伸閱讀

在討論串中，網友分享了幾個相關的技術資源與實驗項目。Keith Clark 早期開發的 CSS FPS 實驗展示了 CSS 處理 3D 場景的先驅嘗試；而 lyra.horse 上的 x86css 項目則展示了如何不使用 JavaScript，僅靠 CSS 模擬 CPU 運作。對於想要自行編譯遊戲資源的開發者，有留言推薦使用 FreeDoom 專案搭配 Deutex 與 GNU make 等工具，以獲取無版權爭議的遊戲數據檔。最後，若想直接體驗此 CSS 版作品，可造訪 cssdoom.wtf 網站。