零JS！他用4.6万行HTML+CSS手搓了个《我的世界》，程序员哭诉：网友把服务器玩爆了
仅用于站内搜索，没有排版格式，具体信息请跳转上方微信公众号内链接
整理|苏宓
出品|CSDN（ID：CSDNnews）
几年前做前端，HTML、CSS和JavaScript被誉为「前端三剑客」，是很多入坑的开发者逃不开避不掉的技术。其中，HTML负责搭建架子、CSS负责视觉美化、JavaScript则主攻网页交互，三者缺一不可。
不过最近，一位名叫BenjaminAster的开发者却玩了波「反套路」——他竟然用纯HTML和CSS搞出了一个《我的世界》（Minecraft）克隆版！
没听错，整个项目里一行JavaScript都没有。所有的交互逻辑、动画效果，全靠这两位“老将”撑场，但是效果属实不错。
正如下图所示，这款游戏中，3D方块可以自由添加和删除，视角还能旋转浏览，完全不像是没用JS的成果，堪称魔法。
话不多说，想要体验的小伙伴不妨试玩一把：https ://benjaminaster. com/css-minecraft/
目前，这个项目也已经在GitHub上开源：https ://github. com/BenjaminAster/CSS-Minecraft
480行CSS+46022行HTML，堆出了一个3D世界！
那BenjaminAster是怎么做到的呢？
这个问题其实也引起了不少开发者的兴趣。英国程序员、Django框架的作者SimonWillison就在看到这个项目后，专门写了一篇博客，深入解析了这个0行JavaScript、全靠HTML和CSS撑起来的《我的世界》克隆版背后的技术原理。
简单来看，这是一个9x9x9的世界，可以在其中放置或移除7种不同类型的方块，也可以以3D视角旋转这个世界，从不同角度进行观察。
让人意外的是，整个项目仅用480行CSS实现：
还有46,022行HTML代码，只有3. 07MB！
核心技术原理
光看这代码量就像用牙签拼城堡，这个项目之所以能运作起来，SimonWillison解释称，关键技巧是将标签与has()选择器组合使用才得以实现。
对此，整个页面中有35001个标签和5840个单选按钮组成了状态存储引擎。
每个方块的六个面都相当于一个标签，点击任意一面，就像触发了一个隐藏的开关，通过的for属性精准「链接」到相邻方块的状态。
当你想给方块换材质时，其实是在切换可见的标签组。CSS里的has()选择器就像个「大管家」，比如当你选中「石头」材质的单选按钮时，它会立刻让其他材质的方块「隐身」（display:none），只留下石头方块在界面上显示。具体实现代码如下：
值得一提的是，因为这个项目要生成上万行HTML标签，比如几万个和，用纯手写HTML会非常麻烦和冗长。所以在项目里面，作者BenjaminAster使用一种叫做Pug语言编写的HTML模板文件，可以通过嵌套结构和循环轻松地批量生成这些标签，再通过构建工具（比如pug-cli）编译成普通HTML文件。
因此，对于每一个9x9x9=729个立方体，都会生成一组共享相同name的8个radio按钮，例如cube-layer-0-row-0-column-3——意味着这个方块可以有8种状态（其中“air”表示空气，也就是空白，其余则代表不同的材质类型）。每个方块有6个label，分别对应它的六个面，这些label的for=\“\“属性会指向相邻位置、当前所选材质类型的下一个方块。
另一个非常巧妙的设计是这个项目用来实现3D视图控制与旋转的方法。
没有JavaScript的动画控制，Benjamin就靠CSS动画来了波「视觉旋转」。首先，他先定义了一些规则：
这些规则意味着，当你按住对应的按钮（例如. clockwise），与之关联的动画会从暂停状态变为运行状态。
接着，Benjamin又为每种操作都定义了对应的动画：
当你按住某个按钮时，动画从paused切换为running，一旦松开按钮就会暂停。动画执行期间，会改变目标元素上的各种3D变换属性，实现空间旋转。
整个设计巧妙得令人惊叹，一旦你理解了它的核心技巧，会发现它的实现其实相当优雅而且可读性强。
最后
随着SimonWillison将这一项目分享出来，也在HackerNews引发热烈讨论，网友们纷纷感叹这简直是「CSS黑魔法」：
我完全没想到:has()还能这么用，直接看傻了。
这种项目虽然没啥生产用途，但绝对让我重新爱上写网页。
这是对CSS的精彩‘滥用’，我太喜欢了。
没多久，项目作者benjaminaster也现身HackerNews评论区，惊呼：“你们的访问量实在太猛了，把我的网站挤爆了……我之前用的是Firebase的静态托管服务，因为它完全免费而且配置非常简单，但现在已经达到了每月10GB的流量上限。我目前已经切换到Cloudflare，不过DNS记录的更新还需要一点时间。”
在此期间，可使用GitHubPages链接访问项目：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的潜力，不一定非得依赖复杂的技术，有时候，只要足够巧思，也能实现出乎意料的精彩。
参考来源：
https ://simonwillison. net/2025/May/26/css-minecraft/
https ://news. ycombinator.com/item?id=44100148
好啦，今天的内容分享就到这，感觉不错的同学记得分享点赞哦！
PS：程序员好物馆持续分享程序员学习、面试相关干货，不见不散！
点分享
点收藏
点点赞
点在看
