Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Can anyone please help me out with a small test game I'm creating. I'm basically creating this game to learn a few things about HTML5 and so far it's all been good. I've been able to create a canvas with a air balloon that can fly and drops to the bottom when it's not. Now I want the air balloon to be able to stop on another image, which I've called "level1". If someone could perhaps have a look at it, view the source and suggest how I would do this, I would appreciate it.

Or perhaps using images isn't the most efficient way to create a level. If it isn't then please say. Thanks again. :)

Here's the game.

share|improve this question
Ah, is the source not viewable? I thought javascript can be viewed in the source. Does anyone know a site where I can upload it? – Joey Morani Aug 23 '11 at 18:25
It's possible to view the source (most browsers have a 'view source' in the right click menu. Also, I'd suggest looking into pre-loading images, since the balloon disappears the first time you press the 'up' arrow (nicely done so far, though!) – thedaian Aug 23 '11 at 18:38
That's good. In chrome I couldn't see the javascript but I was clicking on the wrong thing. :P I've been searching around on how to preload images, but haven't found anything yet. Would you know how? And thanks for the complement! :D – Joey Morani Aug 23 '11 at 19:16
@Joey Morani: You can preload images like explained here. But that doesn't help that much, since you would have to wait for the images to be loaded before you start the game. A simpler way is probably to have the images referenced, but hidden in your HTML code (using <img />). Then use <body onload="startgame()">. The startgame function would then start the game as soon as the page is fully loaded. – bummzack Aug 24 '11 at 7:19
You might want to check out a game engine like Construct 2 that does a lot of this legwork for you. You can add physics/polygon collision etc very easily in these sorts of engines. – Tom Gullen Dec 9 '11 at 21:59

If your "level1" sprite is fairly simple, you can emulate this by create a number of bounding boxes around/over it, check when the balloon penetrates these bounding boxes, and push it back to a safe distance.

Else look into "pixel-perfect collision detection".

share|improve this answer

I think you need to combine two methods here. First check the bounding boxes of the platforms and the balloon. If the bounding boxes overlap, you have to do more accurate checking.

For the second step you have at least two options. You can check the bitmap of the ship (ctx.getImageData etc) against the platform. I guess here you could use the alpha value of each pixel. This is probably better option if you have organic looking levels/platforms.

Other option for the second step is to define simple geometric shapes representing the balloon and level. A circle for top, a triangle for ropes and a box for the basket and level. There are several tutorials online how to check collision between these basic shapes.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.