Show HN: I made a pretty relaxing puzzle game

by trizoza • 4 years ago

633 167 4 years ago

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.

bombcar• 4 years ago

This is nice. I just liked clicking to see the cat.

trizoza20• 4 years ago

Thanks! Glad you liked it!

rwky• 4 years ago

That is one chilled out cat

tsm• 4 years ago

Congratulations on the launch! It's a nice way to blow off some steam on a pomodoro break or while mulling over a bug

trizoza20• 4 years ago

Thanks! That's exactly how I use it too! Also goes well with a coffee break;)

hnfong• 4 years ago

Implement right click for the other direction?

trizoza20• 4 years ago

Nice suggestion! How should that behave on mobile? Any idea on how to best tackle it?

dncornholio• 4 years ago

Double tap

bbx3• 4 years ago

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• 4 years ago

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• 4 years ago

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

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

bambax6• 4 years ago

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• 4 years ago

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• 4 years ago

Short tap for CW, hold for CCW

huhtenberg2• 4 years ago

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• 4 years ago

Click left half of square for ccw rotation, click right half of square for cw rotation.

dhc02• 4 years ago

Long press?

huhtenberg2• 4 years ago

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• 4 years ago

Who is blocking these? Paranoid corporates?

m4lvin• 4 years ago

Or use scroll-up and scroll-down to rotate left/right?

l2silver• 4 years ago

I might just get rid of rotate all together

vesinisa2• 4 years ago

Right click is often blocked, but Shift+Click is not.

sph• 4 years ago

Blocked by whom?

Someone• 4 years ago

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.

thaumasiotes2• 4 years ago

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.

trizoza20• 4 years ago

Nice, looks like something that i really should look into. How about mobile?

badcppdev3• 4 years ago

Swipe sideways left or right to turn left or right

busymom0• 4 years ago

Long press can be right click!

bbx3• 4 years ago

I like the "Ideal number of clicks" criteria. Adds an additional challenge, and increases replayability.

trizoza20• 4 years ago

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

badcppdev3• 4 years ago

Nice and relaxing but I want to do another one now.

You could do a hex tile version as well

bbx3• 4 years ago

There's a list of older games you can play at the bottom of the page.

badcppdev3• 4 years ago

Thanks. I couldn't see it because it disappears if you click on 'Play again' and reappears when the picture is solved

jamesbfb• 4 years ago

That was…oddly satisfying. Really wish I could do another one!

mungoman22• 4 years ago

You can! "Play older games" at the bottom of the page.

HanClinto• 4 years ago

Did you see the list at the bottom of the page? You can play all of the older puzzles!

mattw2121• 4 years ago

Thanks for creating and sharing. I really like it. I would like a Easy, Hard, and Insane mode with increasing # of tiles.

trizoza20• 4 years ago

That's a great idea! Will add to backlog.

amadeuspagel• 4 years ago

Nice.

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

justusthane• 4 years ago

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• 4 years ago

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!

mungoman22• 4 years ago

They mean on game start each tile has been rotated a random amount.

knicholes• 4 years ago

That was surprisingly fun! Thank you.

trizoza20• 4 years ago

I'm glad you liked it!

Robin_Message• 4 years ago

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.

trizoza20• 4 years ago

Thanks Robin! Yeah, it is not ideal game for phones, but I have few ideas in backlog on how to improve that.

rouxz• 4 years 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• 4 years ago

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• 4 years ago

It could just reveal the # of click stats after completion

boringg2• 4 years ago

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• 4 years ago

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• 4 years ago

Thanks for recommending Tales From the Loop. What a beautiful show.

cheapliquor• 4 years ago

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. :)

larsonnn2• 4 years ago

So you are the one which needed to go back.

blurrybird• 4 years ago

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• 4 years ago

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• 4 years ago

Darkreader extension works on it.

s0teri0s• 4 years ago

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• 4 years ago

Yeah I find it relaxing to fill out CAPTCHAs as well (not)

homero• 4 years ago

Sometimes the preview sticks sometimes it doesn't. I wasted all my clicks on that lol

trizoza20• 4 years ago

