Game Development Reference
In-Depth Information
gable element can be placed at the end of a drag option) is only activated once the
mouse pointer moves over it, there wasn't enough room on that table to accomplish
the desired effect of showing a small outlined area where
bowl-top
appears to be
dropped.
Finally, there is one global timer used in the game, which controls the frequency at
which we call the game loop function, named
tick()
. Although this is not a chapter
on proper game design, I will point out that you should avoid the temptation to create
multiple timers for different purposes. Some people out there won't think twice before
firing off an event through a unique timer separate from the main game timer. Doing
so, especially in HTML5 games, can have negative side effects both in performance
and in synchronizing all of the events.
API usage
The three APIs used in this game are audio, SVG, and drag-and-drop. A brief ex-
planation of how each of these APIs were used in the game will follow, where only
a general overview of the feature is given. In the next section, however, we'll take a
detailed look at what each of these features actually do, and how we can use it in
this and other situations. For the complete source code for this game, check out the
topic's page from Packt Publishing's website.
Web audio
Audio was used both for a never-ending loop used as a background song, as well
as individual sound effects that are fired off when a jelly is launched up, bounces off
the walls, splatters on the floor, or is eaten by the hungry hero. An old school sound
effect is also fired off when the hero finally dies from eating too much jelly.
The way that each audio entity is managed in the game is through a simple encap-
sulation that holds references to individual sound files, and exposes an interface al-
lowing us to play a file, fade sound files in and out, as well as add new sound files to
the list of audios managed by this class. The code for the same is as follows:
// ** By assigning an anonymous function to a
variable, JavaScript
// allows us to later call the variable's
