[HN Gopher] Show HN: I made a pretty relaxing puzzle game
___________________________________________________________________
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.
Author : trizoza
Score : 462 points
Date : 2022-11-23 12:03 UTC (10 hours ago)
(HTM) web link (rotaboxes.com)
(TXT) w3m dump (rotaboxes.com)
| nickstinemates wrote:
| Cool project, I had fun. Could be like Wordle but more
| interesting.
| mfbx9da4 wrote:
| Yeah I find it relaxing to fill out CAPTCHAs as well (not)
| CobrastanJorji wrote:
| 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.
| homero wrote:
| Sometimes the preview sticks sometimes it doesn't. I wasted all
| my clicks on that lol
| trizoza wrote:
| Thanks for the bug report - that's fixed now to only allow it
| for 3 seconds.
| bambax wrote:
| 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.
| eutectic wrote:
| 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
| bambax wrote:
| 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 ;-)
| prox wrote:
| What does [...Array mean in this context? Does it create an
| array?
| manbash wrote:
| 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).
| tuukkah wrote:
| > _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)]
| bambax wrote:
| 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.
| tuukkah wrote:
| ... 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...
| prox wrote:
| That is neat! Thanks!
| monkpit wrote:
| Probably a shortcut for Array(n).fill()
| ComodoHacker wrote:
| Now you should count keystrokes for your type of solution.
| kidsil wrote:
| 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.
| bambax wrote:
| 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.)
| Blammar wrote:
| 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 wrote:
| "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.
| xivzgrev wrote:
| 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.
| boosteri wrote:
| I only ever got 90deg 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 wrote:
| They mean on game start each tile has been rotated a random
| amount.
| [deleted]
| Sujeto wrote:
| Nice!
| tsm wrote:
| 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 wrote:
| Thanks! That's exactly how I use it too! Also goes well with a
| coffee break;)
| knicholes wrote:
| That was surprisingly fun! Thank you.
| trizoza wrote:
| I'm glad you liked it!
| xwdv wrote:
| How about if instead of a photo it would be an interesting video?
| yonrg wrote:
| Absolutely, this was relaxing and fun
|
| 23 Nov 22 31/29 clicks rotabox.es/29
| trizoza wrote:
| Thank you!
| hnfong wrote:
| Implement right click for the other direction?
| huhtenberg wrote:
| 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 wrote:
| Who is blocking these? Paranoid corporates?
| [deleted]
| trizoza wrote:
| Nice suggestion! How should that behave on mobile? Any idea on
| how to best tackle it?
| dhc02 wrote:
| Long press?
| huhtenberg wrote:
| 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).
| dncornholio wrote:
| Double tap
| zoidb wrote:
| I think for mobile have two ideal click counts, one for a
| single direction and another with direction switches.
| bambax wrote:
| 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.
| bbx wrote:
| 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.
| kiru_io wrote:
| 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)
| didsomeonesay wrote:
| 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 wrote:
| 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]
| sh1mmer wrote:
| 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.
| dwringer wrote:
| 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.
| tcmb wrote:
| Short tap for CW, hold for CCW
| w-m wrote:
| Click left half of square for ccw rotation, click right half
| of square for cw rotation.
| Someone wrote:
| 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.
| m4lvin wrote:
| Or use scroll-up and scroll-down to rotate left/right?
| l2silver wrote:
| I might just get rid of rotate all together
| vesinisa wrote:
| Right click is often blocked, but Shift+Click is not.
| sph wrote:
| Blocked by whom?
| abcd_f wrote:
| By people who like browser's native context menus.
| tommica wrote:
| Please add more images!
| thaumasiotes wrote:
| 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 wrote:
| Nice, looks like something that i really should look into. How
| about mobile?
| badcppdev wrote:
| Swipe sideways left or right to turn left or right
| Gare wrote:
| Maybe also "swipe up or down for a 180 turn"?
| busymom0 wrote:
| Long press can be right click!
| thaumasiotes wrote:
| 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/ h
| ttps://f-droid.org/en/packages/name.boyle.chris.sgtpuzzles/
| s3p wrote:
| Found this very relaxing, thanks OP :)
| trizoza wrote:
| I'm happy it worked for you!
| nuclearnice1 wrote:
| This is a nice game. What technology stack did you use to
| implement?
| gmiller123456 wrote:
| 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.
| trizoza wrote:
| 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?
| gmiller123456 wrote:
| 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.
| spikenilan wrote:
| 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
| trizoza wrote:
| The link doesn't work :(
| jmclnx wrote:
| I think it is nice :) Thanks
| Robin_Message wrote:
| 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 wrote:
| Thanks Robin! Yeah, it is not ideal game for phones, but I have
| few ideas in backlog on how to improve that.
| ranting-moth wrote:
| 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!
| trizoza wrote:
| 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-moth wrote:
| Personally if I've opted to hide it I wouldn't want to see it
| unless I've specifically asked for it.
| [deleted]
| nnoitra wrote:
| NotMyBestWork wrote:
| 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.
| bbx wrote:
| I like the "Ideal number of clicks" criteria. Adds an additional
| challenge, and increases replayability.
| trizoza wrote:
| 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
| drivers99 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Great marketing move of using a cat.
| miiiiiike wrote:
| cute.
| larsonnn wrote:
| It's nice. But I would love it more without competitive features.
| Maybe you can choos if you want the relax or competitive mode.
| badcppdev wrote:
| Nice and relaxing but I want to do another one now.
|
| You could do a hex tile version as well
| bbx wrote:
| There's a list of older games you can play at the bottom of the
| page.
| badcppdev wrote:
| Thanks. I couldn't see it because it disappears if you click
| on 'Play again' and reappears when the picture is solved
| trizoza wrote:
| 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.
| lleb97a wrote:
| Great job! I found it the right balance of relaxing and
| challenging.
| rouxz wrote:
| "Relaxing" and at the same time counting number of clicks right
| next to Ideal number of clicks doesn't work very well for me :(
| indigodaddy wrote:
| It could just reveal the # of click stats after completion
| JrProgrammer wrote:
| 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 :)
| boringg wrote:
| I'd agree get rid of any competitive features so that its
| relaxing but if you want to make it competitive toggle it on.
| cheapliquor wrote:
| 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 wrote:
| So you are the one which needed to go back.
| Markoff wrote:
| 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.
| boringg wrote:
| 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.
| trizoza wrote:
| Thanks! And this is idea is noted in backlog. Like opt out
| button from competition.
| 8ivek wrote:
| jamesbfb wrote:
| That was...oddly satisfying. Really wish I could do another one!
| mungoman2 wrote:
| You can! "Play older games" at the bottom of the page.
| HanClinto wrote:
| Did you see the list at the bottom of the page? You can play
| all of the older puzzles!
| bobo_legos wrote:
| 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.
| zaphodias wrote:
| 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 wrote:
| Hahaha, I love that I could bring this memory back!
| dbojan wrote:
| implement random pic loading from ... somewehere
| nemo44x wrote:
| 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.
| mattw2121 wrote:
| Thanks for creating and sharing. I really like it. I would like a
| Easy, Hard, and Insane mode with increasing # of tiles.
| trizoza wrote:
| That's a great idea! Will add to backlog.
| radres wrote:
| I like the ideal number of clicks. But somewhat agree on sky etc.
| should come in order.
| dbojan wrote:
| implement random picture loading from ... somewhere ? (with
| proper size)
| vesinisa wrote:
| 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.
| the_cat_kittles wrote:
| another option be to have clicking the left side of the tile
| turn it counter clockwise and right side clockwise
| MikeTheGreat wrote:
| 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 wrote:
| Awesome game. I agree that left click to rotate left and
| right click to rotate right would be so much more convenient.
| uptownfunk wrote:
| Wow, really nice, relaxing. Don't bloat it, sometimes simple and
| sweet is a winner. Mobile app version would be helpful.
| somberi wrote:
| 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.
| johndhi wrote:
| Bravo
| blinding-streak wrote:
| This is great! Shared with my family. Thanks for making it.
| cambalache wrote:
| kriro wrote:
| 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).
| trizoza wrote:
| That's actually a really cool idea.
| ldoughty wrote:
| 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!
| throwaway_75369 wrote:
| 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 wrote:
| Darkreader extension works on it.
| hkon wrote:
| Very nice, can you make it so that another puzzle shows up after
| 10 seconds after completing one?
| amadeuspagel wrote:
| Nice.
|
| It looks like it's always the same picture? It would be nice if
| you could play this with a random picture.
| justusthane wrote:
| 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.
| halftheopposite wrote:
| 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 wrote:
| 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 wrote:
| 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.
| sbf501 wrote:
| No. I do NOT want to "Stop Confetti" thank you very much.
| bombcar wrote:
| This is nice. I just liked clicking to see the cat.
| trizoza wrote:
| Thanks! Glad you liked it!
| rwky wrote:
| That is one chilled out cat
| flapjaxy wrote:
| Am I missing how you reshuffle to play another round?
| iandanforth wrote:
| Perfect on first try. I will now never play again to maintain my
| overspin rating of 0.
| s0teri0s wrote:
| 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.
| 6LLvveMx2koXfwn wrote:
| I did it in 27 clicks, page says minimum is 29.
| 6LLvveMx2koXfwn wrote:
| er, no I didn't 29, missed one in the mountains to the right.
| Now confetti.
| WesleyJohnson wrote:
| Far right, row 2? That one got me as well.
| permo-w wrote:
| 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
| searchableguy wrote:
| Sorry OP but this triggers my captcha hell trauma on the internet
| using a VPN for privacy.
___________________________________________________________________
(page generated 2022-11-23 23:00 UTC)