HTML and CSS Reference
In-Depth Information
Figure 5-23. Ship taking off (easing in)
First, we set the beginning position of the
ship
(
p1
) to the bottom center of the canvas. Then
we set the beginning
speed
of the ship very low (
.5
pixels per frame) and set the
angle
to
270
(straight up the canvas). We then calculate the
x
and
y
velocity values for the
ship
:
var
var
p1
=
{
x
:
240
,
y
:
470
};
var
var
tempSpeed
=
.
5
;
var
var
tempAngle
=
270
;
var
var
tempRadians
=
tempAngle
*
Math
.
PI
/
180
;
var
var
tempvelocityx
=
Math
.
cos
(
tempRadians
)
*
tempSpeed
;
var
var
tempvelocityy
=
Math
.
sin
(
tempRadians
)
*
tempSpeed
;
var
var
ship
=
{
x
:
p1
.
x
,
y
:
p1
.
y
,
velocityx
:
tempvelocityx
,
velocityy
:
tempvelocityy
};
In
drawScreen()
, instead of finding the distance between two points, we add the
easeValue
to the
x
and
y
velocities on each frame and then apply it to the
ship x
and
y
values before
drawing it to the canvas. This creates a linear increase in speed, resulting in the easing-in ef-
fect we want to see:
ship
.
velocityx
=
ship
.
velocityx
+
(
ship
.
velocityx
*
easeValue
);
ship
.
velocityy
=
ship
.
velocityy
+
(
ship
.
velocityy
*
easeValue
);
ship
.
x
+=
ship
.
velocityx
;
