13 ms·
Show HN: I made a pretty relaxing puzzle game
I had the concept in my head for some time and firstly just prototyped it using only HTML & CSS. Sent it to a few friends and they liked it so I made it into its own website and added few 'competitive' features like click counter and share button.
- amadeuspagel 4y agoNice. It looks like it's always the same picture? It would be nice if you could play this with a random picture.
- justusthane 4y agoThe picture changes every day (there’s a countdown timer until the next picture at the top after you finish), and you can play previous days if you scroll down.
- bobo_legos 4y agoSo I use Imagus in Firefox. When playing older games hovering over some of the tiles ends up loading the full image. Doesn't do it on today's cat image. Otherwise fun little game.
- kelnos 4y agoRan into this too and was really bummed to ruin the surprise!
- ashishb4u 4y agoLove the concept, well done. I was slightly annoyed at the dog puzzle, while i tried to rotate the boxes which contained just grass and a lot of bokeh. I guess picking the right pictures is really important.
- miiiiiike 4y agocute.
- bombcar 4y agoThis is nice. I just liked clicking to see the cat.
- tsm 4y agoCongratulations on the launch! It's a nice way to blow off some steam on a pomodoro break or while mulling over a bug
- trizoza 4y agoThanks! That's exactly how I use it too! Also goes well with a coffee break;)
- hnfong 4y agoImplement right click for the other direction?
- trizoza 4y agoNice suggestion! How should that behave on mobile? Any idea on how to best tackle it?
- dncornholio 4y agoDouble tap
- zoidb 4y agoI think for mobile have two ideal click counts, one for a single direction and another with direction switches.
- bbx 4y agoI would have suggested having 2 zones per tile: one to rotate left, one to rotate right. But the tap zone is quite small already, so it's prone to errors. One slower but more UX-friendly option would be to allow long-press on a tile, it would zoom in, and you can pick left or right with each button. Double tap is also an option but you need to remove the ability to select the content of the page.
- didsomeonesay 4y agoMaybe you could try swipe left/right or rotating gestures that snap to 90 degree increments. That is, rotating with one finger by holding and dragging either in circle or straight line. Better not the two finger rotation known from map apps.
- woogley 4y agoI think you should lean into this problem and just call the game "clockwise" Consistent across platforms, consistent "ideal" count, clever-ish game name
- thaumasiotes 4y agoTo achieve the ideal click count you can switch the rotation direction at any time by clicking on [clockwise] or [counterclockwise] This would be a lot less annoying, and involve fewer clicks, if you just had left click rotate one way and right click rotate the other way.
- trizoza 4y agoNice, looks like something that i really should look into. How about mobile?
- badcppdev 4y agoSwipe sideways left or right to turn left or right
- Gare 4y agoMaybe also "swipe up or down for a 180 turn"?
- busymom0 4y agoLong press can be right click!
- thaumasiotes 4y agoI have a puzzles app on my phone[1] that does just what you describe. It's awful; I will always tap repeatedly instead of long-pressing. Long-pressing is a gigantic usability failure. That app also implements the solution here, of having a toggle that swaps the effect of press and long-press. I use that... sometimes. Rarely. But more often than I attempt to long-press. Cell phones have a bad UI paradigm and therefore using software on a cell phone is generally more painful and annoying than using software on a computer. But that's not a reason to force painful, annoying UI into the computer too. [1] https://www.chiark.greenend.org.uk/~sgtatham/puzzles/ https://www.chiark.greenend.org.uk/~sgtatham/puzzles/ https://f-droid.org/en/packages/name.boyle.chris.sgtpuzzles/ https://f-droid.org/en/packages/name.boyle.chris.sgtpuzzles/
- bbx 4y agoI like the "Ideal number of clicks" criteria. Adds an additional challenge, and increases replayability.
- trizoza 4y agoThanks! That was some of the feedback from my friends when I initially sent it to them. They were like: "wow this is relaxing" but shortly after: "ok, how do we compete?" :D
- badcppdev 4y agoNice and relaxing but I want to do another one now. You could do a hex tile version as well
- bbx 4y agoThere's a list of older games you can play at the bottom of the page.
- jamesbfb 4y agoThat was…oddly satisfying. Really wish I could do another one!
- mattw2121 4y agoThanks for creating and sharing. I really like it. I would like a Easy, Hard, and Insane mode with increasing # of tiles.
- trizoza 4y agoThat's a great idea! Will add to backlog.
- boosteri 4y agoI only ever got 90° rotation. The page mentions it should be random .. am I just that lucky? Enjoyed the game though, nice and simple. And no hug of death yet, well done!
- mungoman2 4y agoThey mean on game start each tile has been rotated a random amount.
- knicholes 4y agoThat was surprisingly fun! Thank you.
- trizoza 4y agoI'm glad you liked it!
- Robin_Message 4y agoOn a phone, I didn't like having to change rotation direction separately from rotating. And I don't always find rotation directions intuitive. So maybe a direct manipulation would be better? Other than that, I enjoyed it.
- trizoza 4y agoThanks Robin! Yeah, it is not ideal game for phones, but I have few ideas in backlog on how to improve that.
- rouxz 4y ago"Relaxing" and at the same time counting number of clicks right next to Ideal number of clicks doesn't work very well for me :(
- JrProgrammer 4y agoI agree. I liked the idea but seeing an ideal number just puts pressure on something that shouldn't be. Maybe create a casual/competitive toggle? Anyways good job OP :)
- indigodaddy 4y agoIt could just reveal the # of click stats after completion
- boringg 4y agoI'd agree get rid of any competitive features so that its relaxing but if you want to make it competitive toggle it on.
- Markoff 4y agoTry Prune, the most relaxing game I played in years. http://www.prunegame.com http://www.prunegame.com And while you are at it follow it by watching Tales from the loop, most relaxing TV show I've seen in years.
- TrueGeek 4y agoThanks for recommending Tales From the Loop. What a beautiful show.
- cheapliquor 4y agoRight - I only noticed the "ideal" number of clicks after I had finished the puzzle. That kinda diminished the "relaxing" aspect and made me want to go back and start speedrunning. Otherwise, neat lil game. I got a nice picture of a kitty cat. :)
- larsonnn 4y ago
- throwaway_75369 4y agoThis was nice - I woke up in the middle of the night with some anxiety and insomnia and this was just what I needed; a dark background theme would have helped with the bright rectangle in my hand :)
- bmacho 4y agoDarkreader extension works on it.
- s0teri0s 4y agoThis is nice. If possible, I would change it so that a left rotation happened on a left click and a right rotation happened on a right click; make scoring optional if you want it to be more relaxing.
- mfbx9da4 4y agoYeah I find it relaxing to fill out CAPTCHAs as well (not)
- homero 4y agoSometimes the preview sticks sometimes it doesn't. I wasted all my clicks on that lol
- trizoza 4y agoThanks for the bug report - that's fixed now to only allow it for 3 seconds.
- s3p 4y agoFound this very relaxing, thanks OP :)
- trizoza 4y agoI'm happy it worked for you!
- drivers99 4y agoSome of the squares are basically a solid color (not so much the cat picture but the previous ones I checked). I like to do jigsaw puzzles and one good thing about them is even in fairly solid color areas, you get a good confirmation by pieces fitting together well. Something to think about when selecting photos.
- prismatix 4y agoAgreed. In Tabletop simulator Jigsaw Join the pieces fuse together when they're in the correct place. Maybe the white border could disappear between pieces in the correct place - although that might make it too easy if there's only one left.
- trizoza 4y agoYeah, apologies for that. There is no.4 that's extremely difficult, especially on phones with not such great colours and there's one more that has 2 tricky squares. I'm trying to pick pictures that do not have solid squares for future.
- phtrivier 4y agoGreat marketing move of using a cat.
- dbojan 4y agoimplement random pic loading from ... somewehere
- dbojan 4y agoimplement random picture loading from ... somewhere ? (with proper size)
- halftheopposite 4y agoReally like the concept, and played it longer than I initially expected! Shameless plug for a multiplayer puzzle game I created a year ago https://flipcards.online https://flipcards.online of which your game reminded me. Although mine has nothing relaxing as it favours competition. But rotating tiles of images is clearly checked.
- adigau31 4y agoI like that game! It's way less relaxing for sure lol Have you considered showing the progress of others in real-time to add some spice, go more into details? I really like what Chris has done with Liveblocks.io on his multiplayer Wordle: https://github.com/CTNicholas/wordle-wars https://github.com/CTNicholas/wordle-wars
- halftheopposite 4y agoThat's actually a great idea! Will work on it in the next fews days. Also planning on putting a quick tutorial to explain the concept. PS: Thanks for the link, looking at it right now.
- zaphodias 4y agoI had a computer game similar to this one like 15 years ago! I can't remember the name but I think it came as a CD with some encyclopedia for kids or something like this. You unlocked a memory of me solving the puzzle of a picture of a shark :D
- trizoza 4y agoHahaha, I love that I could bring this memory back!
- somberi 4y agoI loved this game and thanks for making it. It had a prayer-beads quality to it, and extending that metaphor, may I suggest you remove stats, but keep counter clock moves, where the mind gets trapped, and moves on to the next block, thereby helping the user focus on the task at hand.
- 6LLvveMx2koXfwn 4y agoI did it in 27 clicks, page says minimum is 29.
- 6LLvveMx2koXfwn 4y agoer, no I didn't 29, missed one in the mountains to the right. Now confetti.
- WesleyJohnson 4y agoFar right, row 2? That one got me as well.
- nuclearnice1 4y agoThis is a nice game. What technology stack did you use to implement?
- jmclnx 4y agoI think it is nice :) Thanks
- deleted 4y ago[deleted]
- boringg 4y agoI was surprised that I did find this relaxing - thanks OP. To other commenters point toggle on/off competitive features would be great otherwise it produces tiny amounts of competitive anxiety.
- trizoza 4y agoThanks! And this is idea is noted in backlog. Like opt out button from competition.
- nemo44x 4y agoExcellent game, well done! Love that there’s a new image daily so I can choose to spend a small amount of time each day but I won’t get sucked into a non-stop treadmill.
- ldoughty 4y agoI like it, but I will say I found 28 very frustrating... There's not enough detail in the picture to get the top row -- the entire row is basically 3 very similar colors, and there's no good hints... You basically have to determine the positioning by looking at the artifacting of the background. The cat one was enjoyable though!
- flapjaxy 4y agoAm I missing how you reshuffle to play another round?
- deleted 4y ago[deleted]
- tommica 4y agoPlease add more images!
- ranting-moth 4y agoWow, this is nice. Love it! Perhaps an option to hide the ideal clicks. If I was upset and using this to calm down (which I totally will!) it would just infuriate my messed up brain. But that's just me. Well done!
- trizoza 4y agoThanks, would hiding the counter during the game and revealing the counter once finished work? Or you'd prefer to get rid of it completely?
- ranting-moth 4y agoPersonally if I've opted to hide it I wouldn't want to see it unless I've specifically asked for it.
- lleb97a 4y agoGreat job! I found it the right balance of relaxing and challenging.
- vesinisa 4y agoIt's nice but could you make it so that the rotation direction can additionally be toggled by holding down shift while clicking? I find it very irritating to always move the mouse to the bottom right corner to select the rotation direction - especially since "every click counts". Other than that, I first thought that some of the tiles should start with correct orientation but soon realized that would make this puzzle just really easy, because our brains are just excellent at seeing the correct image from just a few correctly oriented tiles I think.
- quickthrower2 4y agoAnother option: clockwise only rotation. Then adjust the ideal number of clicks accordingly
- MikeTheGreat 4y agoShift-click is a great idea. I also like the idea of right-clicking to rotate the other way (so click always rotates one way, right-click the opposite) I ignored the ideal clicks thing and really enjoyed slowly revealing today's picture of the lounging cat. Very relaxing indeed!
- mistermegabyte 4y agoAwesome game. I agree that left click to rotate left and right click to rotate right would be so much more convenient.
- Aardwolf 4y agoShift click wouldn't work on mobile. Imho, just make 3 rotations in a row count as 1
- dietketchup 4y agoThis would break the game. You can always guess for free.
- 4y ago
- cambalache 4y agoWhere did you get the 'ideal' 29 number from? The expected (in statistical sense) number of rotations needed is 32 but it could be as low as 24. Now that I think it better that means the shuffle was fixed.
- searchableguy 4y agoSorry OP but this triggers my captcha hell trauma on the internet using a VPN for privacy.
- nnoitra 4y ago
- bambax 4y agoSolver in 0 clicks: [...document.querySelectorAll("#game > div > div")].forEach(e => e.style.transform="rotate(0deg)") It doesn't win the game, but can at least save the "preview" clicks.
- kidsil 4y agoJust wondering - why are you spreading the result to an array? document.querySelectorAll("#game > div > div").forEach(e => e.style.transform="rotate(0deg)") Works too.
- bambax 4y agoYou're right! (But since querySelectorAll returns a NodeList and not a regular array, some methods are unavailable, so I just have this habit of making it an array. But for iteration that's indeed not needed.)
- bambax 4y agoActual solver that does win the game: document.querySelectorAll("#game > div > div").forEach(e => { const rotation = e.style.transform.match(/(\d+)/)[0]; const clicks = 4-(rotation/90)%4; [...Array(clicks)].forEach(i=>e.click()); }); It could be optimized to change the rotation direction depending on whether the current rotation is smaller or larger than 180deg, but that's not really necessary since running the script only counts as one click, and generates negative "overspin" numbers ;-)
- 8ivek 4y ago
- uptownfunk 4y agoWow, really nice, relaxing. Don’t bloat it, sometimes simple and sweet is a winner. Mobile app version would be helpful.
- kriro 4y agoNicely done. Really enjoyed it. Would be interesting if you combined it with DALLE-2. Either with a prompt at the top that generates the picture on the fly or just by curating some DALLE-2 pictures and using them for the puzzles (and maybe the prompt to generate it could be revealed as a reward).
- trizoza 4y agoThat's actually a really cool idea.
- xivzgrev 4y agoAgree on removing ideal click count. Some pictures were hard to distinguish they still needed to be turned (like 95% mountain and a sliver of something else). I’d consider making the background already in place - i find rotating the cat the most enjoyable. Lining up a cloud or shoreline starts to feel tedious to me.
- Sujeto 4y agoNice!
- gmiller123456 4y agoIt could probably benefit from an indicator that there's still work to be done. I thought I was done, but noticed a comment from someone else that they got confetti.
- trizoza 4y agoYeah, that's actually a great idea. Do you have any idea on how the indicator could look like? Something like counter how many tiles are still not in position? Tiles still in wrong position ............ 24?
- gmiller123456 4y agoI was thinking something like that, "x tiles to go". Or a "Check" button that tells you how many are left, but it still automatically shows the confetti when you're done.
- radres 4y agoI like the ideal number of clicks. But somewhat agree on sky etc. should come in order.
- blinding-streak 4y agoThis is great! Shared with my family. Thanks for making it.
- xwdv 4y agoHow about if instead of a photo it would be an interesting video?
- larsonnn 4y agoIt’s nice. But I would love it more without competitive features. Maybe you can choos if you want the relax or competitive mode.
- yonrg 4y agoAbsolutely, this was relaxing and fun 23 Nov 22 31/29 clicks rotabox.es/29
- trizoza 4y agoThank you!
- nickstinemates 4y agoCool project, I had fun. Could be like Wordle but more interesting.
- CobrastanJorji 4y agoI like how well this specific picture works for this puzzle. The coastline lines up perfectly with a square border. The cat's face is sideways. The two steps are the same color, so the rotation could be in one of two possible positions. It makes it just tricky enough to make the right answer not immediately obvious, but it's not so hard that there's any chance for being frustrated. Plus, it's a kitty.
- spikenilan 4y agoVery cool. I made something kinda similar a while back but never got around to publishing it. I think mine is overly complicated and I never got around to writing a tutorial but you can check it out here: blurdle.cc
- trizoza 4y agoThe link doesn't work :(
- sbf501 4y agoNo. I do NOT want to "Stop Confetti" thank you very much.
- johndhi 4y agoBravo
- iandanforth 4y agoPerfect on first try. I will now never play again to maintain my overspin rating of 0.
- NotMyBestWork 4y agoI really enjoyed this, it was indeed relaxing. Do you grab any statistics on how well people do? I was hugely over, but only because a few of the 'difficult' squares were wrong.
- Blammar 4y agoAm I missing something? I completed a picture with two rotations left, and nothing happened. I was optimal in the number of rotations (always 1 or 2 rotations.) I checked I was right by clicking the eye. The cute cat just sits there...
- jbmny 4y ago"Tiles left to rotate" tells you how many still need to be rotated to solve the puzzle. Sounds like you're still two away from the goal. Some of the differences in this picture between right/wrong are very subtle.
- hkon 4y agoVery nice, can you make it so that another puzzle shows up after 10 seconds after completing one?
- permo-w 4y agoit's really nice. one suggestion I would have would be to make the gap between the squares variable. it would be easier if it was thinner or not there
- permo-w 4y agopresumably you could hook this up to stable diffusion and have infinite levels
- mpetrovich 4y agoReally fun! This inspired me to create my own version of the sliding-tile puzzle game that I used to play as a kid: https://tileslide.com/ https://tileslide.com/
- CmdrKrool 4y agoNever assume the orientation of a cat :P
- qroolen 4y agoreally interesting the effect on short-term memory when you click to reveal the completed image (principally when you have a good chunk set already)! i loved it also, as everyone probably, right-click to rotate counterclockwise came intuitively real quick in thoughts...
- arrty88 4y ago24 Nov 22 57/33 clicks rotabox.es/30
- pengaru 4y agoThe amount of bikeshedding over obvious rotation modifiers on display in this thread is asinine.
- jefozabuss 4y agoEpilepsy warning: if you finish it you might have a page refresh bug where it constantly keeps refreshing (with flashing content) the page - for me it was solved by clearing localStorage (or just close the page I guess), I think this bug needs to be fixed ASAP.
- ranguna 4y agoThat didn't happen for me, either it was fixed in 20 mins or I don't know.
- amarant 4y agoHappened to me, chrome on Android. Likely there is some precondition required to trigger the bug other than winning the game, since it doesn't seem to happen to everyone
- boudra 4y agoSame here, on Firefox.
- LLyaudet 4y agoMe too.
- trizoza 4y agoApologies for that. It was a bug I introduced that happens only in different timezones. Should be fixed now.
- CleanCoder 4y agoCan you elaborate on what you mean by "happens only in different timezones?" It sounds like an interesting bug to identify.
- bratak 4y agoAwesome, thanks for that §8-)