Game Development Reference
In-Depth Information
the other is not. Depending on the state of each jelly element, these two classes are
toggled back and forth. This is all done by simply assigning one of the two classes
jelly-svg-on
and
jelly-svg-off
to the parent svg element holding these two
vector groups, as shown in the following code:
.jelly-svg-off g.jelly-block, .jelly-svg-on
g.splash {
display: none;
}
.jelly-svg-off g.splash, .jelly-svg-on
g.jelly-block {
display: block;
}
The way the preceding styles are driven is simple. By default, every jelly element is
given a CSS class of
jelly-svg-on
, meaning that the jelly is not splashed. Then,
when a jelly is calculated to have hit the floor, we remove that class, and add the
CSS class of
jelly-svg-off
, as seen in the following code snippet:
// Iterate through each jelly and check its
state
for (var i in jellies) {
// Don't do anything to this jelly entity if
it's outside the screen,
// was eaten, or smashed on the floor
if (!jellies[i].isInPlay())
continue;
// Determine if a jelly has already hit the
floor
stillFalling = jellies[i].getY() +
jellies[i].getHeight() * 2.5 <
document.body.offsetHeight;
// If it hasn't hit the floor, let gravity
