from Hacker News

Show HN: Bubbles, a vanilla JavaScript web game

by ehmorris on 3/13/25, 5:48 PM with 75 comments

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/ and share the levels here or via Github.

  • by SamBam on 3/13/25, 7:18 PM

    Nice.

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

  • by stevage on 3/14/25, 12:57 AM

    Really 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

  • by megadata on 3/13/25, 7:31 PM

    Slick as silk! But too fast too quickly. Gimme some easy endorphin in the first few levels before I start struggling.

  • by mjburgess on 3/13/25, 7:01 PM

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

  • by putzdown on 3/14/25, 1:22 AM

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

  • by ricardobeat on 3/14/25, 12:03 AM

    Really 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!

  • by blinding-streak on 3/14/25, 1:48 PM

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

  • by simpaticoder on 3/13/25, 6:37 PM

    Really 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

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

  • by herczegzsolt on 3/13/25, 9:37 PM

    Way too hard for me to be enjoyable.

  • by zakki on 3/13/25, 10:20 PM

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

  • by thih9 on 3/14/25, 11:29 AM

    Cool!

    Feedback: the concept of “lives” spoils the fun for me; I’d like to retry a level without having to replay earlier ones.

  • by TZubiri on 3/14/25, 12:21 AM

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

  • by RomanPushkin on 3/13/25, 8:59 PM

    (shameless plug) Another JavaScript you might like https://make210.com/ (I'm the author). Do "Restart -> Hard" for a challenge.

  • by fyrn_ on 3/14/25, 12:22 AM

    I want to be able to replay a level, don't force me into the next level.

  • by neogodless on 3/13/25, 7:34 PM

    I 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!

  • by 90s_dev on 3/13/25, 6:41 PM

    Your 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/

  • by redbell on 3/13/25, 11:13 PM

    A pleasant game, love it! Also, the name Bubbles reminds me of: https://news.ycombinator.com/item?id=33566924

    Another fun game from the same author: https://news.ycombinator.com/item?id=35032506

  • by Minor49er on 3/13/25, 9:53 PM

    Kind of makes me think of the trip-out sequence you get on 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

  • by boutell on 3/13/25, 6:14 PM

    Looks neat... can't drag the ball in linux chrome (dragging works for me elsewhere), maybe I'll try later on my phone.

  • by EspadaV9 on 3/14/25, 2:46 AM

    Fun 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

    Tapped 90 times: 0 hits, 90 misses Launched 2202 slingshots Detonated 1 blast

  • by gjohnhazel on 3/16/25, 2:37 AM

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

  • by hakaneskici on 3/14/25, 12:27 AM

    Your code is such a fresh air after being subject to a decade of bloat. Thanks.

  • by sysashi on 3/14/25, 9:20 AM

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

  • by EstanislaoStan on 3/13/25, 7:17 PM

    I beat Bubbles! 368 over par overall

    https://ehmorris.com/bubbles

    Tapped 8 times: 2 hits, 6 misses Launched 444 slingshots Detonated 55 blasts

  • by nightpool on 3/13/25, 8:38 PM

    Fun game! Getting some errors trying to set the velocity of balls: https://i.imgur.com/fXOJ7UT.png

  • by daniel_iversen on 3/13/25, 10:03 PM

    Wow, 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?

  • by gjohnhazel on 3/16/25, 2:39 AM

    Also please add more levels and I’ll enjoy even more! I do think this could easily make some decent money as a mobile app.

  • by owebmaster on 3/13/25, 7:03 PM

    Beautiful 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

  • by latexr on 3/14/25, 3:11 AM

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

  • by jsherwani on 3/14/25, 2:28 AM

    it would be nice if i could save my progress at every level so i could just keep working on one level at a time.

  • by wkirby on 3/13/25, 8:03 PM

    Absolutely love the sound design on this.

  • by tobyhinloopen on 3/14/25, 7:31 AM

    Way too fast to start with. Is it design for phones? Because on desktop it is moving way too fast

  • by bosky101 on 3/13/25, 6:53 PM

    Great onboarding. Super smooth. Why isn't there a try again even if you succeed. Congrats

  • by bhavik_dand on 3/14/25, 7:14 PM

    Cool game. Tutorial is easy, but difficult to progress.

  • by vivzkestrel on 3/14/25, 4:09 AM

    so what are those bubbles? divs with a border-radius of 50% that transform X and Y with random values? how is this implemented?

  • by anentropic on 3/14/25, 12:07 PM

    too 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

  • by jeffd on 3/13/25, 9:20 PM

    Pretty slick experience from Mobile Safari!

  • by bryzaguy on 3/13/25, 8:49 PM

    This game is so good! Played on my iPhone

  • by hyperfuturism on 3/13/25, 10:27 PM

    beat the game with 31 over par overall. im on an iphone 16 pro.

    touchscreen users have huge edge over desktop for sure.

  • by higgins on 3/13/25, 7:09 PM

    Good old fashioned addiction

  • by jrks11o on 3/13/25, 10:56 PM

    input delay heavy on mobile browser, otherwise nice!