[HN Gopher] CSS Minecraft
___________________________________________________________________
CSS Minecraft
Author : mudkipdev
Score : 203 points
Date : 2025-05-26 18:28 UTC (4 hours ago)
(HTM) web link (benjaminaster.com)
(TXT) w3m dump (benjaminaster.com)
| globie wrote:
| Without a doubt the most impressive thing I've seen with CSS.
|
| This immediately brought "A Single Div"[0] to mind, which stood
| as the coolest CSS demo I'd seen for... 11 years!
|
| This one takes the cake. I'll be pouring over it. Thanks!
|
| [0]: https://a.singlediv.com/
| 90s_dev wrote:
| > For the best performance, please close other tabs and running
| programs.
|
| This has always been the case with CSS, hasn't it? When you use
| it for rendering something relatively complex, you're kinda
| doomed.
|
| I get the dream, we want everything to be declarative, and leave
| room for future optimizations, so that we can write once and run
| everywhere forever.
|
| But in practice, it's not really an improvement over traditional
| GUIs that let you draw directly. Hence CSS is literally adding
| draw[1].
|
| This is a huge reason 90s.dev doesn't use HTML/CSS but starts
| from scratch and lets you draw right into WebGL2 yourself, or
| with high-level APIs _if_ you want.
|
| [1] https://developer.mozilla.org/en-
| US/docs/Web/API/CSS_Paintin...
| skulk wrote:
| If anyone's wondering how it manages the state, a quick peek into
| the source code shows that it uses radiobuttons and the HTML
| contains all the blocks you could ever possibly place.
| globie wrote:
| I... you're right. I was wondering why the world was only
| 9x9x9, there's 46k lines showing each block can have air,
| stone, grass, dirt, log, wood, leaves, or glass.
|
| I kind of like it.
| 90s_dev wrote:
| That is the most hacky solution I may have ever seen in a CSS
| demo. I love it.
| johnh-hn wrote:
| If anyone is equally curious how the camera state works, it
| looks like the camera is controlled by running animations when
| a button is in its :active state and pausing them otherwise.
| felineflock wrote:
| Please tell me if I understood it correctly:
|
| It implements voxels via <input type="radio" />.
|
| Each of the faces of each voxel is configured via <label>s, one
| for each face having a different CSS class.
|
| There is a voxel for each type of block (dirt, grass, stone, etc)
| and only one is activated at a time.
|
| The <input>s are arranged in a 9x9 grid 10 blocks tall times the
| number of different types of blocks (about 6500 total).
|
| All that is enclosed with <div>s with CSS classes that respond to
| the camera navigation (look up/down, move up/down, forward/back,
| clockwise/counter)
|
| That is brilliant!
| taosx wrote:
| Blew my mind. I have hundreds of tabs open, no issue on linux
| chrome.
| echoangle wrote:
| I think at some point the number of tabs doesn't matter because
| the tab is unloaded and the state is maybe stored on disk. As
| long as you don't open them, having them open shouldn't slow
| the browser down.
| ryanisnan wrote:
| Well done!
| quantadev wrote:
| Pretty slick! I never had played minecraft before. I never knew
| how blocks were place down until I ran this page. But it needs to
| be able to use the mouse to rotate, and mouse-wheel to scale!
| sefke wrote:
| Damn, this is impressive.
| h1fra wrote:
| Very impressive
| justinde wrote:
| Web-based minecraft, when?
| JLCarveth wrote:
| You used to be able to play Minecraft classic directly on
| minecraft.net
| thrance wrote:
| Fun fact: one of the first versions of Minecraft (the "classic"
| one) was playable in a web browser. I actually did play it as a
| young teen and later thought I must have dreamt it, when I
| couldn't find it anywhere.
| protocolture wrote:
| It got extended, embraced and extinguished.
| auxiliarymoose wrote:
| The phone is ringing--Java Applets called B-)
___________________________________________________________________
(page generated 2025-05-26 23:00 UTC)