Show HN: I made a pretty relaxing puzzle game
rotaboxes.comI 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.
It'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.
Shift-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!
Awesome game. I agree that left click to rotate left and right click to rotate right would be so much more convenient.
Change cursor to match rotation icon.
Shift click wouldn't work on mobile. Imho, just make 3 rotations in a row count as 1
This would break the game. You can always guess for free.
Not really? It's not free, it costs 1 to do 3 or 1 rotation, and it costs 2 to do 2 rotations. There is still a challenge because it's still the combination of multiple tiles that makes the full image, you don't necessarily gain information from doing 1 vs 3 rotations if the neighboring pieces aren't already correct
another option be to have clicking the left side of the tile turn it counter clockwise and right side clockwise
Another option: clockwise only rotation. Then adjust the ideal number of clicks accordingly
I 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.
Implement right click for the other direction?
An alternative is to change the scoring system, and count consecutive clicks on the same tile as ‘one’
Alternatively, just count three consecutive clicks that are close in time as one.
Nice suggestion! How should that behave on mobile? Any idea on how to best tackle it?
I think you should lean into this problem and just call the game "clockwise"
Consistent across platforms, consistent "ideal" count, clever-ish game name
I would like to see either as you describe (which I think would be the most relaxing), or have the direction-changing buttons also count as a click each time they are pressed. I found it tempting to switch direction, turn a piece, then switch back, often using two clicks instead of the three it would take to turn it clockwise-only, but very inefficient since I switched back and forth many times. Making those count as clicks, though, does up the difficulty and would make hitting the target require you to use them only once, so perhaps removing them altogether is the solution.
If you did it as clockwise by default instead of listing the ideal turn count you could list the minimum number of “counter” turns. Then have a button to do the next turn as a counter turn.
I 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.
Maybe 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.
Or: pull down for rotate CCW, pull up for rotate CW. Just sum up event.movementY to calculate rotations.
Cons: A little slower than simply clicking, maybe, and makes it easier to overshoot. Need to count rotations instead of clicks.
Pros: Quite intuitive (that's how dials work in most DAWs for instance) and would work well on mobile, even if the tile size is small.
Click left half of square for ccw rotation, click right half of square for cw rotation.
Short tap for CW, hold for CCW
Not sure how easy it is to implement, but here is another idea: hold on the tile few seconds, then you have the choice to swipe left or right (has also some edge cases, when the elements are in the corner)
Tap-and-hold a tile, move finger outside of it and then rotate by moving finger around tile's center (like using a handle that you just extended from the tile).
Double tap
I think for mobile have two ideal click counts, one for a single direction and another with direction switches.
Long press?
Or use scroll-up and scroll-down to rotate left/right?
I might just get rid of rotate all together
It's not uncommon for right-clicks to be blocked at the browser level.
A better option would be Ctrl-left-click for the other direction.
Who is blocking these? Paranoid corporates?
Right click is often blocked, but Shift+Click is not.
Blocked by whom?
By people who like browser's native context menus.
"Relaxing" and at the same time counting number of clicks right next to Ideal number of clicks doesn't work very well for me :(
I 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 :)
Try Prune, the most relaxing game I played in years.
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.
Right - 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. :)
So you are the one which needed to go back.
Agreed, I needed to de-stress so I clicked through.
When I finished the back of my neck tension that I didn’t realise I had disappeared.
Most stressful thing I’ve done all week. Got 33/33 though so that’s neat.
I'd agree get rid of any competitive features so that its relaxing but if you want to make it competitive toggle it on.
It could just reveal the # of click stats after completion
Solver in 0 clicks:
It doesn't win the game, but can at least save the "preview" clicks.An actual solver in Python:
Actual solver that does win the game:
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 ;-)Instead of the array spread syntax, why not:
Sure, it's the same. For some reason I don't like the 'for' syntax much, or having curly brackets on the same line. But to each their own.
What does […Array mean in this context? Does it create an array?
... is the spread syntax, which is a neat way to use the entries of an existing array or object in an argument list or within an array or object literal.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
Array(length) creates an array that has a length but no elements (or weird, "empty" elements). The square brackets create a new array [...Array(length)] which will have undefined elements instead, as trying to access an "empty" element returns undefined.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guid...
That is neat! Thanks!
The "..." is called a spread operator in javascript.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
(In python there is the "*" operator which should be equivalent: [1, 2, *arr].
Array(clicks) instantiate an array of length 'clicks', with its elements undefined.
Then "[...Array(clicks)]" takes the above array instance and spreads it as content in another array.
Seems redundant and they could've just used Array(clicks).
> Array(clicks) instantiate an array of length 'clicks', with its elements undefined.
Not undefined elements but no elements, or "empty" elements.
> they could've just used Array(clicks).
No, because the following forEach call does nothing for such an array. You need to fill the array first with Array(clicks).fill() or shorter, [...Array(clicks)]
Yes it creates an array of length 'clicks'; so for example [...Array(2)] creates the array [undefined, undefined]. It's just a way to do a loop without writing a for loop and use forEach instead.
Probably a shortcut for Array(n).fill()
Just wondering - why are you spreading the result to an array?
Works too.You'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.)
Now you should count keystrokes for your type of solution.
This is nice. I just liked clicking to see the cat.
That is one chilled out cat
Thanks! Glad you liked it!
Some 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.
Yeah, 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.
Agreed. 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.
Epilepsy 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.
Apologies for that. It was a bug I introduced that happens only in different timezones. Should be fixed now.
Can you elaborate on what you mean by "happens only in different timezones?" It sounds like an interesting bug to identify.
That didn't happen for me, either it was fixed in 20 mins or I don't know.
Happened 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
Same here, on Firefox.
Me too.
This 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 :)
Darkreader extension works on it.
Wow, 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!
Thanks, would hiding the counter during the game and revealing the counter once finished work? Or you'd prefer to get rid of it completely?
Personally if I've opted to hide it I wouldn't want to see it unless I've specifically asked for it.
Nicely 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).
That's actually a really cool idea.
To 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.
Nice, looks like something that i really should look into. How about mobile?
Swipe sideways left or right to turn left or right
Maybe also "swipe up or down for a 180 turn"?
Long press can be right click!
I 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://f-droid.org/en/packages/name.boyle.chris.sgtpuzzles/
I 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
Hahaha, I love that I could bring this memory back!
Congratulations on the launch! It's a nice way to blow off some steam on a pomodoro break or while mulling over a bug
Thanks! That's exactly how I use it too! Also goes well with a coffee break;)
This 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.
Perfect on first try. I will now never play again to maintain my overspin rating of 0.
I like the "Ideal number of clicks" criteria. Adds an additional challenge, and increases replayability.
Thanks! 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
Yeah I find it relaxing to fill out CAPTCHAs as well (not)
Am 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...
"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.
Sorry OP but this triggers my captcha hell trauma on the internet using a VPN for privacy.
Really 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/
On 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.
Thanks Robin! Yeah, it is not ideal game for phones, but I have few ideas in backlog on how to improve that.
I 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.
Thanks! And this is idea is noted in backlog. Like opt out button from competition.
It 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.
Yeah, 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?
I 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.
Excellent 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.
Really 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 of which your game reminded me. Although mine has nothing relaxing as it favours competition. But rotating tiles of images is clearly checked.
I 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
That'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.
Love 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.
I 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!
Thanks for creating and sharing. I really like it. I would like a Easy, Hard, and Insane mode with increasing # of tiles.
That's a great idea! Will add to backlog.
The amount of bikeshedding over obvious rotation modifiers on display in this thread is asinine.
I 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.
Agree 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.
That was surprisingly fun! Thank you.
I'm glad you liked it!
Great marketing move of using a cat.
Very 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
The link doesn't work :(
I 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.
No. I do NOT want to "Stop Confetti" thank you very much.
Great job! I found it the right balance of relaxing and challenging.
So 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.
Ran into this too and was really bummed to ruin the surprise!
That was…oddly satisfying. Really wish I could do another one!
Did you see the list at the bottom of the page? You can play all of the older puzzles!
You can! "Play older games" at the bottom of the page.
This is great! Shared with my family. Thanks for making it.
I 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!
They mean on game start each tile has been rotated a random amount.
It’s nice. But I would love it more without competitive features. Maybe you can choos if you want the relax or competitive mode.
Wow, really nice, relaxing. Don’t bloat it, sometimes simple and sweet is a winner. Mobile app version would be helpful.
Never assume the orientation of a cat :P
Very nice, can you make it so that another puzzle shows up after 10 seconds after completing one?
really 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...
Found this very relaxing, thanks OP :)
I'm happy it worked for you!
Nice.
It looks like it's always the same picture? It would be nice if you could play this with a random picture.
The 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.
Sometimes the preview sticks sometimes it doesn't. I wasted all my clicks on that lol
Thanks for the bug report - that's fixed now to only allow it for 3 seconds.
I like the ideal number of clicks. But somewhat agree on sky etc. should come in order.
Nice and relaxing but I want to do another one now.
You could do a hex tile version as well
There's a list of older games you can play at the bottom of the page.
Thanks. I couldn't see it because it disappears if you click on 'Play again' and reappears when the picture is solved
Thanks for this feedback and that's now fixed - all older games and all played games have now the option to play older games at the bottom.
Absolutely, this was relaxing and fun
23 Nov 22 31/29 clicks rotabox.es/29
Thank you!
Cool project, I had fun. Could be like Wordle but more interesting.
This is a nice game. What technology stack did you use to implement?
How about if instead of a photo it would be an interesting video?
it'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
24 Nov 22 57/33 clicks rotabox.es/30
Am I missing how you reshuffle to play another round?
I did it in 27 clicks, page says minimum is 29.
er, no I didn't 29, missed one in the mountains to the right. Now confetti.
Far right, row 2? That one got me as well.
Awesome, thanks for that §8-)
presumably you could hook this up to stable diffusion and have infinite levels
I think it is nice :) Thanks
Please add more images!
implement random pic loading from ... somewehere
Bravo
Nice!
implement random picture loading from ... somewhere ? (with proper size)
cute.