Game Development Reference
In-Depth Information
is ready. Other browsers may render the text with a fallback or default font until the
web font file is ready, then swap the fonts and re-render the text.
Transitions
A CSS transition attribute tells the browser what attributes it applies to and how long
the transition should last. Once those properties change, the browser will interpolate
the beginning and end states and generate a very smooth transition for the duration
specified. Of course, this can only be applied to attributes represented by some nu-
merical value, such as font size, background color (represented by either an RGB or
HSL value, or a hexadecimal number, all of which can be converted to percentages),
element position, and so on. Values that do not get smoothly interpolated in CSS
transitions include font-family, background images, or any other attribute that don't
have in-between values, such as display block and display none.
In the game, the only uses of transition were with the options menu, the message
container, and in moving the players across the tracks. The options menu is set to
be pushed off the left side of the screen and the main icon that represents it is 75
percent transparency. Once the user hovers the mouse over that icon, it transitions
to zero percent transparency (fully visible) and the rest of the menu transitions onto
its left side to move to the right until its left edge snaps to the left edge of the browser.
The message container uses a similar effect, and that it is always positioned at the
top of the screen, its width being 100 percent the window viewport and its height is
set to zero by default (when the container is
closed
). When we want to display a
message to the user, add the CSS class
open
to the container widget which sets the
container's height to 100 percent, thus triggering a smooth transition that simulates
a slide-in effect.
Finally, we used transitions to move the players from right to left within the tracks to
which they are each bound. This was a very easy task to accomplish, even though
the hero and the enemy are controlled slightly different. The way the enemy moves is
simple: at every tick of the game timer we increment the enemy's horizontal position
(by changing its left style attribute) by whatever value is set in its data-speed data at-
tribute. The smooth transition between the two points is handled by the browser. The
way the hero moves is similar, with the exception that the data-speed is always set
to zero (otherwise it'd be moving automatically without the user having to type any-
thing) and at each key press we check whether the character typed in was what was
