Game Development Reference
In-Depth Information
move it down
if (stillFalling) {
jellies[i].move();
} else {
// Stop the jelly from falling
jellies[i].setY(document.body.offsetHeight
- jellies[i].getHeight() - 75);
// Swap the vectors
jellies[i].swapClass("jelly-svg-on",
"jelly-svg-off");
jellies[i].setInPlay(false);
// Play the corresponding sound to this
action
sounds.play("splash");
}
}
Drag-and-drop
Similar to the way SVG was used in the game, drag-and-drop made its way into the
final product taking a backseat to web audio. Yet, the role that drag-and-drop plays
in the game is arguably the most important one, it starts the game. Instead of having
the game start playing right away when the page first loads, or instead of having the
user press a button or hit a key to start game play, the player needs to drag the lid
away from the bowl where all the jellies are stored, and place it next to the bowl on
the table where it sits.
The way drag-and-drop works in HTML5 is simple and intuitive. We register at least
one object to be a draggable object (the one you drag around), and at least one oth-
er object to be a drop target (the object where the draggable can be dropped into).
Then we register callback functions for whatever events we want that apply to the
dragging and dropping behavior.
In the game, we only listen for five events, two on the draggable element, and three
on the drop target element. First, we listen for when the draggable is first dragged by
