Game Development Reference
In-Depth Information
expected, in which case we advance the hero a percentage of the way to the end
of the track, which is relative to the percentage of characters typed in properly and
relative to the total amount of characters. For example, if the user correctly typed in
the tenth character of a phrase that has 100 characters, then we move the hero 10
percent of the way across its track. Both, the hero and the enemy, have checks in
place so that they can't be moved beyond the width of their respective tracks.
Animations
Probably the most powerful feature of CSS3, the animation attribute, allows for
named keyframe animation very similar to the formerly popular Adobe Flash. The
way it works is incredibly simple: you create an animation sequence, give it a name,
and specify one or more CSS attributes to be applied at each keyframe. Each
keyframe represents a moment in time when those attributes should be added to
whatever element you associate with that animation sequence. Then, every moment
in time between two keyframes are smoothly interpolated by the browser and the il-
lusion of animation is achieved.
In the game, we use animations to give life to the ocean waves, to move the boat in
its path, and to make the sky fade darker and lighter with the passing of time, thus
simulating the rising and setting of the sun. Although this may seem like a complic-
ated task, animating elements is so easy that the main limitation you're likely to run
into may be creativity. If you're somewhat familiar with CSS and how to use it to ap-
ply various styles to elements, then learning and using the animation API should be
a natural next step.
