Show HN: Bubbles - my unfinished HTML5 Particle Game

http://www.fullstackoptimization.com/bubbles/

by franze • 14 years ago

188 87 14 years ago

franze4• 14 years ago

some time ago i wanted to learn how to create a canvas games, so i started with http://www.html5rocks.com/en/tutorials/canvas/notearsgame/ and took it from there. now it's a little bit osmosis and asteroids, and it's unfinished and MIT. so please take it, fork it or just read the source. hope it's useful (and/or fun) for someone.

Wingman4l76• 14 years ago

Thanks for providing your "source" -- when I wanted to write a boardgame in Python, I followed much the same method, adapting a tic-tac-toe game demo.

entropy_• 14 years ago

Just one comment, from what I've noticed(haven't checked the code to make sure), the size of spawned bubbles is a random function biased by your current size. While I think that's a good idea in general I think they should be overall smaller.

Right now, when you get to a certain size it just spawns 4~5 giant bubbles that fill almost all the screen and make it impossible to move without dying.

Wingman4l76• 14 years ago

Like a simple, HTML5 Osmos. Not sure how Asteroids comes in. When you pass a certain threshold, the bubbles get suddenly & aggressively larger; is it actually possible to win?

franze4• 14 years ago

[space] spawns a small yellow killer bubble. yes, it's possible, but very very hard.

Wingman4l76• 14 years ago

Ah, that helps a lot. So instead of using your own mass as momentum a la Osmos, you use it as... space-mines =)

I see why you say it's a little bit of Asteroids, now. That sure puzzled me before.

Wingman4l76• 14 years ago

It appears that the yellow killer bubble circumference is proportional to your size, its takeoff vector is the same as your own, and its velocity is a slight multiple of your own.

baddox• 14 years ago

Osmos also has a lot of different and interesting mechanics. For one thing, propelling yourself requires you to eject mass in the opposite direct, which also makes you smaller. There's also antimatter bubbles that you don't want to absorb, a gravity (orbit) mechanic, green "living" bubbles which compete with you for resources, etc.

gurpreet42• 14 years ago

I like this game.

ollysb2• 14 years ago

Took a while to figure out you could "eat" smaller bubbles to grow larger, was a lot more fun after that :)

Zenst• 14 years ago

I spent the first minute clicking around with the mouse until the attempt upon the arrow keys and finaly after the spacebar the asteriod aspect kicked in and a sence ahaaaa.

I shall play some more later, though the blobing of the asteroids/blobs could perhaps also merge colour palletes as well and in that also provide some subliminal education. Maybe even volumetricaly factor in the colour merging.

I might also add that it can be more fun to learn how to play the game than just reading a manual, so in that I like it even more.

Oh and the source, that there is how I'll learn coffeescript, thank you.

maggit2• 14 years ago

Yes, it could be a lot more obvious.

In Osmos (a similar game) the coloring of the bubbles makes it much easier to distinguish which bubbles are edible and which are dangerous. I think the this rendition could be improved by getting new colors, and maybe saving red for dangerous things, and not the player :)

ilija139• 14 years ago

The ones with blue border you can eat :)

aw3c2• 14 years ago

On a height of 600px the cursor up and down keys scroll the window.

franze4• 14 years ago

this and the fact that it's very very very hard to win is where the "unfinished" part (and the forking) comes in.

highace• 14 years ago

Great concept, very frustrating!

Axsuul• 14 years ago

This game is rigged... all of a sudden this huge monstrosity comes out of nowhere from the left of the screen! It was pretty fun though.

ollysb2• 14 years ago

Rather than wrapping around it might be fun to bounce off the edges of the game area.

sebastianmarr• 14 years ago

I don't see the value of this submission. An Osmos clone in HTML 5. Great.

tsahyt• 14 years ago

It's a game. It's fun. That's the value.

gknoy• 14 years ago

Also, as mentioned above, it has code that we can read. Thanks!

Wingman4l76• 14 years ago

Looks like the trick is to use the yellow killer bubbles to control the aggressive bubbles before they eat everything & get too big to navigate around.

Aardwolf• 14 years ago

Really cool concept, but I don't like how when you get really big, bubbles the size of half the field appear, making the game unfinishable.

iamkhush• 14 years ago

Awesome game..shared with my friends ..we all loved it

mrspeaker• 14 years ago

I understand why this appeals to the HN crowd: it's a metaphor - the goal of the game is not to be the biggest around, but to survive the longest. Sometimes that means cutting loose and starting again - and just waiting for the biggest of the big to fall!

neilbowers• 14 years ago

Nice, needs a bit more complexity and slightly less frustration :-)

truebecomefalse• 14 years ago

If you hold down left and right it gets very odd. It is reproducible.

donpark• 14 years ago

To improve the endgame, I would introduce power-ups, like a pill that when 'swallowed' temporarily turns player's balloon into a triangle that could puncture large balloons into many small ones. Multiplayer with larger field and obstacles could be fun too.

MojoJolo• 14 years ago

