Minecraft Clone Manages With Nothing But HTML + CSS
Can a 3D Minecraft implementation be done entirely in CSS and HTML, without a single line of JavaScript in sight? The answer is yes! True, this small clone is limited …read more


Can a 3D Minecraft implementation be done entirely in CSS and HTML, without a single line of JavaScript in sight? The answer is yes!
True, this small clone is limited to playing with blocks in a world that measures only 9x9x9, but the fact that [Benjamin Aster] managed it at all using only CSS and pure HTML is a fantastic achievement. As far as proofs of concept go, it’s a pretty clever one.
The project consists of roughly 40,000 lines of HTML radio buttons and labels, combined with fewer than 500 lines of CSS where the real work is done. In a short thread on X [Benjamin] explains that each block in the 9x9x9 world is defined with the help of tens of thousands of and
elements to track block types and faces, and CSS uses that as a type of display filter. Clicking a block is clicking a label, and changing a block type (“air” or no block is considered a type of block) switches which labels are visible to the user.
Viewing in 3D is implemented via CSS animations which apply transforms to what is displayed. Clicking a control starts and stops the animation, resulting in a view change. It’s a lot of atypical functionality for plain HTML and CSS, showing what is possible with a bit of out-of-the-box thinking.
[Simon Willison] has a more in-depth analysis of CSS-Minecraft and how it works, and the code is on GitHub if you want a closer look.
Once you’re done checking that out and hungry for more cleverness, don’t miss Minecraft in COBOL and Minecraft Running in… Minecraft.