Game Development Reference
In-Depth Information
// Hold every sound effect in the same object
for easy access
var sounds = new SoundFx();
// Sound.add() Parameters:
// string: hash key
// string: file url
// bool: loop this sound on play?
// bool: play this sound automatically as soon
as it's loaded?
sounds.add("background", "sound/
techno-loop-2.mp3", true, true);
sounds.add("game-over", "sound/
game-over.mp3", false, false);
sounds.add("splash", "sound/
slurp.mp3", false, false);
sounds.add("boing", "sound/
boing.mp3", false, false);
sounds.add("hit", "sound/
swallow.mp3", false, false);
sounds.add("bounce", "sound/
bounce.mp3", false, false);
Scalable Vector Graphics (SVG)
As mentioned previously, the way SVG is used in the game is limited simply because
the SVG spec is so robust and can get fairly complex. As you'll see in the in-depth
description of the SVG API, there were a lot of things that we could have done to
each individual primitive shape drawn through SVG (such as natively animating the
hero's facial expressions, or making each jelly jiggle or rotate, and so on).
The way we switch the sprite that represents a jelly into a splashed out jelly, when a
jelly hits the floor is pretty clever. When we draw the jelly vectors using the vector ed-
itor software, we create two separate images, each representing a different state of
the jelly. Both images are stacked on top of each other, so that they line up properly.
Then, inside the HTML code, we assign a CSS class to each of these images. These
classes are called jelly-block and splash, representing a jelly in its natural state, and
a jelly splashed on the floor. In both of these classes, one of the vectors is hidden and