Hi, I don't know but I think the page is not loading. Is it down?

Floopsy• 14 years ago

That's pretty cool! Good job.

oal• 14 years ago

I made something similar with the Khan Academy CS tools a while back: http://www.khanacademy.org/cs/subpixel-survival/996062559

Roelven• 14 years ago

Very nice! Do you plan to add some scores somehow? I imagine just on time would be boring, so growing and shrinking should grant you credits somehow.

Achshar• 14 years ago

The game is fun but is there any way to change the "units" of the change direction keys? Right now they seem to add up, i.e. two up strokes means speed increases by two points, but a more conventional manner would be better IMO. i.e. one up arrow moves ball in up direction. Like driving cars in games.

bobsy• 14 years ago

Something needs to be done about the end game. Currently skill doesn't make a difference. It relies on the perfect storm of you absorbing a chain of increasingly large bubbles. In 6 attempts this didn't happen as I was surrounded by huge bubbles. 4 times I was reduced to like 4 pixels and had to work my way back up again.

Perhaps a bigger playing area. Make it full screen? Then have more bubbles of varying sizes. This would make it more difficult to get bigger and make the game longer as a result.

It would also be cool if a specific color bounced bubbles off it and couldn't be absorbed. The faster you go into it the faster you bounce off. This would make it a bit more difficult to navigate.

maggit2• 14 years ago

You can shoot the bigger bubbles with the spacebar key.

Not that there's any affordance for it, so something still has to be done with the game. But the title says "unfinished", so I think we're good :)

username3• 14 years ago

I won by holding down the right arrow key and shooting until my bubble became four blinking dots.

volts• 14 years ago

I agree with full screen! Maybe rounds?

saurabh• 14 years ago

franze, this is one of the best games I've ever played. It's strangely satisfying.

Edmond• 14 years ago

if you don't mind I am going to port it to phyzixlabs.com :)

jps359• 14 years ago

I think the ball needs a speed limit. I couldn't tell if there was one. I just held the up and left arrows at the same time and just kept holding. It felt like it would've went on forever had I not x'd out.

vld• 14 years ago

This needs gravity-like behavior!

travisglines• 14 years ago

This is a really great metaphor for starting companies in winner take all markets.

    Takes a combination of luck and skill

    Speed through quick iteration to out maneuver and eventually devour the big guys

    Frequent failures due to bad starting conditions

    Partnering with the right people early on is vital

    Later on you need your acquisitions to be large enough to move the needle

    Sometimes there is really no way to oust the established player in a mature market from a small players perspective

I think maybe some signs of aging or negatory effects of size would be cool to add in.

Cool concept!

in0v8r• 14 years ago

Not to mention, letting go of some early partnerships that aren't keeping up, of which may even be detrimental to a competitor.

exolab• 14 years ago

a) Far too difficult b) Addictive c) Ouch, my fingers.

ctz• 14 years ago

This sorely needs some instructions. Tapping around the page produces no obvious results.

jcampbell1• 14 years ago

This is an amazing combination of osmos with a bit of asteroids. The game play is excellent. I really hope this gets turned into a full game with levels.

donkeylipstick• 14 years ago

Reminds me of Osmos. Nice work but you should include instructions.

jtms• 14 years ago

Are you using a framework?

franze4• 14 years ago

canvas (well, it is a framework, a native in-browser pretty low-level framework, but it's a framework. other than that? no, i just followed the instructions in this tutorial http://www.html5rocks.com/en/tutorials/canvas/notearsgame/ and took it form there)

brandoncarl• 14 years ago

Fun! Now all you need to do is put some pigs and birds in it :)

k2xl• 14 years ago

this is pretty cool, i actually built a similar game in flash a while back, the problem with the version i made (which you address here) is that it always ended up with my dot and one big ass dot. hence allowing me to win or lose very easily. with your version you not only spawn circles based on your size, but you also include shooting. nice work!

i think if you modify the shooting mechanic to work with the mouse, it would make the game a bit easier to control.

fmugs• 14 years ago

looks like a Flash game from 1999

arcatek• 14 years ago

These balls are too damn big !

Casseres• 14 years ago

Great game!

It needs a way to keep score or timer on how long you last.

It took about 10 games before I became good at it, and I had to read the comments here to figure out the space bar.

yjukaku• 14 years ago

I added

this.x_velocity * = .98;

this.y_velocity * = .98;

in the player update function. (right after line 346 of bubbles.js)

Controls become a lot easier, but that's my personal preference. You can add the lines in the chrome source inspector, then ctrl+s to save. No need to refresh :)

nicklovescode• 14 years ago

Reminds me of a super simple game I wrote a few years ago to try out processing.js - http://nickcammarata.com/processing/

kbkb2• 14 years ago

Pro-tip: turn flying things into a murmuration :-)

notJim• 14 years ago

Whoa, this game is awesome. I especially like how you can figure out ways to get the flying things trapped in the center by orbiting them carefully.

kbkb2• 14 years ago

