Skip to content

搞英语 → 看世界

翻译英文优质信息和名人推特

Menu
  • 首页
  • 作者列表
  • 独立博客
  • 专业媒体
  • 名人推特
  • 邮件列表
  • 关于本站
Menu

Minecraft 克隆版仅使用 HTML + CSS 进行管理

Posted on 2025-06-25

3D Minecraft 的实现能完全用 CSS 和 HTML 实现,而不需要一行 JavaScript 代码吗?答案是肯定的!

诚然,这个小型克隆版只能在只有 9x9x9 大小的世界中玩积木,但 [Benjamin Aster] 仅使用 CSS 和纯 HTML 就做到了这一点,这本身就是一个了不起的成就。就概念验证而言,这相当巧妙。

该项目包含大约 4 万行 HTML 单选按钮和标签,以及不到 500 行 CSS,实际工作就在这里完成。在X 上的一个简短帖子中,[Benjamin] 解释说,9x9x9 世界中的每个块都借助数以万计的<label>和<input type="radio">元素进行定义,这些元素用于跟踪块的类型和外观,而 CSS 则将其用作一种显示过滤器。点击一个块相当于点击一个标签,而更改块类型(“空块”或无块也被视为一种块类型)则会切换用户可见的标签。

3D 视图是通过 CSS 动画实现的,这些动画会对显示内容进行变换。点击控件即可启动或停止动画,从而导致视图切换。它为纯 HTML 和 CSS 带来了许多非同寻常的功能,展现了通过一些突破常规的思维方式可以实现哪些功能。

[Simon Willison]对 CSS-Minecraft 及其工作原理进行了更深入的分析,如果您想仔细查看,代码可以在 GitHub 上查看。

一旦您检查完毕并渴望获得更多智慧,请不要错过COBOL 中的 Minecraft和Minecraft 在… Minecraft 中运行。

原文: https://hackaday.com/2025/06/25/minecraft-clone-manages-with-nothing-but-html-css/

本站文章系自动翻译,站长会周期检查,如果有不当内容,请点此留言,非常感谢。
  • Abhinav
  • Abigail Pain
  • Adam Fortuna
  • Alberto Gallego
  • Alex Wlchan
  • Answer.AI
  • Arne Bahlo
  • Ben Carlson
  • Ben Kuhn
  • Bert Hubert
  • Bits about Money
  • Brian Krebs
  • ByteByteGo
  • Chip Huyen
  • Chips and Cheese
  • Christopher Butler
  • Colin Percival
  • Cool Infographics
  • Dan Sinker
  • David Walsh
  • Dmitry Dolzhenko
  • Dustin Curtis
  • eighty twenty
  • Elad Gil
  • Ellie Huxtable
  • Ethan Marcotte
  • Exponential View
  • FAIL Blog
  • Founder Weekly
  • Geoffrey Huntley
  • Geoffrey Litt
  • Greg Mankiw
  • Henrique Dias
  • Hypercritical
  • IEEE Spectrum
  • Investment Talk
  • Jaz
  • Jeff Geerling
  • Jonas Hietala
  • Josh Comeau
  • Lenny Rachitsky
  • Liz Danzico
  • Lou Plummer
  • Luke Wroblewski
  • Matt Baer
  • Matt Stoller
  • Matthias Endler
  • Mert Bulan
  • Mostly metrics
  • News Letter
  • NextDraft
  • Non_Interactive
  • Not Boring
  • One Useful Thing
  • Phil Eaton
  • Product Market Fit
  • Readwise
  • ReedyBear
  • Robert Heaton
  • Rohit Patel
  • Ruben Schade
  • Sage Economics
  • Sam Altman
  • Sam Rose
  • selfh.st
  • Shtetl-Optimized
  • Simon schreibt
  • Slashdot
  • Small Good Things
  • Taylor Troesh
  • Telegram Blog
  • The Macro Compass
  • The Pomp Letter
  • thesephist
  • Thinking Deep & Wide
  • Tim Kellogg
  • Understanding AI
  • Wes Kao
  • 英文媒体
  • 英文推特
  • 英文独立博客
©2025 搞英语 → 看世界 | Design: Newspaperly WordPress Theme