Very nice. Thanks for sharing.
Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
41–50 of 97 posts
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#42I 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…
That is impressive, just impressive. Brought back some fond memories of installing Windows XP over and over again for family and friends with fckgw rhqq2 yxrkt 8tg6w and playing minesweeper before handing it off to them.
Great job!
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#43Earlier quoted context omitted.
This took ~3.25 days. :) Since I'm brushing up against the limits of CSS, there's not enough room for a full year :P
What inspired the idea and what was your motivation?
I made a Binary Coded Decimal 7 Segment Display Decoder a couple days prior to starting this: https://github.com/propjockey/bcd7sdd
After that blew up on twitter I tried thinking of something else I could test using checkboxes as the state and MineSweeper just popped in my head since it's pretty much 480 fancy checkboxes.
Motivation was just to see if I could, then to see what the limits are once I realized I'd be able to.
Thanks for checking it out!
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#44Earlier quoted context omitted.
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…
If I understand this timer, is it true that after ~16.5 mins, the game would stop? Are you stopping at 1000 keyframes because of a hard limit or for performance or for?
the timer stops at 999 because that's what it does in the real minesweeper, you can keep playing though!
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#45Earlier quoted context omitted.
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…
Can't you simplify this by making each digit a separate animation, with the ones digit running at full speed, the tens digit running at 1/10th speed, and the hundreds digit running at 1/100th speed? Then you'd only need ten keyframe values.
Yes, but I didn't trust them to stay synchronized and it wasn't too difficult to generate the code for 1000 keyframes so I just did that :)
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#46This is really cool! I saw your responsive library[0] post [1] the other day, but couldn't quite wrap my head around it. With this post, I think I am starting to grok the (Space Toggle) trick. The Tweet you linked in your library was really helpful [2]. My current understanding is – in CSS, you can set a variable to nothing (a space). When a property contains that "blank" variable, it is replaced by nothing and so th…
haha, awesome! You nailed it. It's really cool to see it being tested out in the world! Thank you for sharing!
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#47This is very slow in my browser, which I don't mean as a criticism. Just refreshing to see something be slow that uses no JS at all :D
It is rather ironic that the chief complaints about JS are how it makes things bloated and unresponsive, yet this is 100x the size of http://www.play-minesweeper.com and the time to interactivity is recognizable by comparison. The HN community is a funny one, sometimes.
JS is the right tool for the job when you want to make something highly interactive. I can't remember seeing anybody dispute that here. Having said that, I now expect at least one reply from someone who does dispute it.
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#48I 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…
This should make white-boarding interviews a lot more fun. "Please implement Minesweeper, but only using HTML + CSS"
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#49Earlier quoted context omitted.
It is rather ironic that the chief complaints about JS are how it makes things bloated and unresponsive, yet this is 100x the size of http://www.play-minesweeper.com and the time to interactivity is recognizable by comparison. The HN community is a funny one, sometimes.
The OP is a 1.23MB tech demo in CSS absurdism, not a baseline for performance comparisons. You have the wrong take-away if you think you can squeeze any sort of performance point from this. It's like seeing that fun tech demo that implements Brainfuck in Rust's type system and going "heh, and they said compiled languages were fast? I can do this faster in PHP!"
You have the wrong take-away if you think the performance points were what I was actually focused on.
The HN community largely rails against the use of JS anywhere, even if not using JS would make things much more difficult. Therefore, it's funny when someone makes a relatively trivial app not using any JS and it exacerbates the problems people cite for JS rather than not.
The whole thing is really cool and I love how they managed to get so far using some cool CSS tricks. But per the community it should also be a godsend because by not using JS it should by default make it faster, smaller, and probably cure cancer or solve for FTL travel or something.
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#50I 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…
That is impressive, just impressive. Brought back some fond memories of installing Windows XP over and over again for family and friends with fckgw rhqq2 yxrkt 8tg6w and playing minesweeper before handing it off to them. Great job!
“fckgw rhqq2 yxrkt 8tg6w. There’s a name I’ve not heard in a long, long time.”