18 ms·
Show HN: I made a puzzle game in HTML5
- EnderShadow8 5y agoCaryKH made something similar a while ago: https://www.youtube.com/watch?v=95rtiz-V2zM https://www.youtube.com/watch?v=95rtiz-V2zM
- shubhamjain 5y agoWhen I was a kid, I loved a game called [James Bond Jr.](https://www.mobygames.com/game/nes/james-bond-jr/screenshots/gameShotId,65013/ 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 5y agoReminds me of Yoshi's Cookie, but way cleaner. Great job!
- breckinloggins 5y agoNow that's an unexpected memory! Do you remember watching a TV cartoon by the same name?
- shubhamjain 5y agoOh 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.
- psydvl 5y agoYou should check Chuzzle game (as I remember puzzles opens after some gameplay) https://store.steampowered.com/app/3310/Chuzzle_Deluxe/ https://store.steampowered.com/app/3310/Chuzzle_Deluxe/
- esperent 5y agoI like it - reminds me of a 2d rubix cube.
- happimess 5y agoCool! Adding to the feature requests, can you enable vim-like navigation? WASD is a hazy memory compared to HJKL.
- robbiejs 5y agoNice work, fun game! (maybe tell user to use arrow keys, I was trying mouse buttons)
- isawczuk 5y agoNot sure if it's a bug, but sometimes single circle stuck and is not moveable
- raldi 5y agoSometimes 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 5y agoi believe it's a bug. i was able to get several circles to stack and a solution became impossible
- xfour 5y agoAre 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.
- redundantly 5y agoThis is called hijacking the back button and it's an extremely irritating practice.
- kevsim 5y agoOr 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 5y agoThat'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 5y agoHijacking is deliberate.
- tonetheman 5y agoI 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 5y agoAfter 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?
- alecst 5y agoSuper 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 5y ago2. Shift + arrow keys
- staffordrj 5y agoI kinda wish the arrow keys defaulted to moving the highlighted portion and you had to hold shift to move them.
- mcphage 5y agoI agree
- the_arun 5y agoI liked the experience. Did HTML 5 ease the development? What are the things that came with HTML 5 that simplified your code?
- yboris 5y agoLovely 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.
- Max-q 5y agoI agree to this.
- jsnell 5y agoThe 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 5y agoI'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.
- shubhamjain 5y agoIt 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.
- yboris 5y agoOh 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 ;)
- LordDragonfang 5y agoPerhaps just add a toggle as to what behavior the shift key has? It's just a boolean value, after all.
- linux2647 5y agoThis 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
- jfmc 5y agoFeels like a flattened Rubik cube... Nice!
- pacaro 5y agoI love it. At some point for me, there seemed to be a bug, circles started disappearing
- aklein 5y agoSame, sometimes circles won’t reappear from the opposite edge boundary
- VerminOctopus1 5y agoSame bug here, it breaks the puzzle completely. I’m using Safari on an iPhone.
- brendanmc6 5y agoSame here. Game breaking bug on level 5. iOS Chrome. Swipe up a few times on a column and a circle disappears.
- Underphil 5y agoSame here.
- croes 5y agoSame here, level 2 on Chrome Android
- h-c-c 5y agoVery cool! Like a 2D Rubick's cube. Fyi, on mobile Firefox/ Android, the address bar obscures part of the legend.
- liamkf 5y agoI'm getting a redirect error in desktop Firefox. Could just be a lot of people playing and the server having trouble!
- ojiwan 5y agoGreat job! This is cool.
- gideonred 5y agoNice! Btw, this works in Replay, in case you want to debug it sometime: https://app.replay.io/recording/eight-colors--a98e8ee6-8e35-41af-bf6d-7fc74723271d https://app.replay.io/recording/eight-colors--a98e8ee6-8e35-...
- kizer 5y agoIs that your tool? Do you use puppeteer on the backend or similar?
- geku3 5y agoNice 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).
- smithza 5y agoThis 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.
- Beltiras 5y agoNice 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.
- spencerchubb 5y agoI 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 :)
- danaris 5y agoHey, 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.
- qporest 5y agoAfter 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!
- andai 5y agoDoes it work on phone? I can drag the circles around but nothing else seems to happen.
- gdgh 5y agocool!
- wunderlust 5y agoVery cool! Gets me thinking about Rubik's Cube in different topological spaces.
- ggerganov 5y agoIs 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!
- esnard 5y agoI 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.
- sltkr 5y agoAll 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'.
- the_other 5y agoIn 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
- Air320 5y agoAwesome!
- armandososa 5y agoThis 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 https://palabrije.com/en (Sorry for the self-promotion)
- shubhamjain 5y agoThis 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 https://en.wikipedia.org/wiki/15_puzzle
- armandososa 5y agoIt'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 :)
- beaconstudios 5y agoI think 2048 was the first game I remember to be popular and Web based.
- armandososa 5y agoYou'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.
- gricardo99 5y agogreat 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.
- 6510 5y agoI hope programming one day looks like this
- tiborsaas 5y agoWe kinda already have this with dependency hell :)
- deleted 5y ago[deleted]
- yathern 5y agoNice! 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.
- fabiom 5y agoThe 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!
- layer8 5y agoThis 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.
- deleted 5y ago[deleted]
- agust 5y agoNice 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`.
- ryeguy_24 5y agoIs this supposed to happen or bug? https://pasteboard.co/1I94J2XqwJvI.png https://pasteboard.co/1I94J2XqwJvI.png
- shubhamjain 5y agoIt'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 5y agoThis 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.
- vivegi 5y agoNice game. Loved it!
- soneca 5y agoOn 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.
- g4zj 5y agoFun 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.
- mauveforest 5y agoKeeping track of how many moves you did would be cool. It would be fun to try get as low of score as possible.
- warent 5y agoPretty fun although on Android Firefox occasionally colors will get stuck or vanish
- martin1975 5y agoQuite 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 5y agoHow 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!
- deleted 5y ago[deleted]
- glerk 5y agoGreat work! Simple and elegant. Makes me thinking of a simplified Rubik's cube.
- mdoms 5y agoCool game. Lose the email nag screen.
- flockaroo 5y agoaddictive! ...played all levels, really nice!
- tonmoy 5y agoSuper fun to play on iPhone browser. However I can’t see the target pattern on my old iPhone 7 :(
- runekaagaard 5y agoSuper 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 ;)
- Xevi 5y agoI'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.
- lxgr-linux 5y agoThat's a great project, but a mute button would be really nice.
- ioseph 5y agoCan'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
- carlos-menezes 5y agoThe game is plenty of fun. Well done.
- the42thdoctor 5y agoAwesome! It looks like rubik's cube in 2D.
- h0l0cube 5y agoI'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
- barbs 5y agoCool 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!
- farzher 5y agol hate this type of sliding puzzle. but the site is very nice. it's alike a rubik's cube for babies
- Palmik 5y agoI 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 :)
- SubiculumCode 5y agoI'm getting a bug where my blocks start disappearing :android
- ipdashc 5y agoOK, anyone else unable to get past level 2?
- Bilal_io 5y agoI was able to get to level 12, then I needed to stop myself. What about level 2 that seemed off?
- dataspun 5y agoFun 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
- ipiz0618 5y agoI love this, so creative and fun to play!
- stormouse 5y agoGreat game, I've enjoyed it so much!
- mapster 5y agoThank you. Instant gratification with easy mode. Some Minecraft-esque muzak would be a nice touch to help one relax.
- davidjhall 5y agoIs the site down? I had a streak for a while but now I just have a blank screen ( on mobile and desktop).