top | item 30956775

Show HN: I made a puzzle game in HTML5

368 points| shubhamjain | 3 years ago |eightcolors.net

124 comments

order
[+] yboris|3 years ago|reply
Lovely game!

I wonder if it might be a nicer UX if you could choose for the Shift key to be needed to slide circles around rather than to move the selection. In my mind, conceptually, arrow keys are for moving the selection, and tessellating objects "requires more work" so I'd expect Shift to be needed for that - not vice-versa.

[+] shubhamjain|3 years ago|reply
It was exactly the way you describe in the earlier prototype. But I changed it based on feedback. I guess there's no set of controls that can satisfy everyone. :)

I do think you develop muscle memory for it pretty quick. Additionally, you can also use mouse, which can be convenient based on your preference.

[+] lloeki|3 years ago|reply
> In my mind, conceptually, arrow keys are for moving the selection, and tessellating objects "requires more work" so I'd expect Shift to be needed for that - not vice-versa.

Totally swapped in my mind too! I guess it's one of those "look up/down" thing in FPSs, you can learn the other way but it still does not feel as natural.

[+] mackopes|3 years ago|reply
I could imagine also a combination of arrows and wasd for controls. Arrows for moving the selection around and wasd to shift the rows/columns.
[+] Max-q|3 years ago|reply
I agree to this.
[+] emilfihlman|3 years ago|reply
100% agreed.

What's even more annoying is that the way this is currently implemented, I can't even use local overrides to change the behaviour since the site uses query strings for everything.

I am irritated and annoyed beyond measure.

[+] jsnell|3 years ago|reply
The most convenient way to play seems to be to use mouse for selection, keyboard for sliding. That would become pretty inconvenient if sliding required use of the shift key too.
[+] armandososa|3 years ago|reply
This is pretty fun. Thank you OP!

Little off-topic, though, I love how Wordle kinda opened our eyes to the possibility of doing this kind of games in the web instead off a one-off native app. I recently made a word puzzle myself[1] which some of my friends enjoy playing and there's no way I would go through the soul-crushing cross-platorm native development ordeal for such a niche little app. But it can live in the web! (and pretty much for free thanks to Netlify). I'm now thinking of dusting and old Objective-C game that I wrote 10 years ago and never released, and rewrite it on web.

Idk, suddenly I feel excited about the web, again.

[1] https://palabrije.com/en (Sorry for the self-promotion)

[+] shubhamjain|3 years ago|reply
When I was a kid, I loved a game called [James Bond Jr.](https://www.mobygames.com/game/nes/james-bond-jr/screenshots...) that had these little puzzles that were super fun to do. Some of them were hair-pulling difficult, too. I never saw a modern rendition of those puzzles, so I thought to create one.

Eight Colors is the result. The rules are simply, but puzzles do get challenging after few levels.

Hope HN likes it! Happy to hear any feedback!

[+] breckinloggins|3 years ago|reply
Now that's an unexpected memory! Do you remember watching a TV cartoon by the same name?
[+] staffordrj|3 years ago|reply
Reminds me of Yoshi's Cookie, but way cleaner. Great job!
[+] esperent|3 years ago|reply
I like it - reminds me of a 2d rubix cube.
[+] pacaro|3 years ago|reply
I love it. At some point for me, there seemed to be a bug, circles started disappearing
[+] brendanmc6|3 years ago|reply
Same here. Game breaking bug on level 5. iOS Chrome. Swipe up a few times on a column and a circle disappears.
[+] SalmoShalazar|3 years ago|reply
Same bug here, it breaks the puzzle completely. I’m using Safari on an iPhone.
[+] aklein|3 years ago|reply
Same, sometimes circles won’t reappear from the opposite edge boundary
[+] croes|3 years ago|reply
Same here, level 2 on Chrome Android
[+] Palmik|3 years ago|reply
I thought about a this game in the past, unfortunately it has a very simple to follow algorithm -- much simpler than that of a rubik's cube -- which does not make it that satisfying to play in my opinion.

1. Select arbitrary row and column. Use this row & column to arrange all other rows and columns.

2. Arrange the last row & column. This is always possible and should take <= 20 steps, left as an exercise to the reader :)

[+] xfour|3 years ago|reply
Are you doing anything with the back button behavior I’m not able to return to the previous site on mobile safari. It’s quite frustrating.

Other than that it seems nice and responsive. The popups for level complete are immersion breaking, perhaps a little more subtlety there.