Thanks for the bug report - that's fixed now to only allow it for 3 seconds.

s3p• 4 years ago

Found this very relaxing, thanks OP :)

trizoza20• 4 years ago

I'm happy it worked for you!

drivers99• 4 years ago

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• 4 years ago

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.

trizoza20• 4 years ago

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• 4 years ago

Great marketing move of using a cat.

dbojan2• 4 years ago

implement random pic loading from ... somewehere

dbojan2• 4 years ago

implement random picture loading from ... somewhere ? (with proper size)

halftheopposite2• 4 years ago

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• 4 years ago

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

halftheopposite2• 4 years ago

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• 4 years ago

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

trizoza20• 4 years ago

Hahaha, I love that I could bring this memory back!

somberi• 4 years ago

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.

6LLvveMx2koXfwn2• 4 years ago

I did it in 27 clicks, page says minimum is 29.

6LLvveMx2koXfwn2• 4 years ago

er, no I didn't 29, missed one in the mountains to the right. Now confetti.

WesleyJohnson• 4 years ago

Far right, row 2? That one got me as well.

nuclearnice1• 4 years ago

This is a nice game. What technology stack did you use to implement?

jmclnx• 4 years ago

I think it is nice :) Thanks

boringg2• 4 years ago

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.

trizoza20• 4 years ago

Thanks! And this is idea is noted in backlog. Like opt out button from competition.

nemo44x• 4 years ago

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.

ldoughty• 4 years ago

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!

flapjaxy• 4 years ago

Am I missing how you reshuffle to play another round?

tommica• 4 years ago

Please add more images!

ranting-moth2• 4 years ago

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!

trizoza20• 4 years ago

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?

ranting-moth2• 4 years ago

Personally if I've opted to hide it I wouldn't want to see it unless I've specifically asked for it.

lleb97a• 4 years ago

Great job! I found it the right balance of relaxing and challenging.

vesinisa2• 4 years ago

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.

MikeTheGreat• 4 years ago

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!

mistermegabyte• 4 years ago

Awesome game. I agree that left click to rotate left and right click to rotate right would be so much more convenient.

Aardwolf2• 4 years ago

Shift click wouldn't work on mobile. Imho, just make 3 rotations in a row count as 1

geros• 4 years ago

Change cursor to match rotation icon.

the_cat_kittles• 4 years ago

another option be to have clicking the left side of the tile turn it counter clockwise and right side clockwise

quickthrower2• 4 years ago

Another option: clockwise only rotation. Then adjust the ideal number of clicks accordingly

cambalache• 4 years ago

Where 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• 4 years ago

Sorry OP but this triggers my captcha hell trauma on the internet using a VPN for privacy.

bambax6• 4 years ago

Solver 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• 4 years ago

Just wondering - why are you spreading the result to an array?

  document.querySelectorAll("#game > div > div").forEach(e => e.style.transform="rotate(0deg)")

Works too.

bambax6• 4 years ago

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

bambax6• 4 years ago

Actual 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 ;-)

prox2• 4 years ago

