零JS！他用4.6万行HTML+CSS手搓了个《我的世界》，程序员哭诉：网友把服务器玩爆了

摘要：几年前做前端，HTML、CSS 和 JavaScript 被誉为「前端三剑客」，是很多入坑的开发者逃不开避不掉的技术。其中，HTML 负责搭建架子、CSS 负责视觉美化、JavaScript 则主攻网页交互，三者缺一不可。

整理 | 苏宓

出品 | CSDN（ID：CSDNnews）

几年前做前端，HTML、CSS 和 JavaScript 被誉为「前端三剑客」，是很多入坑的开发者逃不开避不掉的技术。其中，HTML 负责搭建架子、CSS 负责视觉美化、JavaScript 则主攻网页交互，三者缺一不可。

不过最近，一位名叫 Benjamin Aster 的开发者却玩了波「反套路」—— 他竟然用纯 HTML 和 CSS 搞出了一个《我的世界》（Minecraft）克隆版！

没听错，整个项目里一行 JavaScript 都没有。所有的交互逻辑、动画效果，全靠这两位“老将”撑场，但是效果属实不错。

正如下图所示，这款游戏中，3D 方块可以自由添加和删除，视角还能旋转浏览，完全不像是没用 JS 的成果，堪称魔法。

话不多说，想要体验的小伙伴不妨试玩一把：https://benjaminaster.com/css-minecraft/

目前，这个项目也已经在 GitHub 上开源：https://github.com/BenjaminAster/CSS-Minecraft

480 行 CSS + 46022 行 HTML，堆出了一个 3D 世界！

那 Benjamin Aster 是怎么做到的呢？

这个问题其实也引起了不少开发者的兴趣。英国程序员、Django 框架的作者 Simon Willison 就在看到这个项目后，专门写了一篇博客，深入解析了这个 0 行 JavaScript、全靠 HTML 和 CSS 撑起来的《我的世界》克隆版背后的技术原理。

简单来看，这是一个 9x9x9 的世界，可以在其中放置或移除 7 种不同类型的方块，也可以以 3D 视角旋转这个世界，从不同角度进行观察。

让人意外的是，整个项目仅用 480 行 CSS实现：

还有 46,022 行 HTML 代码，只有 3.07MB！

核心技术原理

光看这代码量就像用牙签拼城堡，这个项目之所以能运作起来，Simon Willison 解释称，关键技巧是将标签与 has 选择器组合使用才得以实现。

对此，整个页面中有 35001 个标签和5840 个单选按钮组成了状态存储引擎。

每个方块的六个面都相当于一个标签，点击任意一面，就像触发了一个隐藏的开关，通过的for 属性精准「链接」到相邻方块的状态。

当你想给方块换材质时，其实是在切换可见的标签组。CSS 里的 has 选择器就像个「大管家」，比如当你选中「石头」材质的单选按钮时，它会立刻让其他材质的方块「隐身」（display: none），只留下石头方块在界面上显示。具体实现代码如下：

.controls:has( > .block-chooser > .stone > input[type=radio]:checked) ~ main .cubes-container > .cube:not(.stone) { display: none;}

值得一提的是，因为这个项目要生成上万行 HTML 标签，比如几万个和，用纯手写 HTML 会非常麻烦和冗长。所以在项目里面，作者 Benjamin Aster 使用一种叫做 Pug 语言编写的 HTML 模板文件，可以通过嵌套结构和循环轻松地批量生成这些标签，再通过构建工具（比如 pug-cli）编译成普通 HTML 文件。

下面是这个 Pug 模板的简化版本（完整代码详见：https://github.com/BenjaminAster/CSS-Minecraft/blob/main/index.pug），可以帮助大家理解 HTML 的结构：

//- pug index.pug -w- const blocks = ["air", "stone", "grass", "dirt", "log", "wood", "leaves", "glass"];- const layers = 9;- const rows = 9;- const columns = 9; for _, layer in Array(layers) for _, row in Array(rows) for _, column in Array(columns) - const selectedBlock = layer === layers - 1 ? "grass" : "air"; - const name = `cube-layer-${layer}-row-${row}-column-${column}`; - const id = `${name}-${blocks[0]}`; each block, index in blocks.slice(1) - const id = `${name}-${block}`; - const checked = index === 0; //- /each //- /for //- /for //- /for

