开发者用CSS复刻DOOM：3000个div撑起30年前神作

浏览器能跑3D游戏不稀奇，但渲染管线全靠CSS算——这事连Chrome团队都没想过。

前端工程师Niels Lohmann干了件"吃饱了撑的"壮举：用纯CSS重制1993年的《DOOM》。不是WebGL，不是Canvas，是3000多个`

`标签拼成的地狱。游戏逻辑交给JavaScript，但每一面墙、每个油桶、每只恶魔的位置，全由CSS变换（CSS transforms）实时计算。

为什么非要这么干？

「我想看看浏览器的极限在哪。」Lohmann的原话很直接。他之前还做过更离谱的事——把DOOM移植到1980年代的示波器上。那次经验帮他解决了地图提取和数学运算的坑，这次他把战场搬到了浏览器样式表。

第一版原型他试过"全CSS方案"：游戏状态、逻辑、计算全塞进样式表。结果渲染没问题，逻辑直接崩盘。「CSS算不了这个，太复杂了。」他干脆拆分项目：用Claude把原版DOOM的C代码转成JavaScript跑游戏循环，自己死磕CSS渲染。

CSS怎么算3D坐标

核心 trick 是CSS自定义属性（CSS custom properties）。每个墙面元素长这样：

WAD文件里的原始数据——顶点、线段、扇区——被原封不动写进HTML属性。浏览器用勾股定理算墙面宽度，用三角函数算角度，用透视变换（perspective transforms）把2D坐标掰成3D空间。Lohmann没直接设置元素的宽高和3D变换，全让CSS从原始坐标推导。

这套方案省了什么？GPU着色器、WebGL上下文、Canvas 2D API。代价是Chrome DevTools的性能面板会很好看——3000个div的重排开销，够普通网页死三回。

现代CSS的隐藏技能

项目能跑起来，靠的是CSS这30年的进化：自定义属性、计算函数（calc()）、3D变换、视口单位。1993年DOOM发售时，CSS还没出生；现在它能渲染DOOM，本身就够讽刺。

但Lohmann也撞了墙。CSS没有游戏循环的概念，没有状态管理，复杂逻辑必须外包给JS。他的结论很产品经理：技术边界要试，但别跟不可能较劲。

代码已开源。Lohmann在GitHub留了一句话：「DOOM不仅让我回到高中时代，还让我重新捡起了高中数学。」

现在打开他的Demo，你会看到1993年的像素地狱在2024年的浏览器里流畅运行——靠的居然是一堆div和样式规则。下一个问题留给读者：如果CSS能跑DOOM，它还能被什么"不可能"的任务重新定义？