CSS 也能跑 DOOM：开发者利用 3D 转换实现纯 CSS 渲染挑战浏览器极限

核心要点

• 纯 CSS 渲染：游戏中的每一个墙面、地板、油桶和怪物（Imp）都是一个 <div> 标签，通过 CSS transforms 在 3D 空间中定位。
• 技术分工：渲染部分完全由 CSS 负责，游戏逻辑和状态循环则由 JavaScript 处理（部分代码由 Claude 辅助从原始 C 语言源码移植）。
• 性能实验：该项目旨在探索现代浏览器的极限，证明 CSS 在过去 30 年间取得的巨大进步。
• 开发背景：作者此前曾实现在 1980 年代的示波器上运行 DOOM，本次项目复用了部分地图提取和数学计算的逻辑。

详细分析

从示波器到现代浏览器的跨越

作者 Niels Leenheer 提到，这个项目的灵感源于他之前在 1980 年代示波器上运行 DOOM 的经历。由于之前已经解决了从原始游戏中提取地图数据以及相关的数学计算问题，这为 CSS 版 DOOM 奠定了基础。最初，作者曾尝试完全使用 CSS 来处理游戏状态和逻辑，但最终发现这在实际操作中并不具备可行性。因此，他决定将项目拆分：将最核心的挑战——渲染——交给 CSS，而将逻辑部分交给 JavaScript。

现代 CSS 的 3D 潜力

在本项目中，CSS 不再仅仅是样式表，而是成为了一个 3D 引擎。通过将每一个游戏元素映射为 HTML 元素，并利用 CSS 的 3D 转换属性，作者成功在浏览器窗口中构建了一个可交互的 3D 环境。作者强调，能够实现这样的效果，本身就是 CSS 发展 30 年来功能增强的有力证明。为了提高效率，作者利用 Claude AI 将原始 DOOM 的 C 语言源码（已公开多年）转换为 JavaScript 游戏循环，从而让他能集中精力攻克 CSS 渲染中的难题。

行业影响

该项目展示了 Web 标准技术的极端可能性。虽然在实际生产环境中，开发者通常会选择 WebGL 或 WebGPU 来进行 3D 渲染，但这种“纯 CSS 渲染”的尝试打破了人们对 CSS 仅能处理 2D 布局的固有认知。它不仅是一次技术上的“炫技”，也为浏览器引擎在处理大量 3D 转换元素时的性能表现提供了极佳的测试案例，进一步推动了开发者对 Web 平台原生能力的探索。

常见问题

问题：这个游戏是完全用 CSS 写的吗？

渲染部分完全由 CSS 负责（墙壁、地板等均为 div 元素），但游戏的逻辑、状态管理和主循环是由 JavaScript 运行的。作者曾尝试用 CSS 处理逻辑，但发现过于复杂且不可行。

问题：为什么要用 CSS 来渲染 DOOM？

作者的主要目的是测试现代浏览器的极限，并展示现代 CSS 的强大功能。此外，将经典游戏 DOOM 移植到各种意想不到的平台上也是技术社区的一种传统。

问题：项目的源代码在哪里可以找到？

作者已经将该项目的代码发布在 GitHub 上，供其他开发者研究和学习如何利用 CSS transforms 进行 3D 定位。