1
\$\begingroup\$

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.

\$\endgroup\$
5
  • \$\begingroup\$ 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? \$\endgroup\$ Commented Aug 23, 2011 at 18:25
  • 2
    \$\begingroup\$ 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!) \$\endgroup\$ Commented Aug 23, 2011 at 18:38
  • \$\begingroup\$ 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 \$\endgroup\$ Commented Aug 23, 2011 at 19:16
  • 1
    \$\begingroup\$ @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. \$\endgroup\$ Commented Aug 24, 2011 at 7:19
  • \$\begingroup\$ You might want to check out a game engine like Construct 2 scirra.com that does a lot of this legwork for you. You can add physics/polygon collision etc very easily in these sorts of engines. \$\endgroup\$ Commented Dec 9, 2011 at 21:59

2 Answers 2

Reset to default
2
\$\begingroup\$

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

\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.