Creating Platforms in HTML5 Canvas, Moving Ball

Question

I'm new to canvas and have an elementary knowledge of Javascript. I'm developing a (seemingly) simple game in which a ball rolls from the top left of the screen along a platform.

So the ball needs to have some kind of physics applied to it (I suppose) so that it not only moves from right to left but that is also has gravity and the ability to fall off the platform.

I am not sure how to achieve creating the platforms nor the ball physics. I realize this is an extremely general question - and I'm not asking someone to program this for me - but I just thought I'd poke around a little and see if someone can give me a good push in the right direction. I'm a little lost here.

Any help would be appreciated!

Answer 1

Have a look at Box2DJS which is a JavaScript physics engine for canvas. It's a port of a very popular C++ physics engine called Box2D (more accurately, it's a port of the ActionScript 3.0 version which is itself a port of the original).

There are a ton of resources out there for the ActionScript 3.0 version which you might find helpful as JavaScript syntax and ActionScript syntax are essentially the same. There are also a few demos out there for the JavaScript version. This hello world demo probably has everything you need to get started (right click to view source).