[+] shubhamjain|3 years ago|reply
It wasn't my intention to hijack back button. I was merely pushing the links to the current level, so that it's easier to share the level you're playing. But it does seem there's a better way to do it. The URL itself can be changed without modifying the history[1]. I will push a fix soon for this.

[1]: https://developer.mozilla.org/en-US/docs/Web/API/History/rep...

[+] redundantly|3 years ago|reply
This is called hijacking the back button and it's an extremely irritating practice.
[+] tonetheman|3 years ago|reply
I like it. I do not like the back button behavior though.

I might see if you can fix that at some point in the future. You probably have other things to fix first. Great idea though.

[+] agust|3 years ago|reply
Nice game! As others have mentioned, it feels like a 2D rubix cube, which I never managed to finish. Feeling more comfortable with this version.

I'd love it if it could be installed on the homescreen on mobile, with proper icon, splash screen and opening in standalone mode (i.e. not in the browser). I also sometimes trigger text selection on the grid or buttons, would be good to prevent it with `user-select: none`.

[+] dataspun|3 years ago|reply
Fun but I’m encountering bugs or unexpected behavior. Circles disappear for no reason and then become immovable and/or impact other rows/columns inexplicably. iOS Safari
[+] h-c-c|3 years ago|reply
Very cool! Like a 2D Rubick's cube.

Fyi, on mobile Firefox/ Android, the address bar obscures part of the legend.

[+] thewebcount|3 years ago|reply
This looks fun, but I want to walk you through what I did when I saw the page. I started clicking on circles thinking I could move them by clicking. I saw the key commands, but thought, "No, I'd rather use the mouse. I'm not one of these power users that uses the keyboard for everything." But I couldn't click and drag. I could only click to select and then nothing would happen. You should make it more clear that the user needs to use the keyboard for anything to happen. Either that or ignore the mouse so the user says to themself, "Oh, this only works with the keyboard." As it is now, it's just really really confusing to a new user who isn't obsessed with always using the keyboard.
[+] gricardo99|3 years ago|reply
great game. It's like 2D rubix cube, which for me at least is a great way to actually understand how to solve it, in little pieces, rather than struggling with the whole cube solution. I just never had the spatial intuition for the 3D game to enjoy working on it much.
[+] ryeguy_24|3 years ago|reply
Is this supposed to happen or bug? https://pasteboard.co/1I94J2XqwJvI.png
[+] shubhamjain|3 years ago|reply
It's a known bug. But haven't been able to identify the root cause. Probably some race condition. I will fix it, but you can refresh too, which should resume the game from the same position.
[+] soneca|3 years ago|reply
On iPhone SE (2nd gen) the bottom is cut off and I can’t see the goal image. Neither the bottom two buttons. Also can’t scroll.
[+] Skiiing|3 years ago|reply
Yes, doesn't work on iPhone SE (1st gen) or any iPhone set at larger text size (which is a similar resolution). Unfortunately many websites are not testing for this screen resolution any longer.
[+] Jaxan|3 years ago|reply
I have the same problem. But it seems like a very nice puzzle!
[+] the_arun|3 years ago|reply
I liked the experience. Did HTML 5 ease the development? What are the things that came with HTML 5 that simplified your code?
[+] linux2647|3 years ago|reply
This is very fun! However, on iPhone SE-sized screens, it’s not possible to see the entire target pattern, nor is it possible to scroll down so the browser chrome (Mobile Safari) gets in the way. I got the first level by guessing
[+] yathern|3 years ago|reply
Nice! Fun little game - very similar skill curve to slide puzzles, where at first it's a little mind bending to try to move things where you want without disrupting the rest - but once you get the hang of it, it becomes very simple. Solving row-by-row top to bottom, and then doing a quick muscle-memory swap of the bottom positions if needed means any combination can be solved trivially in <1 min.
[+] spencerchubb|3 years ago|reply
I like it! It's very similar to 15-Puzzle. I subscribed so I can do this in my daily puzzle routine with wordle and quordle :)
[+] smithza|3 years ago|reply
This is very fun. I get tripped up where my "control" line is and often make mistakes because the "control" line is not moving with the direction. For example, a shift to the left leaves my mind assuming the y-control line would move left as well so I could make a subsequent down shift on that column.
[+] happimess|3 years ago|reply
Cool! Adding to the feature requests, can you enable vim-like navigation? WASD is a hazy memory compared to HJKL.