因此，对于每一个 9x9x9 = 729 个立方体，都会生成一组共享相同 name 的 8 个 radio 按钮，例如 cube-layer-0-row-0-column-3 ——意味着这个方块可以有 8 种状态（其中 “air” 表示空气，也就是空白，其余则代表不同的材质类型）。每个方块有 6 个 label，分别对应它的六个面，这些 label 的 for="" 属性会指向相邻位置、当前所选材质类型的下一个方块。

另一个非常巧妙的设计是这个项目用来实现 3D 视图控制与旋转的方法。

没有 JavaScript 的动画控制，Benjamin 就靠 CSS 动画来了波「视觉旋转」。首先，他先定义了一些规则：

.controls:has(.up:active) ~ main .down { animation-play-state: running;}.controls:has(.down:active) ~ main .up {}.controls:has(.clockwise:active) ~ main .clockwise {}.controls:has(.counterclockwise:active) ~ main .counterclockwise {}

这些规则意味着，当你按住对应的按钮（例如 .clockwise），与之关联的动画会从暂停状态变为运行状态。

接着，Benjamin 又为每种操作都定义了对应的动画：

.content .clockwise { animation: var(--animation-duration) linear 1ms paused rotate-clockwise;}@keyframes rotate-clockwise { from { rotate: y 0turn; } to { rotate: y calc(-1 * var(--max-rotation)); }}.content .counterclockwise { animation: var(--animation-duration) linear 1ms paused rotate-counterclockwise;}@keyframes rotate-counterclockwise { from { rotate: y 0turn; } to { rotate: y calc(var(--max-rotation)); }}

当你按住某个按钮时，动画从 paused 切换为 running，一旦松开按钮就会暂停。动画执行期间，会改变目标元素上的各种 3D 变换属性，实现空间旋转。

整个设计巧妙得令人惊叹，一旦你理解了它的核心技巧，会发现它的实现其实相当优雅而且可读性强。

最后

随着 Simon Willison 将这一项目分享出来，也在 Hacker News 引发热烈讨论，网友们纷纷感叹这简直是「CSS 黑魔法」：

我完全没想到 :has 还能这么用，直接看傻了。

这种项目虽然没啥生产用途，但绝对让我重新爱上写网页。

这是对 CSS 的精彩‘滥用’，我太喜欢了。

没多久，项目作者 benjaminaster 也现身 Hacker News 评论区，惊呼：“你们的访问量实在太猛了，把我的网站挤爆了……我之前用的是 Firebase 的静态托管服务，因为它完全免费而且配置非常简单，但现在已经达到了每月 10 GB 的流量上限。我目前已经切换到 Cloudflare，不过 DNS 记录的更新还需要一点时间。”

在此期间，可使用 GitHub Pages 链接访问项目：https://benjaminaster.github.io/CSS-Minecraft/

Benjamin 还补充说，这个项目其实是他三年前的实验作品，最初只是想探索纯 CSS 的极限表现力，并测试当时刚被浏览器支持的 :has 选择器。没想到多年之后，因为一次分享突然爆红网络。

为了获得最佳体验，他建议使用桌面端浏览器访问，推荐基于 Chromium 的浏览器或 Firefox。

项目源码地址：https://github.com/BenjaminAster/CSS-Minecraft

其中 index.pug 和 main.scss 是主要源码，其余为编译后的输出内容。

演示视频： https://www.youtube.com/watch?v=OH8-Y9frP5k

整体来看，只用了 480 行 CSS 和 4 万多行 HTML，就拼出了一个能放方块、盖房子、旋转视角的 3D 世界。它或许不是最实用的作品，但它证明了：挖掘 HTML 和 CSS 的潜力，不一定非得依赖复杂的技术，有时候，只要足够巧思，也能实现出乎意料的精彩。