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!
I used HTML/CSS so I could implement it on a Neopets page, which meant I couldn't use forms, inputs, or CSS3, which means it's less feature-complete and the approach is completely different. The final result, though, is still the same delightful Minesweeper experience.
Codepen link (so you don't have to be signed into Neopets to see it)
https://codepen.io/qaz/pen/bGEzyrJ
Enjoy!
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.
Thank you!
I am very good with HTML and CSS and would definitely be able to solve sth like this. But not on a whiteboard, I would have to be able to fool around with it.
Great job!
tl;dr I grew up in India where the Indian Rupee was quite weak compared to the USD. Most people I knew couldn't really afford a legitimate copy of Windows XP - 1 USD was about 48.61 INR in 2002, and average wage was about 120 INR/day[0]. At that price a copy of Windows XP (priced at around $300/$400 ~ INR 14,000) was prohibitively expensive for pretty much everyone I knew. Because of that we ended up using leaked keys to setup new PCs, I did that enough times for my family, friends, and classmates that now I can type that key up as if I'm typing "hello world" :)
[0] https://www.ilo.org/wcmsp5/groups/public/---asia/---ro-bangk...
Seems like the "click click" message, which is shown only on op's direct link, causes some problems.
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 change their z-index to be on top, one at a time, for about 0.25s each
5) Clicking on any of the labels causes that layer to disappear, exposing the "#" link
6) Clicking again changes the url to "#" so #randommenu is no longer :target, thus closing the overlay
My guess is it's probably flashing too fast for iOS/Safari to register a full click.. I could probably fix it by making the random sequence take longer.
Can you confirm the URL never changes to "#" and stays stuck on "#randommenu"?
Sometimes it works though, needs some „clicking“ (touching), eventually it will (might) work.