I woke up early and then proceed to kill 30 minutes on this instead of getting to work on time :-/

crazypyro• 14 years ago

Fire a few bullets, hold right or left arrow, never die. Left it on while I went to class for an hour just to test. Still alive.

mercuryrising• 14 years ago

Nice work, reminds me of that arcade game where you eat different types of fish. There's always that anticipation that what you're trying to eat will actually eat you.

I really like how you don't have to press anything to play again. It makes me keep playing.

Bubbles of the same size should bounce off each other.

Wingman4l76• 14 years ago

What arcade game is that? I can only think of Odell Down Under, but that was an old PC/Mac game...

dlsym• 14 years ago

Very... absorbent. You really get... sucked in.

ryangallen• 14 years ago

Can you make it work on mobile with controls on the page?

geuis• 14 years ago

Support for touch events on mobile perhaps?

hardik988• 14 years ago

I know the game is unfinished, but it needs to be more "winnable" and less frustrating.

Even when I work my way up to the size of half-the-screen, I end up colliding with a bigger bubble outside the screen I never knew existed! So, it depends too much on luck for my taste, and it's incredibly frustrating to be sucked in by a bubble I can't even see.

wreckimnaked• 14 years ago

Nice idea. Maybe a zoom-in / zoom-out control would be interesting for gameplay.

orolo• 14 years ago

Fun game. Good Job.

DelvarWorld• 14 years ago

I like how you punish people for playing the game with the worst controls ever created

SeanDav• 14 years ago

Got some good potential. I think a much bigger playing field would be a good idea, or smaller relative bubbles. Homing bubbles etc could be fun.

serverhorror• 14 years ago

I hate you!

Just spent an hour with your game :)

(In case it's not clear, I think it's great and somewhat addictive, a few rough edges but really great)

georgeecollins• 14 years ago

This is really cool, I started playing immediately and wanted to keep going. Good job.

bbarrows• 14 years ago

If you get going fast enough it looks like the collision detection skips over bubbles.. Pretty fun game tho

peteforde• 14 years ago

I think that this game is awesome. I just played about 100 games, compulsively. I think this could be a hit if it was properly polished.

1. I'd love to play this on an iPad using accelerometer controls.

2. For me, the jury is out on shooting the bubbles. I was having a blast before I even know that I could shoot, and I'm not sure that it added to the experience.

3. I found the game made me think in a vaguely philosophic way, like... what is this? Am I a cancer cell? Is it fair that I can think but everyone else is on a predetermined path? Am I just playing against myself? Is this a metaphor for expansion of corporate power? :)

ecubed• 14 years ago

+1 for this being amazing on the iPad with accelerometer. Very addicting game, well done

levesque• 14 years ago

I agree about the philosophic ideas. Everyone will probably figure out something different ;)

I don't think playing this game with accelerometers would be as fun, they are so imprecise it would end up frustating (to me at least).

adito• 14 years ago

Moral of the game: When you grow big, you will have big enemy. If you keep yourself small, you will just face small enemy.

fchollet• 14 years ago

Great concept. But very difficult and frustrating in its current version.

I think a good improvement would be for the player to be controlling speed rather than acceleration.

sopooneo• 14 years ago

Or maybe direction and acceleration, ala asteroids?

nviarnes2• 14 years ago

Not gonna read all the comments to see if this has been said but you need to set a max velocity for the player.

Hold down up and right from the start of the game and watch as you break the game :)

nviarnes2• 14 years ago

Also if you shoot before you move you shrink yourself. Intended?

lathamcity• 14 years ago

I didn't know it had a point at all besides surviving for as long as possible. I made my little 4 pixel bubble survive for almost ten minutes purely out of curiosity, to see just how massive this one bubble would get. Then I accidentally hit a blue one and, surprise, it makes me bigger.

Kroem3r• 14 years ago

How about conservation of momentum?

Or, introduce levels of difficulty - perhaps as something slightly subtle like ratio of the space-bar missile?

The invisible zones as you wrap around to the other side are way too big.

hanibash• 14 years ago

Wow, does anyone else see the startup metaphor here?

You're a little guy, running around and grabbing all of the opportunity you can, making sure you don't run head first into the big guys.

Sometimes it's advantageous to shrink yourself. You're more agile and able to navigate between the big guys more deftly.

But in the end, the best strategy is to grow quickly, because as you grow, the amount of surface area and the amount of opportunity you have grows, creating a feedback loop of success.

dmak• 14 years ago

You cannot possibly win. It's hard to move around with so much momentum. If you try to maneuver the sides to try to get the little circles, then you have a higher chance of hitting a big one because they absorb everything and anything. As you get bigger, the circles that spawn are bigger and just are absorbed by the huge pieces and increase exponentially before I can get any pieces.

craig552uk• 14 years ago

Cool. Needs full screen, a timer and a leader board.

chrisu_de• 14 years ago

It does not matter how much karate you know, someone else will allways know more. - there are allways bigger bubbles.

Show HN: Bubbles - my unfinished HTML5 Particle Game

Related Stories