Graphics Reference
In-Depth Information
If the player presses the down arrow key, the character should immediately stop
(5). In (6), we execute the jump. If the character is not yet jumping, the variables
are set, the corresponding jump sequence from the sprite sheet is played, and the
character is moved up and down via a jQuery animation, and then slowed down
through an easing (7). If the player releases the key (keyup) and the character is
not currently jumping, we return it to an at-rest position. Now the composition
can be launched in the browser and the character can be controlled.
Figure 7.17
The finished game scene with active
hotspot
7.5.4 Hotspots
Now let's take a look at the hotspots. Since we want to address all the hotspots
via scripts, we apply CSS classes to all hotspots to create the interactions between
them and the character. We can get these later with a simple jQuery selector. We
assign all hotspot graphics representing obstacles with the two hotspot obstacle
classes. In this way, we can mark off the scene to the left and right with simple
rectangles so that the player cannot leave the gaming area. Actions that trigger
an animation through contact with the character are assigned with the hotspot
action classes.
