HTML and CSS Reference
In-Depth Information
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
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.
Simple Gravity
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
any longer).