What does […Array mean in this context? Does it create an array?

mahathu• 4 years ago

Instead of the array spread syntax, why not:

    for(let i=0; i<clicks; i++){ e.click() };

eutectic• 4 years ago

An actual solver in Python:

    import numpy as np
    from mip import Model, xsum, minimize, BINARY

    def solve(tiles):
        rotations = [[[] for _ in row] for row in tiles]
        rot_vars = [[[] for _ in row] for row in tiles]
        model = Model("rotaboxes")
        for i, row in enumerate(tiles):
            for j, tile in enumerate(row):
                for _ in range(3):
                    tile = tile.transpose((1, 0, 2))[::-1]
                    rotations[i][j].append(tile)
                    rot_vars[i][j].append(model.add_var(var_type=BINARY))
                model += (xsum(rot_vars[i][j]) == 1)
        costs = []
        for i, row in enumerate(tiles):
            for j, tile in enumerate(row):
                for (di, dj) in [(0, 1), (1, 0)]:
                    if (i + di >= len(tiles)) or (j + dj >= len(tiles[0])):
                        continue
                    for r0, t0 in enumerate(rotations[i][j]):
                        for r1, t1 in enumerate(rotations[i + di][j + dj]):
                            if di:
                                a, b = t0[-1], t1[0]
                            else:
                                a, b = t0[:,-1], t1[:,0]
                            n = np.square(a - b).mean()
                            d = np.square(a[1:] - a[:1]).mean() + np.square(b[1:] - b[:1]).mean()
                            e = 2. * n / (d + 0.01)
                            v = model.add_var(var_type=BINARY)
                            model += (v >= rot_vars[i][j][r0] + rot_vars[i + di][j + dj][r1] - 1)
                            costs.append(e * v)
        model.objective = minimize(xsum(costs))
        model.optimize()
        solution = [[[r for v, r in zip(vs, rs) if v.x >= 0.99][0] for vs, rs in zip(row0, row1)] for row0, row1 in zip(rot_vars, rotations)]
        return solution

ComodoHacker• 4 years ago

Now you should count keystrokes for your type of solution.

miiiiiike• 4 years ago

cute.

uptownfunk• 4 years ago

Wow, really nice, relaxing. Don’t bloat it, sometimes simple and sweet is a winner. Mobile app version would be helpful.

kriro• 4 years ago

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

trizoza20• 4 years ago

That's actually a really cool idea.

xivzgrev• 4 years ago

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.

Sujeto• 4 years ago

Nice!

gmiller1234562• 4 years ago

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.

trizoza20• 4 years ago

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?

gmiller1234562• 4 years ago

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.

radres• 4 years ago

I like the ideal number of clicks. But somewhat agree on sky etc. should come in order.

blinding-streak• 4 years ago

This is great! Shared with my family. Thanks for making it.

bobo_legos• 4 years ago

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.

kelnos• 4 years ago

Ran into this too and was really bummed to ruin the surprise!

xwdv• 4 years ago

How about if instead of a photo it would be an interesting video?

larsonnn2• 4 years ago

It’s nice. But I would love it more without competitive features. Maybe you can choos if you want the relax or competitive mode.

yonrg• 4 years ago

Absolutely, this was relaxing and fun

23 Nov 22 31/29 clicks rotabox.es/29

trizoza20• 4 years ago

Thank you!

nickstinemates• 4 years ago

Cool project, I had fun. Could be like Wordle but more interesting.

CobrastanJorji• 4 years ago

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.

spikenilan• 4 years ago

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

trizoza20• 4 years ago

The link doesn't work :(

sbf501• 4 years ago

No. I do NOT want to "Stop Confetti" thank you very much.

johndhi• 4 years ago

Bravo

iandanforth• 4 years ago

Perfect on first try. I will now never play again to maintain my overspin rating of 0.

NotMyBestWork• 4 years ago

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.

Blammar• 4 years ago

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

jbmny• 4 years 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• 4 years ago

Very nice, can you make it so that another puzzle shows up after 10 seconds after completing one?

permo-w2• 4 years ago

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

permo-w2• 4 years ago

presumably you could hook this up to stable diffusion and have infinite levels

mpetrovich• 4 years ago

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/

CmdrKrool• 4 years ago

Never assume the orientation of a cat :P

qroolen• 4 years ago

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

arrty88• 4 years ago

24 Nov 22 57/33 clicks rotabox.es/30

pengaru• 4 years ago

The amount of bikeshedding over obvious rotation modifiers on display in this thread is asinine.

jefozabuss• 4 years ago

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.

ranguna• 4 years ago

That didn't happen for me, either it was fixed in 20 mins or I don't know.

amarant• 4 years ago

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

boudra• 4 years ago

Same here, on Firefox.

LLyaudet• 4 years ago

Me too.

trizoza20• 4 years ago

Apologies for that. It was a bug I introduced that happens only in different timezones. Should be fixed now.

CleanCoder• 4 years ago

Can you elaborate on what you mean by "happens only in different timezones?" It sounds like an interesting bug to identify.

bratak• 4 years ago

Awesome, thanks for that §8-)

ashishb4u• 4 years ago

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.

Show HN: I made a pretty relaxing puzzle game

Related Stories