Past two weeks, I have been working on an HTML5 puzzle game: Eight Colors. The rules of the game are pretty simple but it does get a little challenging after the first few levels. It was super-fun to design and implement this game (not so fun though hacking around quirks of iOS Safari 😅)
Let me know what you folks think. Happy to answer any question if you have.
Top comments (51)
The look and feel is nice! Especially the added sounds. Makes it feel "clicky" which is a good thing. Good job.
Very hard to use on mobile as the screen scrolls when you swipe up and down - making it very hard to make vertical shifts. I also found that the page would sometimes go into a 'pull down to refresh' when trying to shift a column downwards.
On desktop, a better control system would probably be
arrow keysto move and
arrow keysto shift the rows and columns
Screen shouldn't scroll. Can you tell me your mobile browser?
Won't even load on Chrome right now - gets stuck in a redirect loop. Had this happen on Firefox too (desktop). Something seems amiss
Hmm. It works fine for me in Firefox
I've had the redirect loop thing a few times on both browsers. Hard to reproduce though
And your phone model?
Google Pixel 2
This is very cool! However, because I couldn't scroll to see the controls I almost clicked off because I couldn't figure out how to play! Perhaps there should be some panel on the side that when hovered shows the controls?
It looks great and is fun! Couple of UX suggestions:
On my window configuration (1 window in each corner, 4 total, on a 4k monitor), controls were below the view port and no scroll. Possible resolutions.
When it loads the next puzzle, there should be a transition. Some noticeable change on the puzzle area. Could be an quick animation or just resetting the highlighted row/col back to default. It took me a second to realize the puzzle was different after I hit next puzzle.
Touch/mouse controls. Example: when the mouse hovers over a piece, that should be the highlighted row/col. When they drag, that should be the direction the row or col moves. I'm sure I would get used to the keyboard controls if I played a lot, but they were awkward for me. Even up to the finish I was mistakenly shifting a row/col before I selected it. Even as a keyboard/mouse gamer. Once you get mouse controls working, there won't be a need to display the row/col highlights unless someone starts using the kb controls.
Make the timer optional. For me puzzles are relaxing. Nothing kills that like a timer. When the timer is off, use alternate scoring goals like minimum number of moves. It's probably a good idea to do multiple goals anyway to cover different kinds of players.
In all this is a great game with a lot of potential. I can imagine larger grids, wild card colors, fixed pieces that can't be moved. And other kinds of mechanics to keep the puzzles interesting. I'd probably spend too much time playing it.
I have made fixes that should address most of the issues you listed. Thank you for the feedback.
Regarding timer optional, I will look into it.
good to see you made all those different functionalities with html. later i will look at your code and steal some of it.
as a game. i dont play that. it is too difficult and time wasting.
works well on safari, ios, ipad. tested.
The game is fun and looks really good! I suggest adding the #showdev tag as well, as it's meant for showcasing cool things you've built.
My biggest feedback is it would be cool if you could manipulate the grid with the mouse kind of like how you can swipe on a phone.
Thank you, I have added the tag. Regarding mouse controls, it will get tiring very quick to move the mouse around and clicking and dragging. Keyboard controls do take some time to click, but they do.
I liked it, but it's hard to use on the french AZERTY keyboard as WASD isnt at the same position. It make it hard to move column or row
I have pushed an update that allows more flexibility around controls.
Woaw, that already more easy. It's not very instinctive for a first try but it could be okay over time
👍🏻👍🏻👍🏻👍🏻👍🏻 very nice game i like it
Sometimes, one of the bubbles vanishes. Otherwise, nice one.
Does it happen on Phone/desktop? Any way to reproduce?
Chrome 100 on Android. It's an intermittent issue; I've only seen it happen on the outer border. Is it open source?
Really awesome! Very well implemented! Well done!
Look and feel is super smooth!
Played in desktop, fun to play :)
Fun puzzle. The controls on PC feel awkward. I'd prefer arrow buttons on the rows and columns or click and drag
Very nice game!
I'm on Brave on mobile and everytings looks very good.
Very nice game, I'm on a macbook in chrome and the instructions don't show up at the bottom.
Very smooth animations aswell.
can you please elaborate the rules ?