Workflow
3D 世界开发
icon
Search documents
零JS,他用4.6万行HTML+CSS手搓了个《我的世界》,程序员哭诉:网友把服务器玩爆了
3 6 Ke· 2025-05-28 12:14
Core Concept - A developer named Benjamin Aster created a clone of Minecraft using only HTML and CSS, without any JavaScript, showcasing the potential of these technologies in building interactive web applications [1][3][17]. Project Overview - The project consists of 480 lines of CSS and 46,022 lines of HTML, resulting in a 3D world where users can add and remove blocks and rotate the view [3][4][17]. - The game allows interaction within a 9x9x9 grid, featuring 7 different types of blocks [3][6]. Technical Implementation - The project utilizes 35,001 `<label>` tags and 5,840 `<input type="radio">` buttons to manage the state of the blocks, with each block having six sides represented by labels [6][7]. - The `:has()` selector in CSS is a key technique that enables the interaction logic, allowing for dynamic visibility of block types based on user selection [6][13]. - To generate the extensive HTML structure, Aster employed Pug, a templating language, which simplifies the creation of nested elements [6][7]. Animation and Interaction - CSS animations are used to control the 3D view and rotation, with specific rules defined for button interactions that trigger animations [9][12]. - The design allows for a seamless user experience, where pressing and holding buttons initiates animations that manipulate 3D transformation properties [12]. Community Response - The project gained significant attention on Hacker News, with users expressing admiration for the innovative use of CSS and the creativity behind the implementation [13][14]. - Aster noted that the project was originally an experimental work from three years ago, aimed at exploring the limits of pure CSS [14][17]. Access and Experience - Users can experience the project through a dedicated website, which has seen increased traffic, leading Aster to switch hosting services to accommodate the demand [14][15]. - For optimal performance, it is recommended to access the project using desktop browsers, particularly those based on Chromium or Firefox [15].