HTML and CSS Reference
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
Simple Gravity, Elasticity, and Friction
Adding simulated gravity, elasticity, and friction to your objects adds a sense of realism
that otherwise would not exist in 2D. These properties are major forces in nature that
people feel and understand at nearly every moment of their lives. This means that people
who play games expect objects to act in a particular way when these properties are
applied. Our job is to simulate those effects as closely as possible, while minimizing
the processing power necessary to create them. While there are some very complicated
physics equations we could use to create these effects, we will use simplified versions
that work well with the limited resources available to HTML5 Canvas in a web browser.
A very simple, yet seemingly realistic gravitational effect can be achieved by applying
a constant gravity value to the y velocity of an object moving on a vector. To do this,
select a value for gravity, such as .1 , and then add that value to the y velocity of your
object on every call to drawScreen() .
For this example, let's simulate a ball with a radius of 15 pixels being shot from a cannon
that rests near the bottom of the canvas. The ball will move at a speed of 4 pixels per
frame, with an angle of 305 degrees. This means it will move up and to the right on the
canvas. If we did not apply any gravity, the ball would simply keep moving on that
vector until it left the canvas (actually, it would keep moving, we just would not see it