仅靠 CSS、HTML 复刻《DOOM》，程序员极限“整活”：把 div 元素当 3D 游戏引擎用

📌 一句话摘要

本文报道了开发者 Niels Leenheer 仅使用 HTML 和 CSS（JavaScript 仅负责逻辑）在浏览器中复刻经典游戏《DOOM》的极限技术实验，详细解析了其将数千个 div 元素通过 CSS 3D 变换、数学函数和自定义属性渲染成游戏世界的实现原理与挑战。

📝 详细摘要

文章详细介绍了资深开发者 Niels Leenheer 的 cssDOOM 项目，该项目仅依赖 HTML 和 CSS 在浏览器中完整复刻了经典第一人称射击游戏《DOOM》。项目核心在于将游戏地图数据编译为由数千个 ` 元素构成的静态场景，并完全利用 CSS 的 transform、calc()、hypot()、atan2() 等函数以及自定义属性进行三维空间定位和渲染，JavaScript 仅负责游戏主循环和状态管理。文章深入剖析了其技术实现，包括如何将《DOOM》坐标体系适配到 CSS 3D 环境、利用 clip-path 创建复杂地面、通过移动“世界”而非“摄像机”实现视角变换、使用“广告牌”技术渲染敌人精灵，以及为应对性能瓶颈而引入的视域剔除机制。作者强调该项目旨在探索 CSS 的能力边界，而非替代 WebGL，最终证明了仅凭现代 CSS 语法即可在浏览器中构建复杂的 3D 交互世界。

💡 主要观点

- 核心渲染完全由 CSS 驱动，JavaScript 仅负责逻辑。 项目将游戏场景分解为数千个带坐标参数的 元素，所有三维变换（平移、旋转、宽度/高度计算）均通过 CSS 的 transform、calc() 及 hypot()、atan2() 等数学函数完成，实现了渲染与逻辑的彻底分离。

巧妙利用 CSS 现代特性模拟 3D 游戏引擎功能。 通过将地面 旋转 90 度并用 clip-path` 裁剪成扇形多边形来构建复杂地形；通过反向移动整个“世界”而非移动“摄像机”来模拟视角变化；使用自定义属性和 CSS 过渡实现自动门、光照等动态效果。

项目揭示了纯 CSS 方案的技术极限与创造性解决方案。 面对大量 3D 元素导致的性能问题，项目引入了由 JavaScript 或纯 CSS 实现的视域剔除机制。同时，由于 CSS 缺乏真正的天空盒概念，需要额外规则处理原版《DOOM》的天空渲染逻辑，暴露了技术适配的挑战。

这是一次探索 Web 平台基础技术边界的“趣味实验”。 作者明确表示该项目目的并非替代 WebGL，而是旨在突破 CSS 的传统认知，展示其通过三角函数、自定义属性动画等成熟特性所能达到的、超出标准制定者预期的复杂表达能力。

💬 文章金句

- 与其让 JavaScript 负责完整的三维几何计算，这个实现选择了一种更‘偷懒’的方式：脚本只传递原始的坐标点，以及地板和天花板的高度等参数作为自定义属性，其余诸如墙体宽度、旋转角度等三角计算，全部交给 CSS 引擎来完成。

• 场景的移动方式也比较特殊：它并不是通过‘摄像机’来移动视角（因为 CSS 本身并没有真正的摄像机概念），而是通过移动整个‘世界’来实现效果。
• Niels Leenheer 明确表示，该项目绝非 WebGL、WebGPU 专业图形渲染方案的替代品，性能瓶颈也客观存在，但这并非本次开发的核心目的。
• 他在分享中提到，这项开发旨在突破 CSS 的能力边界。三角函数运算、自定义属性动画、裁剪路径、SVG 滤镜、锚点定位等成熟商用级 CSS 特性，都被赋予了标准制定者从未设想过的全新用途。
• 如果说还有什么意义的话，那它至少回答了一个没人真正问过的问题：CSS 能不能跑《DOOM》？答案是：可以。确实可以。

📊 文章信息

AI 初评：87

来源：CSDN

作者：CSDN

分类：软件编程

语言：中文

阅读时间：13 分钟

字数：3077

标签： 前端开发, CSS, HTML, 3D 渲染, 游戏开发

阅读完整文章