Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

github.com

Post reply on HN
Print view View original

1–10 of 97 posts

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#2

Post by JaneOri »

I realize this is an absurd thing to do, but it was fun and I wanted to test the limits of CSS again so I could share the results!

I linked to the README since any web devs that see this will probably want to know how buuut here's a link to the game if you want to go hands on:

https://propjockey.github.io/css-sweeper/#randommenu

It's all open source, and I discuss some details of how to do it in that readme, but I am more than happy to answer any questions!

Thanks for checking it out!

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#5

Post by James0x57 »

osrec wrote: post #4

Very interesting! Can I ask, how did you implement the timer in CSS/HTML? And also, what causes the lack of responsiveness?

The timer itself is a CSS animation with 1000 keyframes evenly spread, that runs once for 999s (just realized it should be running for 1000s, oops!). I can't link to lines in the source code because of the 1.23MB filesize but you can search for "timer" in the raw source to see the relevant code: https://raw.githubusercontent.com/propjockey/css-sweeper/mas...

Here's the part that controls when the animation is running:

    #level-none:not(:checked) ~ #ram #timer::before {
      animation: timer step-end 1;
      animation-duration: 999s;
      animation-fill-mode: forwards;
      --pause-if-won: var(--win-state) paused;
      --pause-if-lost: var(--game-over) paused;
      --pause-if-randommenu: var(--randommenu-visible) paused;
      animation-play-state: var(--pause-if-won, var(--pause-if-lost, var(--pause-if-randommenu, running)));
    }
Though the design is responsive to the width of the window, I suspect you mean how slow it is: it's 1.23MB of HTML + CSS, and clicking anything causes almost everything to redraw. It's only a little laggy on my computer but the idea was to test the limits of what's possible and is expected! :)

Thank you for checking it out!

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#6

Post by distrill »

kanobo wrote: post #3

That's crazy! The large lag between clicking and the UI updating is slightly annoying, but that's just me nitpicking at something other than the cool technical feat.

yeah, i expected it to be instant to be honest, given it's just markup and there's no "thinking"

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#7

Post by James0x57 »

distrill wrote: post #6
kanobo wrote: post #3

That's crazy! The large lag between clicking and the UI updating is slightly annoying, but that's just me nitpicking at something other than the cool technical feat.

yeah, i expected it to be instant to be honest, given it's just markup and there's no "thinking"

It's 1.23MB of CSS & HTML - this is meant to be a stress test of the limits, lag is expected for the next several years of average-at-the-time computers!

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#10

Post by Tempest1981 »

James0x57 wrote: post #7
distrill wrote: post #6

Earlier quoted context omitted.

yeah, i expected it to be instant to be honest, given it's just markup and there's no "thinking"

It's 1.23MB of CSS & HTML - this is meant to be a stress test of the limits, lag is expected for the next several years of average-at-the-time computers!

I'm curious how it performs on a 10x10 or 16x16 grid
Post reply on HN