HTML and CSS Reference
In-Depth Information
}
function eventAssetsLoaded() {
canvasApp();
}
Then in
canvasApp()
, we create a variable named
easeValue
, which represents the per-
centage to move the ship across the remaining distance between the two points. In our
example, it is 5% (
.05
):
var easeValue = .05;
Next, we create our two points. The first point,
p1
, is close to the middle of the canvas
on the y-axis, and just above the top (
-20
) on the x-axis. The final point,
p2
, is in the
same place on the x-axis, but near the bottom of the canvas (
470
) on the y-axis:
var p1 = {x:240,y:-20};
var p2 = {x:240,y:470};
Finally, we create a dynamic object for the
ship
that holds these values:
var ship = {x:p1.x, y:p1.y, endx: p2.x, endy:p2.y, velocityx:0, velocityy:0};
In
drawScreen()
, on every frame, we first find out the distance between the ship and
the endpoint by subtracting the current
x
and
y
values for the
ship
from the endpoint
x
and
y
values. The distance will get shorter on each call to
drawScreen()
as the ship
moves farther away from
p1
and gets closer to
p2
. We do this for both
x
and
y
even
though, in our example, only the
y
value will change as the spaceship gets closer to
p2
:
var dx = ship.endx - ship.x;
var dy = ship.endy - ship.y;
Once we have the distances, we multiply those values by
easeValue
to get the
x
and
y
velocities for the
ship
on this call to
drawScreen()
:
ship.velocityx = dx * easeValue;
ship.velocityy = dy * easeValue;
Finally, we apply those values and draw the spaceship to the canvas:
ship.x += ship.velocityx;
ship.y += ship.velocityy;
context.drawImage(shipImage,ship.x,ship.y);
You can test this example by executing
CH5EX18.html
from the code distribution in
your web browser, or by typing in the full code listing shown in
Example 5-18
.
Example 5-18. Easing out (landing the ship)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX18: Easing Out (Landing The Ship)</title>
<script src="modernizr-1.6.min.js"></script>
