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:
Drawing the onscreen input
drawButtons: function() {
var keypad = Q.input.keypad,
ctx = Q.ctx;
ctx.save();
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,
