HTML and CSS Reference
In-Depth Information
with no surplus or deficit in time between frame ticks, the step value is
1
. If the current frame
tick took longer than a single frame to finish, the value is greater than
1
(a deficit). If the cur-
rent frame took less time than a single frame, the step value is less than
1
(a surplus).
For example, if the last frame took too long to process, the current frame will compensate by
movingeachobjectalittlebitmorethanthe
step
valueof
1
.Let'sillustratethiswithasimple
example.
Let's say we want the saucer to move five pixels to the right on each frame tick. This would
be a
dx
value of
5
.
For this example, we also say that our desired frame rate is
40
FPS. This means that we want
each frame tick to use up
25
milliseconds (
1000/40 = 25
).
Let's also suppose that the
timeDifference
between the current frame and the last frame is
26
milliseconds. Our game is running at a deficit of
1
millisecond per frame—this means that
the game processing is taking more time than we want it to.
To calculate the
step
value, divide the
timeDifference
by
1000
:
26/1000 = .026
.
We multiply this value by the desired
fps
for our game:
.026 * 40 = 1.04
Our
step
value is
1.04
for the current frame. Because of the deficit in processing time, we
want to move each game object slightly more than a frame so there is no surplus or deficit. In
thecaseofnosurplusordeficit,thestepvaluewouldbe
1
.Ifthereisasurplus,the
step
value
would be less than
1
.
This
step
value is multiplied by the changes in movement vectors for each object in the up-
date functions. This allows the game to keep a relatively smooth look even when there are
fluctuations in the frame rate. In addition, the game updates the screen in a relatively consist-
ent manner across the various browsers and systems, resulting in game play that is relatively
consistent for each user.
Here are the new movement vector calculations for each object:
player
player
.
x
+=
player
.
movingX
*
frameRateCounter
.
step
;
player
.
y
+=
player
.
movingY
*
frameRateCounter
.
step
;
playerMissiles
tempPlayerMissile
.
x
+=
tempPlayerMissile
.
dx
*
frameRateCounter
.
step
;
tempPlayerMissile
.
y
+=
tempPlayerMissile
.
dy
*
frameRateCounter
.
step
;
