[HN Gopher] Show HN: Bubbles, a vanilla JavaScript web game
___________________________________________________________________
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/ and share the levels here or
via Github.
Author : ehmorris
Score : 104 points
Date : 2025-03-13 17:48 UTC (5 hours ago)
(HTM) web link (ehmorris.com)
(TXT) w3m dump (ehmorris.com)
| boutell wrote:
| Looks neat... can't drag the ball in linux chrome (dragging works
| for me elsewhere), maybe I'll try later on my phone.
| colecut wrote:
| same problem on macOS chrome
| ehmorris wrote:
| You've gotta move your mouse at least 36 pixels within the
| first ~200 ms. You might be pulling it too slowly.
| PonyoSunshine wrote:
| Same problem for me. MacOS/Firefox.
| simpaticoder wrote:
| 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!
| 90s_dev wrote:
| 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/
| ehmorris wrote:
| Thanks! 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 wrote:
| I 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 wrote:
| Great onboarding. Super smooth. Why isn't there a try again even
| if you succeed. Congrats
| mjburgess wrote:
| 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.
| ehmorris wrote:
| Yes 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 wrote:
| Perhaps 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 wrote:
| I 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 wrote:
| It's easier on desktop if you stick with slingshots and make
| your window fairly narrow
| flanbiscuit wrote:
| > 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 wrote:
| 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
| higgins wrote:
| Good old fashioned addiction
| EstanislaoStan wrote:
| I beat Bubbles! 368 over par overall
|
| https://ehmorris.com/bubbles
|
| Tapped 8 times: 2 hits, 6 misses Launched 444 slingshots
| Detonated 55 blasts
| ehmorris wrote:
| A slingshot tank! Did you like the fireworks?
| SamBam wrote:
| 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...
| megadata wrote:
| I had exactly the same experience.
| lukevp wrote:
| Same as well! Game is fun once you get it
| 4b11b4 wrote:
| Same, thought I had to hold or pull back on a ball
| megadata wrote:
| Slick as silk! But too fast too quickly. Gimme some easy
| endorphin in the first few levels before I start struggling.
| t0k0l0sh wrote:
| Agreed, 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 wrote:
| I was on mobile, too much cortisol vs endorphin.
| al_borland wrote:
| I 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 wrote:
| Yes 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.
| neogodless wrote:
| 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!
| ehmorris wrote:
| Oh, this one is one of my favorites. If you time it right, you
| can get all six with a slingshot of the right speed.
| wkirby wrote:
| Absolutely love the sound design on this.
| ehmorris wrote:
| Me too. They're all by my friend Max Kotelchuck. He made the
| sounds for /lander too.
| nightpool wrote:
| Fun game! Getting some errors trying to set the velocity of
| balls: https://i.imgur.com/fXOJ7UT.png
| bryzaguy wrote:
| This game is so good! Played on my iPhone
| RomanPushkin wrote:
| (shameless plug) Another JavaScript you might like
| https://make210.com/ (I'm the author). Do "Restart -> Hard" for a
| challenge.
| jeffd wrote:
| Pretty slick experience from Mobile Safari!
| herczegzsolt wrote:
| Way too hard for me to be enjoyable.
| IshKebab wrote:
| Yeah it's kind of laggy too.
| Minor49er wrote:
| 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
| daniel_iversen wrote:
| 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?
| ehmorris wrote:
| This 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.
| zakki wrote:
| 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.
| hyperfuturism wrote:
| beat the game with 31 over par overall. im on an iphone 16 pro.
|
| touchscreen users have huge edge over desktop for sure.
| jrks11o wrote:
| input delay heavy on mobile browser, otherwise nice!
___________________________________________________________________
(page generated 2025-03-13 23:00 UTC)