To emulate Minesweeper's not-a-bomb-on-the-first-click experience, I start the board off with a generous region revealed, and then to emulate flood-filling, I make blank cells sit in an invisible (overflow hidden) scroll box that scrolls to a revealed version of the region when you click the blank cells, which have relative links. That only works for rectangular regions, but I remember having a way to make it work with irregularly shaped regions and being too lazy to implement it because it was going to be even trickier and uglier than what I was already doing. I'll leave that as an exercise for the reader. :P

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 <i>, not <div>, 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 hidden, you have to use an in-page anchor link to scroll to the clicked state. The unclicked version of each cell is an anchor to the clicked version.

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!

That is an amazing hack! Awesome.

both lack the left+right click that reveals tiles around numbers that have the sufficient amount of bomb marked, I'm curious what's the css/html limitation that prevents the implementation of that behavior?

You can't (afaik) tell if it's a right-click vs left-click in HTML+CSS alone that causes the el state to change - that info is part of the JS event :)

thanks