8 ms·
Show HN: Bubbles, a vanilla JavaScript web game
Hey everybody, you might remember my older game, Lander! It made a big splash on Hacker News about 2 years ago. I'm still enjoying writing games with no dependencies. I've been working on Bubbles for about 6 months and would love to see your scores.
If you like it, you can build your own levels with my builder tool: https://ehmorris.com/bubbles/builder/ https://ehmorris.com/bubbles/builder/ and share the levels here or via Github.
- jsherwani 2y agoit would be nice if i could save my progress at every level so i could just keep working on one level at a time.
- boutell 2y agoLooks neat... can't drag the ball in linux chrome (dragging works for me elsewhere), maybe I'll try later on my phone.
- colecut 2y agosame problem on macOS chrome
- ehmorris 2y agoYou've gotta move your mouse at least 36 pixels within the first ~200 ms. You might be pulling it too slowly.
- PonyoSunshine 2y agoSame problem for me. MacOS/Firefox.
- simpaticoder 2y agoReally cool stuff, ehmorris. Your work harkens back to the early days of the web when bundlers and minifiers were the exception, rather than the rule. Work like this can really help beginners understand how powerful vanilla JavaScript can be by just looking at your source! One neat thing you can do is embed an SVG favicon in your html page, which will be properly rendered at all resolutions on all major browsers - plus it saves another sub-resource request. Here is the favicon at https://simpatico.io/svg https://simpatico.io/svg <link id="favicon" rel="icon" type="image/svg+xml" href="data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'> <rect width='1' height='1' fill='DodgerBlue' /> </svg>"/> This can help you make your already clean source even cleaner and delete some subresources. Cheers!
- 90s_dev 2y agoYour source is nice and clean[1]. No dependencies is a wonderful goal. Status quo is inherently always against innovation. I like the approach the Go team took of rethinking new solutions from first principles, and I hope you got to experience the joy of that in this project. [1] https://github.com/ehmorris/bubbles/ https://github.com/ehmorris/bubbles/
- ehmorris 2y agoThanks! Writing the game has been really fun and I’m proud of the codebase. It’s therapeutic to work on it because I get to skip all the frustrating parts of web dev like writing config files.
- mjburgess 2y agoI think you'd gain clarity from `export function` and `function` over the anonymous fn + const style -- which seems a little like zig? And the getter/setter system: I dont see a reason for over `{getHeight: () => height}` over `return {height, weight}` ? Since canvasManager is mostly just data properties, you could also destructure those inline to funciton parameters, ie., function drawX({ctx, height, width, scale}) etc.
- bosky101 2y agoGreat onboarding. Super smooth. Why isn't there a try again even if you succeed. Congrats
- mjburgess 2y agoA touchpad seems to really cripple the gameplay -- one idea could be to ask what device players are using and make slight adjustments. For touchpads, moving the cursor is slower, and the drag-pull mechanism doesnt really work -- and its easy to misclick a drag. Some rougelike mechanics would also make it possible to naturally level the gameplay -- ie., the more failures a person has the more metaprogression they get, so worse players unlock a natural easy mode.
- ehmorris 2y agoYes desktop is extra challenging. On mobile you can spam slingshots with all 10 fingers but on desktop you’ve got to be leet fast.
- mjburgess 2y agoPerhaps create mirrored slingshots with keys? ie., if I hold a,s,d,f,g then I get 5 mirrors of my touchpad, and holding eg., a/g places two at the edges?
- dylan604 2y agoI walked through the demo thinking that was a decent demo. Then round 1 and nothing was the same. I was playing with a magic touch mouse, and have decided it was not designed for that interaction. Assuming designed for mobile and us desktop users are just square pegging a round hole.
- ehmorris 2y agoIt’s easier on desktop if you stick with slingshots and make your window fairly narrow
- flanbiscuit 2y ago> and the drag-pull mechanism doesnt really work Doesn't work for me at all on both Firefox and Chrome (latest versions for both) on MacOS using the touch pad. I can't get past that screen on my laptop. Had to open it up on my phone to see what comes after. Otherwise it's a fun challenging game
- owebmaster 2y agoBeautiful JS code, happy to see this after people started to create DOOM using TypeScript types. Edit: yay, beat all levels after learning I can use slingshot multiple times
- higgins 2y agoGood old fashioned addiction
- EstanislaoStan 2y agoI beat Bubbles! 368 over par overall https://ehmorris.com/bubbles https://ehmorris.com/bubbles Tapped 8 times: 2 hits, 6 misses Launched 444 slingshots Detonated 55 blasts
- ehmorris 2y agoA slingshot tank! Did you like the fireworks?
- SamBam 2y agoNice. It took me a few times to realize that I could do bombs or slingshots by clicking in empty space. The tutorial makes it look like you have to click on a bubble. Maybe the black circle in the tutorial should be removed? I also got a little confused in the beginning about par vs lives. At first it seemed like par was the only important thing, since that's what pops up after the level. The lives icon at the bottom wasn't particularly noticeable to me. I just kind of figured there were only N levels, until I finally realized that dropping bubbles was making me lose lives. Edit: Oh, and you can multi-touch and set off multiple slingshots at once! Secrets secrets...
- megadata 2y agoI had exactly the same experience.
- a1r 2y agoThis. The 'black circle' in the tutorial is no good, maybe a dotted circle instead to make it clear you're supposed to be tapping empty space and not a black bubble.
- phaedryx 2y agoSame. When the game started I was looking for a black circle to use against the "bubbles"; none showed up, and suddenly I had lost.
- megadata 2y agoSlick as silk! But too fast too quickly. Gimme some easy endorphin in the first few levels before I start struggling.
- t0k0l0sh 2y agoAgreed, perhaps it's easier on a mobile device but I found the first two levels after the tutorial way to fast using a touchpad and left a little frustrated :-( Easing into the difficulty slower sounds like a good plan!
- megadata 2y agoI was on mobile, too much cortisol vs endorphin.
- al_borland 2y agoI was on mobile and it felt like by the time I saw what was happening I was already losing. Very little reaction time available. I thought maybe it would be easier on a desktop, but I guess not.. maybe with a mouse instead of a trackpad. Or maybe the author is going for the flappy bird effect. Make it punishingly hard, so players celebrate hitting level 4. But I didn’t have the same intant addiction as I did with Flappy Bird. Probably due to more complex gameplay and each level having 3 ways to play it.
- ehmorris 2y agoYes if you don’t already know where the bubbles are gonna fall it’s very hard to get to them in time with a trackpad. Although I play with a trackpad myself and can beat most levels. I had a friend suggest a “course preview” during the countdown screen so that users can anticipate the bubbles without memorizing them.
- al_borland 2y agoI replayed it some more and I improved with each go. It’s kind of like older games, where the levels have to be learned over time to get good. I think we’ve forgotten about that with the more gentle on-ramp most games give these days.
- neogodless 2y agoI really don't understand the 4th level. Is it much easier on a touch screen? With a mouse I can't seem to intuitively set off a rocket or whatever that can get the cascading falling balls!
- ehmorris 2y agoOh, this one is one of my favorites. If you time it right, you can get all six with a slingshot of the right speed.
- deleted 2y ago[deleted]
- wkirby 2y agoAbsolutely love the sound design on this.
- ehmorris 2y agoMe too. They’re all by my friend Max Kotelchuck. He made the sounds for /lander too.
- nightpool 2y agoFun game! Getting some errors trying to set the velocity of balls: https://i.imgur.com/fXOJ7UT.png https://i.imgur.com/fXOJ7UT.png
- bryzaguy 2y agoThis game is so good! Played on my iPhone
- RomanPushkin 2y ago(shameless plug) Another JavaScript you might like https://make210.com/ https://make210.com/ (I'm the author). Do "Restart -> Hard" for a challenge.
- jeffd 2y agoPretty slick experience from Mobile Safari!
- herczegzsolt 2y agoWay too hard for me to be enjoyable.
- IshKebab 2y agoYeah it's kind of laggy too.
- Minor49er 2y agoKind of makes me think of the trip-out sequence you get on https://packardbell95.com/fortune/ https://packardbell95.com/fortune/ after you drink the soda, if you pop all of the carbonation bubbles on the page by clicking on them, you get made fun of in a pop-up for wasting your time
- daniel_iversen 2y agoWow, incredible work! It seems quite novel to me and was super fast to learn and instantly fun to play! Did you consider wrapping it in a mobile mobile app to try and make a few bucks?
- ehmorris 2y agoThis is my “finally try to make something real with AI” project that I have yet to do. I have no native experience. Both for this and ehmorris.com/lander.
- daniel_iversen 2y agoOh don't misunderstand me, the game is really amazing and I don't think it has to be actually native at all - just pondering whether you might want to get it in the hands of more people and get some economic benefits from the great work you've done is all! :)
- zakki 2y agoIn my phone, Samsung A14 5G, I have to touch screen below falling bubble to blow it. If I touch the exact location, it is too late.
- simbas 2y agoSame on pixel 6a
- ehmorris 2y agoOh no. That will make the whole game frustrating. I actually recently made a change to try to mitigate this so I’m sad to hear it’s still an issue. I take the pointer position on pointerdown and pointerup, and do collision detection both times. Then I pop the underlying bubble in either case, giving you the benefit of the two possible pop locations.
- hyperfuturism 2y agobeat the game with 31 over par overall. im on an iphone 16 pro. touchscreen users have huge edge over desktop for sure.
- jrks11o 2y agoinput delay heavy on mobile browser, otherwise nice!
- ehmorris 2y agoAh bummer. Some phones struggle because the bubbles are pre-generated bitmaps drawn each frame.
- redbell 2y agoA pleasant game, love it! Also, the name Bubbles reminds me of: https://news.ycombinator.com/item?id=33566924 https://news.ycombinator.com/item?id=33566924 Another fun game from the same author: https://news.ycombinator.com/item?id=35032506 https://news.ycombinator.com/item?id=35032506
- ricardobeat 2y agoReally nice interactions. A bit too fast paced for my iPhone Mini, and I have no idea what this “par” and “bogey” stuff means (is it golf lingo?), but looks promising!
- TZubiri 2y agoIn desktop, dragging outside of the square canvas (and of course outside the windows) doesn't quite work. I wonder how you would fix this, I think you could "capture" the cursor, and use esc to return it, not sure if that works in the browser.
- fyrn_ 2y agoI want to be able to replay a level, don't force me into the next level.
- hakaneskici 2y agoYour code is such a fresh air after being subject to a decade of bloat. Thanks.
- stevage 2y agoReally well built, and I love the tutorial... BUT Jeepers, it starts off so hard compared to the tutorial. 1. I was not expecting bubbles to move (since they are all static in the tutorial). 2. I wasn't expecting a golf/par scoring thing. 3. I didn't realise you could (and should) start powering up during the countdown at the start. 4. Took me a long time to realise you can just click quickly to create bubbles, without having to do the aim-and-shoot thing. 5. Straight away I felt like I was being insulted by having my score described as "Disaster" etc. 6. There's no way to get back to the tutorial. So overall, I'd say: - there are fun mechanics here - it's good there is a tutorial - but the tutorial did not prepare me for the game - the game felt too hard too quickly and mean
- BizarroLand 2y agoOne more kibitz, each level should give you the option to replay at the end so you can hone your skills, and only your best score should carry over.
- jefflroberts 2y agoI came to the comments for the very same reason. I feel like replaying a level until you complete it should be mandatory or at least optional.
- putzdown 2y agoYes, as other commenters have said, this game is a great example of the design error where the tutorial careful prepares the player for not-this-game. There’s another game out there somewhere that the tutorial has made us competent to play. Meanwhile we need a different tutorial for this game.
- EspadaV9 2y agoFun little game. As others have said, the tutorial is nice, but very misleading compared to the actual game, and the game starts way too hard. I beat Bubbles! 1951 over par overall https://ehmorris.com/bubbles https://ehmorris.com/bubbles Tapped 90 times: 0 hits, 90 misses Launched 2202 slingshots Detonated 1 blast
- latexr 2y agoHaving to restart over and over kills it for me. I’d much rather be able to repeat a level until I got it perfect then move on.
- vivzkestrel 2y agoso what are those bubbles? divs with a border-radius of 50% that transform X and Y with random values? how is this implemented?
- ehmorris 2y agoEverything is drawn directly to canvas including the score view: https://github.com/ehmorris/bubbles/blob/de0c6c8b40328df9fcfd1fb401373060fc601eb2/ball.js#L181 https://github.com/ehmorris/bubbles/blob/de0c6c8b40328df9fcf... https://github.com/ehmorris/bubbles/blob/main/scoreDisplay.js https://github.com/ehmorris/bubbles/blob/main/scoreDisplay.j...
- tobyhinloopen 2y agoWay too fast to start with. Is it design for phones? Because on desktop it is moving way too fast
- sysashi 2y agoCool game! at first I thought it's an "aim trainer" of some sorts :D I forgot about everything (slings and bombs) besides clicking and tried to click all the way through.
- thih9 2y agoCool! Feedback: the concept of “lives” spoils the fun for me; I’d like to retry a level without having to replay earlier ones.
- anentropic 2y agotoo hard and when trying to do a slingshot it's easy for the mouse to go outside the app and then the shot gets stuck without firing
- blinding-streak 2y agoThe tutorial has zero in common with the actual gameplay. Why would you do that? It's not a good onboarding experience. It just creates frustration.
- hooli89 2y ago[dead]
- bhavik_dand 2y agoCool game. Tutorial is easy, but difficult to progress.
- gjohnhazel 2y agoLove this game! Took me quite a few tries to get through levels 15 & 16. But when I finally did, I was only 1 over par! 3 missed taps, 77 launched slingshots, 13 detonated blasts.
- gjohnhazel 2y agoAlso please add more levels and I’ll enjoy even more! I do think this could easily make some decent money as a mobile app.
- ehmorris 1y agoI’m glad you like it! Anyone can use the builder and submit a level suggestion through github: https://ehmorris.com/bubbles/builder/ https://ehmorris.com/bubbles/builder/