Earlier quoted context omitted.
This should make white-boarding interviews a lot more fun. "Please implement Minesweeper, but only using HTML + CSS"
Why would you give "them" ideas?
It's good to see which companies you shouldn't work for.
Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
91–97 of 97 posts
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#92Earlier quoted context omitted.
This is awesome - Could you please explain how you're holding state of each box individually without checkbox:checked? It's not immediately obvious to me how that's possible or where it's happening in your code!
Thanks! I use scroll position to keep the state. In effect, each square is in a div with overflow:hidden. (In the actual code I used , not , which might've been to save bytes because the server is so slow). It has a fixed visible height, the height of the square. Above the fold (before scrolling) is the un-clicked square, and below the fold (what you see after scrolling) is the clicked square. Since overflow is hidde…
That is an amazing hack! Awesome.
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#93Earlier quoted context omitted.
I saw that a few days before I started making this actually! https://news.ycombinator.com/item?id=23867569
I always wonder what kind of cool stuff HN inspires. There has to be tons. Is there a list?
Not curated, but found a whole bunch with this search https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#94Earlier quoted context omitted.
This is awesome - Could you please explain how you're holding state of each box individually without checkbox:checked? It's not immediately obvious to me how that's possible or where it's happening in your code!
Thanks! I use scroll position to keep the state. In effect, each square is in a div with overflow:hidden. (In the actual code I used , not , which might've been to save bytes because the server is so slow). It has a fixed visible height, the height of the square. Above the fold (before scrolling) is the un-clicked square, and below the fold (what you see after scrolling) is the clicked square. Since overflow is hidde…
wow, that's super clever. I was sitting here reading the code and didn't find a negative margin or positional property anywhere, and further, no switches to hold the state. Couldn't for the life of me figure out what you were doing hahaha I love it
Thank you!
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#95Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#96Earlier quoted context omitted.
The "Play it here" link on the github page works. Seems like the "click click" message, which is shown only on op's direct link, causes some problems.
OHHH I wish the others would have been more specific other than "it doesn't work". Thank you! The way that random thing works is: 1) #randommenu:target shows the overlay (based on hash in the url) 2) the overlay has a link to "#" (fullscreen) that says "click-click" 3) Then rendered ontop of the link, all 16 level labels are full screen & transparent 4) Animations loop through them (hard-coded random scramble) to cha…
Yes it’s stuck on #randommenu
Sometimes it works though, needs some „clicking“ (touching), eventually it will (might) work.
Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript
#97I was so confused why everyone was saying the game is so impressive when all my clicks did nothing but place a ‘?’ where I clicked. Was each ‘?’ an error message? No, it turned out you need to click each square twice to reveal it. The page really needs some instructions, because that is not how normal Minesweeper works.
The other thing you need to know to play is that right-clicking won’t flag a square. Instead, you need to left-click on the flag in the top left to toggle flag mode, then left-click on a square to flag it.