129 comments

[ 3.0 ms ] story [ 206 ms ] thread
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!

Reminds me of Yoshi's Cookie, but way cleaner. Great job!
Now that's an unexpected memory! Do you remember watching a TV cartoon by the same name?
Oh no! I don't know how we got a hold of this game. Back then, most games were pirated bundles (literally, no Indian could afford to spend $40 on a game). Somehow this was on the entry in "7 in 1" Cassette.
I like it - reminds me of a 2d rubix cube.
Nice work, fun game! (maybe tell user to use arrow keys, I was trying mouse buttons)
Not sure if it's a bug, but sometimes single circle stuck and is not moveable
Sometimes two circles get stacked on top of each other and there's a blank space where one used to be. Is that a bug or part of the unwritten rules?
i believe it's a bug. i was able to get several circles to stack and a solution became impossible
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.

This is called hijacking the back button and it's an extremely irritating practice.
Or they've made an SPA and are trying to make use of the history API and just have a bug. Don't assume bad intentions.
That's literally what that means. Most of the time it isn't intentional though, at least in the sense of preventing the user from leaving.
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.

After reading the comments, I thought back would be undo, but it doesn't seem to do that. It just triggers the game to "reload" to the exact same positions?
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...

(comment deleted)
Super fun! I love it. Just the right kind of clever.

1. How do you move the shaded lines without clicking?

2. I had to figure out the arrow keys myself. A tooltip would be helpful

3. Your solve time accumulates after retries

2. Shift + arrow keys
I kinda wish the arrow keys defaulted to moving the highlighted portion and you had to hold shift to move them.
I liked the experience. Did HTML 5 ease the development? What are the things that came with HTML 5 that simplified your code?
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.

I agree to this.
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.
I'd rather drag with a mouse instead of have to click to set location then press keys to slide. As a bonus drag would also work for touch.
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.

Oh I see! If you use the mouse to click around and arrow keys to move!

Seems like a single toggle checkbox would be enough to satisfy everyone ;)

Perhaps just add a toggle as to what behavior the shift key has? It's just a boolean value, after all.
I agree with the parent. I love the game but the controls are not fun for me. I would do the following (for ME):

- arrow keys move the cursor

- the cursor is easier to see. Just a circle is probably better for me than the overlapping shadows

- shift + arrow does the move

- the cursor follows the moved element

You could also do arrow keys for selecting column/row and wasd for moving it.
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.
hjkl for our geeky friends?
Note to self: In an HTML game engine, must have user-configurable key bindings.
Well at least just vim bindings
> 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.

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.

Cool! Adding to the feature requests, can you enable vim-like navigation? WASD is a hazy memory compared to HJKL.
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
Feels like a flattened Rubik cube... Nice!
I love it. At some point for me, there seemed to be a bug, circles started disappearing
Same, sometimes circles won’t reappear from the opposite edge boundary
Same bug here, it breaks the puzzle completely. I’m using Safari on an iPhone.
Same here. Game breaking bug on level 5. iOS Chrome. Swipe up a few times on a column and a circle disappears.
Same here, level 2 on Chrome Android
Very cool! Like a 2D Rubick's cube.

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

I'm getting a redirect error in desktop Firefox. Could just be a lot of people playing and the server having trouble!
Great job! This is cool.
Nice game! Consider using key codes instead of characters, right now to use WASD controls you have to switch language (to English or something else that uses latin alphabet I guess).
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.
Nice game! I'm not on mobile so I don't know how swipe actions work. Looks to me like it would be easy to program selecting the axis you want moved by selecting a piece in the same row/column and then swiping the direction you want it to go in.
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 :)
Hey, it's the Mesh puzzles from 3 in Three! Those were always a combination of entertaining and infuriating.

This is a neat way to implement it, too.

Does it work on phone? I can drag the circles around but nothing else seems to happen.
After finding a pattern I can use to move colors around, I think, I finally developed an intuition about the movement in Rubik's cube. I've known about solution patterns, but it didn't click until now. Thanks, I'll have to test it!
Very cool! Gets me thinking about Rubik's Cube in different topological spaces.