[HN Gopher] Show HN: I made a puzzle game in HTML5
___________________________________________________________________
Show HN: I made a puzzle game in HTML5
Author : shubhamjain
Score : 270 points
Date : 2022-04-08 13:54 UTC (9 hours ago)
(HTM) web link (eightcolors.net)
(TXT) w3m dump (eightcolors.net)
| gdgh wrote:
| cool!
| shubhamjain wrote:
| 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!
| staffordrj wrote:
| Reminds me of Yoshi's Cookie, but way cleaner. Great job!
| breckinloggins wrote:
| Now that's an unexpected memory! Do you remember watching a TV
| cartoon by the same name?
| shubhamjain wrote:
| 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.
| ojiwan wrote:
| Great job! This is cool.
| spencerchubb wrote:
| 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 :)
| tonmoy wrote:
| Super fun to play on iPhone browser. However I can't see the
| target pattern on my old iPhone 7 :(
| jciochon wrote:
| 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.
| dubcanada wrote:
| Also doesn't work on my iPhone you cannot see the pattern
| linux2647 wrote:
| 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
| gideonred wrote:
| Nice! Btw, this works in Replay, in case you want to debug it
| sometime: https://app.replay.io/recording/eight-colors--
| a98e8ee6-8e35-...
| kizer wrote:
| Is that your tool? Do you use puppeteer on the backend or
| similar?
| [deleted]
| alecst wrote:
| 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
| prettygood wrote:
| 2. Shift + arrow keys
| staffordrj wrote:
| I kinda wish the arrow keys defaulted to moving the
| highlighted portion and you had to hold shift to move them.
| mcphage wrote:
| I agree
| danaris wrote:
| 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.
| mauveforest wrote:
| Keeping track of how many moves you did would be cool. It would
| be fun to try get as low of score as possible.
| the_arun wrote:
| I liked the experience. Did HTML 5 ease the development? What are
| the things that came with HTML 5 that simplified your code?
| wunderlust wrote:
| Very cool! Gets me thinking about Rubik's Cube in different
| topological spaces.
| vivegi wrote:
| Nice game. Loved it!
| jfmc wrote:
| Feels like a flattened Rubik cube... Nice!
| layer8 wrote:
| 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.
| pacaro wrote:
| I love it. At some point for me, there seemed to be a bug,
| circles started disappearing
| SalmoShalazar wrote:
| Same bug here, it breaks the puzzle completely. I'm using
| Safari on an iPhone.
| brendanmc6 wrote:
| Same here. Game breaking bug on level 5. iOS Chrome. Swipe up a
| few times on a column and a circle disappears.
| aklein wrote:
| Same, sometimes circles won't reappear from the opposite edge
| boundary
| warent wrote:
| Pretty fun although on Android Firefox occasionally colors will
| get stuck or vanish
| ggerganov wrote:
| 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!
| sltkr wrote:
| 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'.
| esnard wrote:
| 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.
| liamkf wrote:
| I'm getting a redirect error in desktop Firefox. Could just be a
| lot of people playing and the server having trouble!
| geku3 wrote:
| 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).
| the_other wrote:
| 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
| isawczuk wrote:
| Not sure if it's a bug, but sometimes single circle stuck and is
| not moveable
| Air320 wrote:
| Awesome!
| mdoms wrote:
| Cool game. Lose the email nag screen.
| armandososa wrote:
| 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)
| imglorp wrote:
| Wow, 15 puzzle meets Wordle. Nice job.
| beaconstudios wrote:
| I think 2048 was the first game I remember to be popular and
| Web based.
| armandososa wrote:
| 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.
| shubhamjain wrote:
| 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
| armandososa wrote:
| 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 :)
| shuntress wrote:
| 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.
| cupofpython wrote:
| 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
| doodpants wrote:
| 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.
| [deleted]
| staindk wrote:
| 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.
| raldi wrote:
| 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?
| gwill wrote:
| i believe it's a bug. i was able to get several circles to
| stack and a solution became impossible
| soneca wrote:
| 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.
| Jaxan wrote:
| I have the same problem. But it seems like a very nice puzzle!
| Skiiing wrote:
| 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.
| runekaagaard wrote:
| 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 ;)
| lxgr-linux wrote:
| That's a great project, but a mute button would be really nice.
| [deleted]
| yathern wrote:
| 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.
| gricardo99 wrote:
| 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.
| xfour wrote:
| 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.
| tonetheman wrote:
| 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.
| andai wrote:
| 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?
| redundantly wrote:
| This is called hijacking the back button and it's an extremely
| irritating practice.
| kevsim wrote:
| 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.
| andai wrote:
| 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.
| robertlagrant wrote:
| Hijacking is deliberate.
| shubhamjain wrote:
| 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...
| [deleted]
| [deleted]
| h-c-c wrote:
| Very cool! Like a 2D Rubick's cube.
|
| Fyi, on mobile Firefox/ Android, the address bar obscures part of
| the legend.
| agust wrote:
| 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`.
| martin1975 wrote:
| 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?
| gbrls wrote:
| 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!
| yboris wrote:
| 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 wrote:
| 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.
| Evidlo wrote:
| You could also do arrow keys for selecting column/row and
| wasd for moving it.
| LordDragonfang wrote:
| Perhaps just add a toggle as to what behavior the shift key
| has? It's just a boolean value, after all.
| xmonkee wrote:
| 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
| yboris wrote:
| 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 ;)
| mackopes wrote:
| 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.
| throwaway744678 wrote:
| hjkl for our geeky friends?
| jsnell wrote:
| 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.
| zamadatix wrote:
| 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.
| lloeki wrote:
| > 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.
| Max-q wrote:
| I agree to this.
| flockaroo wrote:
| addictive! ...played all levels, really nice!
| glerk wrote:
| Great work! Simple and elegant. Makes me thinking of a simplified
| Rubik's cube.
| happimess wrote:
| Cool! Adding to the feature requests, can you enable vim-like
| navigation? WASD is a hazy memory compared to HJKL.
| Xevi wrote:
| 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.
| ryeguy_24 wrote:
| Is this supposed to happen or bug?
| https://pasteboard.co/1I94J2XqwJvI.png
| shubhamjain wrote:
| 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.
| thewebcount wrote:
| 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.
| smithza wrote:
| 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.
| 6510 wrote:
| I hope programming one day looks like this
| tiborsaas wrote:
| We kinda already have this with dependency hell :)
| g4zj wrote:
| 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.
| Beltiras wrote:
| 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.
| fabiom wrote:
| 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!
| andai wrote:
| Does it work on phone? I can drag the circles around but nothing
| else seems to happen.
| qporest wrote:
| 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!
| ioseph wrote:
| 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
| robbiejs wrote:
| Nice work, fun game! (maybe tell user to use arrow keys, I was
| trying mouse buttons)
___________________________________________________________________
(page generated 2022-04-08 23:00 UTC)