Show HN: I made a puzzle game in HTML5 | Hacker News Reader

Show HN: I made a puzzle game in HTML5

eightcolors.net

368 pointsshubhamjain124 comments

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.

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)

This game is kind of nice. A clever variation of 15-Colors[1]. Problem though is that "15 Puzzle" is a pretty challenging puzzle in itself. Adding complexity of Wordle, makes it very hard. I see some potential in concept but it has to be made a bit easier to tackle.

[1]: https://en.wikipedia.org/wiki/15_puzzle

It's actually easier than 15-colors (I didn't knew the name since I grow up in Mexico, thanks!) because the letters repeat so it's harder to get yourself in unsolvable positions. But I observed that many people stop playing once they guess the words, seems like solving the puzzle is way harder than guessing the words.

Like I said, a pretty niche game :)

I think 2048 was the first game I remember to be popular and Web based.

You're 100% right. But I would say that Wordle's success is unprecedented for web games. But I think it's part of the viral nature of the color squares tweets tbh.

I distinctly remember half a decade or so of flash games.

Me too, but I meant HTML5 games with mass appeal.

I very strongly dislike the user experience in Electron apps but I know the tradeoff for portability is worth it.

It's a good example that highlights the importance of both user experience and developer experience. It doesn't matter that the native implementation would be "better" if it's impractical to actually do.

For mobile apps small devs can't even go down the native road any more without the risk you'll be banished without recourse from the app store for "reasons"

Wow, 15 puzzle meets Wordle. Nice job.

I haven't actually tried it, but when I was getting into Flutter/Dart for a small Android project it seemed like (from what I saw online) it would be very simple to build a web version from the same code that generated the APK. Of course for more intricate apps this would likely not hold true.

Had quite a good time with Flutter even if it was just a week of tinkering.

is it possible there is a bug with duplicate letters? or rather the implication of them when there is none?

I ended up in a situation with MMNNA all colored on the same row. AFAIK there is no word for that

I feel like there was a lot of this sort of thing on the web back in the late 90's and early 2000's, first as Java applets and then as Flash apps.

Nice work! The letters are very blurry on Android Chrome, could be an anti-aliasing issue maybe

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.

You should check Chuzzle game (as I remember puzzles opens after some gameplay) https://store.steampowered.com/app/3310/Chuzzle_Deluxe/

I like it - reminds me of a 2d rubix cube.

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.

Same here, level 2 on Chrome Android

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

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.

Hijacking is deliberate.

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

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

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

Very cool! Like a 2D Rubick's cube.

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

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.

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.

Is this supposed to happen or bug? https://pasteboard.co/1I94J2XqwJvI.png

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.

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.

I have the same problem. But it seems like a very nice puzzle!

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.

I liked the experience. Did HTML 5 ease the development? What are the things that came with HTML 5 that simplified your code?

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

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.

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

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.

Cool! Adding to the feature requests, can you enable vim-like navigation? WASD is a hazy memory compared to HJKL.

Nice! Btw, this works in Replay, in case you want to debug it sometime: https://app.replay.io/recording/eight-colors--a98e8ee6-8e35-...

Is that your tool? Do you use puppeteer on the backend or similar?

Super fun to play on iPhone browser. However I can’t see the target pattern on my old iPhone 7 :(

Also doesn’t work on my iPhone you cannot see the pattern

If you tap the page options (the ‘Aa’ icon in the url bar) you can zoom the page out which will bring everything into view.

Cool game! One thing I found a little jarring was the popup that appears when you complete a puzzle. I feel like when completing a puzzle it'd be nice to see the finished result, at least for a short amount of time, before seeing the popup. But well done!

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.

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!

Not sure if it's a bug, but sometimes single circle stuck and is not moveable

The place where this game is played is the two-dimensional torus (exactly like in asteroids), since the vertical and horizontal limits are connected. I think it's a nice way to get intuitions about the torus!

Fun game! I may have found a potential bug, however.

When replaying a level, the timer doesn't seem to properly reset. It will initially display "00m 00s", but then pick up where the previous attempt left off.

I'm really interested in knowing if your used any frameworks or libraries for this game, and if that's the case, which ones? I'm on my phone now so I can't easily check your source.

CaryKH made something similar a while ago: https://www.youtube.com/watch?v=95rtiz-V2zM

I'm on an iPhone 7 and I can't scroll down to see the target configuration. Always good to develop against smaller form factors if you're releasing to a wide audience

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

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 agree

This is interesting. I was able to solve all the puzzles intuitively, but still have no idea how the game’s algebra works :), i.e. I couldn’t write a program to do it.

How do you do such smooth animations with HTML5? Are those CSS animations? I'm really bad at web dev and always wonder how some good webapps were done, good job!

Super great, like the way shift works :)

Super fun to speedrun, has level 8 down to 3 seconds - would be nice if the counter also reset when you press reset.

edit: oh and miliseconds on the counter ;)

Is lvl 23 solvable?

I quickly solved 7 levels and then tried doing lvl 23 and have been stuck on it for 10 minutes, always ending up with 2 circles next to each other that I cannot swap.

Cool game!

I just completed it, so it's definitively solvable.

If you're stuck, try restarting the level? Or try swapping identical letters, f.e. two "G", it might unlock you.

All permutations are solvable.

To swap two horizontally adjacent elements and leave the other cells unchanged, place the cursor on the left element and enter 'dsdwdsddw'.

Can't scroll down on my phone to see the pattern I'm aiming for, I'd suggest just listening to drag events on the circles themselves

Quite a fun brain teaser game! BTW, when you say HTML 5- I am assuming the use of Javascript - since HTML5 is merely a document markup spec?

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.

In desktop Safari 14 it

a) didn't work

b) seemed to hijack my browser history in such a way that after I returned to HN, every link on HN pointed to Eight Colours

Awesome! It looks like rubik's cube in 2D.

I'm getting a redirect error in desktop Firefox. Could just be a lot of people playing and the server having trouble!

Thank you. Instant gratification with easy mode. Some Minecraft-esque muzak would be a nice touch to help one relax.

Is the site down? I had a streak for a while but now I just have a blank screen ( on mobile and desktop).

Keeping track of how many moves you did would be cool. It would be fun to try get as low of score as possible.

Does it work on phone? I can drag the circles around but nothing else seems to happen.

Great work! Simple and elegant. Makes me thinking of a simplified Rubik's cube.

Very cool! Gets me thinking about Rubik's Cube in different topological spaces.

Nice work, fun game! (maybe tell user to use arrow keys, I was trying mouse buttons)

Pretty fun although on Android Firefox occasionally colors will get stuck or vanish

That's a great project, but a mute button would be really nice.

I'm getting a bug where my blocks start disappearing :android

OK, anyone else unable to get past level 2?

I was able to get to level 12, then I needed to stop myself. What about level 2 that seemed off?

Great game, I've enjoyed it so much!

I hope programming one day looks like this

We kinda already have this with dependency hell :)

Feels like a flattened Rubik cube... Nice!

I love this, so creative and fun to play!

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

l hate this type of sliding puzzle. but the site is very nice. it's alike a rubik's cube for babies

The game is plenty of fun. Well done.

Great job! This is cool.

Nice game. Loved it!

addictive! ...played all levels, really nice!

Awesome!

cool!

Cool game. Lose the email nag screen.

Reply on news.ycombinator.com