HN Explorer

Show HN: I made a pretty relaxing puzzle game (rotaboxes.com)

633 points by trizoza ↗ HN
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.

173 comments

[ 1.6 ms ] story [ 157 ms ] thread
bombcar
This is nice. I just liked clicking to see the cat.
trizoza
Thanks! Glad you liked it!
rwky
That is one chilled out cat
tsm
Congratulations on the launch! It's a nice way to blow off some steam on a pomodoro break or while mulling over a bug
trizoza
Thanks! That's exactly how I use it too! Also goes well with a coffee break;)
hnfong
Implement right click for the other direction?
trizoza
Nice suggestion! How should that behave on mobile? Any idea on how to best tackle it?
dncornholio
Double tap
zoidb
I think for mobile have two ideal click counts, one for a single direction and another with direction switches.
bbx
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.

didsomeonesay
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.

woogley
I think you should lean into this problem and just call the game "clockwise"

Consistent across platforms, consistent "ideal" count, clever-ish game name

[deleted]
(comment deleted)
dwringer
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.
sh1mmer
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.
bambax
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.

kiru_io
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)
tcmb
Short tap for CW, hold for CCW
huhtenberg
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).
w-m
Click left half of square for ccw rotation, click right half of square for cw rotation.
huhtenberg
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.

RadiozRadioz
Who is blocking these? Paranoid corporates?
[deleted]
(comment deleted)
m4lvin
Or use scroll-up and scroll-down to rotate left/right?
l2silver
I might just get rid of rotate all together
vesinisa
Right click is often blocked, but Shift+Click is not.
sph
Blocked by whom?
abcd_f
By people who like browser's native context menus.
Someone
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.

thaumasiotes
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.

trizoza
Nice, looks like something that i really should look into. How about mobile?
badcppdev
Swipe sideways left or right to turn left or right
Gare
Maybe also "swipe up or down for a 180 turn"?
busymom0
Long press can be right click!
thaumasiotes
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/

bbx
I like the "Ideal number of clicks" criteria. Adds an additional challenge, and increases replayability.
trizoza
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
badcppdev
Nice and relaxing but I want to do another one now.

You could do a hex tile version as well

bbx
There's a list of older games you can play at the bottom of the page.
badcppdev
Thanks. I couldn't see it because it disappears if you click on 'Play again' and reappears when the picture is solved
trizoza
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.
jamesbfb
That was…oddly satisfying. Really wish I could do another one!
mungoman2
You can! "Play older games" at the bottom of the page.
HanClinto
Did you see the list at the bottom of the page? You can play all of the older puzzles!
mattw2121
Thanks for creating and sharing. I really like it. I would like a Easy, Hard, and Insane mode with increasing # of tiles.
trizoza
That's a great idea! Will add to backlog.
amadeuspagel
Nice.

It looks like it's always the same picture? It would be nice if you could play this with a random picture.

justusthane
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.
boosteri
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!

mungoman2
They mean on game start each tile has been rotated a random amount.
knicholes
That was surprisingly fun! Thank you.
Robin_Message
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.

trizoza
Thanks Robin! Yeah, it is not ideal game for phones, but I have few ideas in backlog on how to improve that.
rouxz
"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
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 :)

indigodaddy
It could just reveal the # of click stats after completion
boringg
I'd agree get rid of any competitive features so that its relaxing but if you want to make it competitive toggle it on.
Markoff
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.

TrueGeek
Thanks for recommending Tales From the Loop. What a beautiful show.
cheapliquor
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. :)

larsonnn
So you are the one which needed to go back.
blurrybird
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.

throwaway_75369
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 :)
bmacho
Darkreader extension works on it.
s0teri0s
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.
mfbx9da4
Yeah I find it relaxing to fill out CAPTCHAs as well (not)
homero
Sometimes the preview sticks sometimes it doesn't. I wasted all my clicks on that lol
trizoza
Thanks for the bug report - that's fixed now to only allow it for 3 seconds.
s3p
Found this very relaxing, thanks OP :)
trizoza
I'm happy it worked for you!
drivers99
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.
prismatix
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.
trizoza
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.
phtrivier
Great marketing move of using a cat.
dbojan
implement random pic loading from ... somewehere
dbojan
implement random picture loading from ... somewhere ? (with proper size)
halftheopposite
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.

adigau31
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

halftheopposite
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.
zaphodias
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

trizoza
Hahaha, I love that I could bring this memory back!
somberi
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.