5 ms·
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
by James0x57 6y ago
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 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!
- ceocoder 6y agoThat 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!
- krrrh 6y ago“fckgw rhqq2 yxrkt 8tg6w. There’s a name I’ve not heard in a long, long time.”
- ceocoder 6y agothis should be like a secret handshake or even better our version of windmill high-five from Top Gun. Still can't believe that I can enter that S/N without having to even think about it.
- Aeolun 6y agoIs there something magic about that code?
- ceocoder 6y agoYes - https://en.wikipedia.org/wiki/Volume_licensing#Leaked_keys https://en.wikipedia.org/wiki/Volume_licensing#Leaked_keys 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-bangkok/---sro-new_delhi/documents/publication/wcms_638305.pdf https://www.ilo.org/wcmsp5/groups/public/---asia/---ro-bangk...
- panda88888 6y agoIt’s the most popular Windows 98 cd key back in the old days.
- jonny_eh 6y agoThis should make white-boarding interviews a lot more fun. "Please implement Minesweeper, but only using HTML + CSS"
- ARandomerDude 6y agoWhy would you give "them" ideas?
- pedrocx486 6y agoIt's good to see which companies you shouldn't work for.
- atoav 6y agoAt some point questions like these become more like: Guess which exact sentence I am thinking about 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.
- elteto 6y agoFantastic! Are you proud that you can call yourself an HTML programmer now?
- Diskutant 6y agoDoesn’t work on iOS?
- faeyanpiraat 6y agoCan confirm
- Diskutant 6y agoThe "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.
- James0x57 6y agoOHHH 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 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"?
- Diskutant 6y agoYes it’s stuck on #randommenu Sometimes it works though, needs some „clicking“ (touching), eventually it will (might) work.
- cnees 6y agoNo way! I've done exactly the same thing. (https://news.ycombinator.com/item?id=15479160 https://news.ycombinator.com/item?id=15479160) At first I thought this was my own thread! I guess there's a healthy overlap between loving Minesweeper puzzles and CSS puzzles. :) 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. http://www.neopets.com/~Cism http://www.neopets.com/~Cism Codepen link (so you don't have to be signed into Neopets to see it) https://codepen.io/qaz/pen/bGEzyrJ https://codepen.io/qaz/pen/bGEzyrJ Enjoy!
- cnees 6y agoTo 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
- LoSboccacc 6y agoboth 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?
- James0x57 6y agoYou 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 :)
- LoSboccacc 6y agothanks