Show HN: Bubbles, a vanilla JavaScript web game(ehmorris.com) 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. |
Edit: yay, beat all levels after learning I can use slingshot multiple times
https://github.com/ehmorris/bubbles/blob/de0c6c8b40328df9fcf...
https://github.com/ehmorris/bubbles/blob/main/scoreDisplay.j...
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
touchscreen users have huge edge over desktop for sure.
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...
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
Easing into the difficulty slower sounds like a good plan!
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.
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.
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
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.
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?
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>"/>
Feedback: the concept of “lives” spoils the fun for me; I’d like to retry a level without having to replay earlier ones.
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.
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.
Another fun game from the same author: https://news.ycombinator.com/item?id=35032506
I beat Bubbles! 1951 over par overall
Tapped 90 times: 0 hits, 90 misses Launched 2202 slingshots Detonated 1 blast
Tapped 8 times: 2 hits, 6 misses Launched 444 slingshots Detonated 55 blasts
I had a friend suggest a “course preview” during the countdown screen so that users can anticipate the bubbles without memorizing them.
