Game Development Reference
In-Depth Information
The game title
This text based widget simply displays the main title of the game. Note that the type
face used there is pure text (no images), using a custom web font. Its only purpose
is to decorate the user interface.
Boat
This animated widget serves the purpose of strengthening the user interface by help-
ing to tell the story of the game. The boat is a simple HTML element (
div
), with a
background image representing the boat. The animated path that the boat follows is
done strictly in CSS, and is managed completely by the browser.
Sky
This section of HTML is used to encapsulate all the elements located on the top half
of the user interface, as well as to make it possible to animate the sky. As the game
goes on, the color of the sky changes subtly, so as to emulate the setting and rising
of the sun.
Waves
There is a section of HTML classed as
ocean
, which is a section that encapsulates
the area where the waves are stored. Each wave (there are two in use in this case)
is a
div
element with a width of 100 percent, and a background image that repres-
ents the wave. This background image is repeated throughout the entire width of the
div
element, and is animated through CSS in order to give the illusion of motion,
following a pattern of waves in the ocean.
Tracks
This widget is a section of HTML that encapsulates the individual track widgets,
along with the player that uses that track.
