CSS 版 DOOM 诞生：开发者用纯 CSS 3D 变换重制经典游戏

成就

一位开发者使用纯 CSS 3D 变换构建了经典游戏 DOOM 的可玩版本。每一面墙、地板、桶和怪物都是一个 <div>，使用 CSS 在 3D 空间中定位。可在 cssdoom.wtf 体验。

工作原理

项目使用与原版 DOOM 引擎相同的数据——顶点、线段、侧面和扇区——从 1993 年原版 WAD 文件中提取。场景由数千个 <div> 元素构建。

CSS 数学魔法

.wall {
  --delta-x: calc(var(--end-x) - var(--start-x));
  width: calc(hypot(var(--delta-x), var(--delta-y)) * 1px);
  transform: translate3d(...) rotateY(atan2(...));
}

宽度来自 hypot()（勾股定理），旋转来自 atan2()（反正切）。所有几何计算都在浏览器的 CSS 引擎中运行。

为什么重要

这个项目展示了 CSS 在 30 年间的巨大进步：CSS hypot() 和 atan2() 支持真正的几何计算，CSS 3D 变换能处理复杂场景渲染，自定义属性让数据驱动的 CSS 变得实用。

演示已上线，源代码已开源。在 Hacker News 获得 366 分。