HTML and CSS Reference
In-Depth Information
Much like the keypad, the primary method joypadControls sets up the configuration and then a
number of event handlers for the joypad. Because the game may need access to the joypad analog information
such as the strength and angle of the movement, the joypad information is stored in Q.joypad instead of
Q.input.joypad for easier access.
The first handler, touchstart , is responsible for identifying a touch to activate the joypad. This is done
by first checking that the joypad isn't already activated by ensuring joypad.joypadTouch is set to null .
(Notice the three equal signs: === . This is necessary because the touch identifier might be 0 , which would be
true when compared with null if type-coercion is allowed.) Next the method checks if the touch is within
the joypad zone, which defaults to the left side of the play area, and if so it captures the identifier and center of
the touch and sets the inner circle position to null to prevent any initial movement.
The bulk of the work for the joypad calculations is done in the touchmove handler. This handler first
checks that the joypad is activated by making sure joypad.joypadTouch isn't null ; then it checks any
changed touches for one that matches the identifier stored in joypad.joypadTouch . When this is found,
the location of the center is calculated. To prevent the center from reaching outside the bounds of the joypad,
the location of the center is limited to the size of the joypad. The total distance and angle of the joypad are also
calculated to allow the game to pull the analog information about the joypad direction and strength.
Next, the touchmove handler checks against each of the four action triggers to see if the joypad has moved
far enough to count as a triggered movement. If there is a new trigger that is activated or an old trigger that is
no longer activated, the handler fires the appropriate event. Then the current state of the joypad updates.
Finally, the touchend handler checks if one of the changed touches matches the identifier of the joypad,
and if so disables the joypad.
Drawing the Onscreen Input
To this point, the Quintus.Input module has everything it needs to capture user input. What it doesn't have
is any way to draw those controls on the screen. The keypad buttons are drawn as a series of boxes with text
in them (refer to Chapter 3), and the joypad is drawn as a pair of concentric circles. Add the four methods in
Listing 10-7 below the joypadControls method.
Listing 10-7: Drawing the onscreen input
drawButtons: function() {
var keypad = Q.input.keypad,
ctx = Q.ctx;;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
for(var i=0;i<keypad.controls.length;i++) {
var control = keypad.controls[i];
if(control[0]) {
ctx.font = "bold " + (keypad.size/2) + "px arial";
var x = i * keypad.unit + keypad.gutter,
y = keypad.bottom - keypad.unit,
Search WWH ::

Custom Search