HTML and CSS Reference
In-Depth Information
}
// Any remaining were on the last frame
// and need to trigger an up action
for(actionName in wasOn) {
Q.input.trigger(actionName + "Up");
}
return null;
}
Q.el.on('touchstart touchend touchmove touchcancel',function(e) {
touchDispatch(e.originalEvent);
e.preventDefault();
});
this.touchEnabled = true;
},
disableTouchControls: function() {
Q.el.off('touchstart touchend touchmove touchcancel');
this.touchEnabled = false;
},
disableTouchControls
. Touch location is used to find the correct pixel location on the
<canvas>
ele-
ment (or non-
<canvas>
element) even if the Canvas has been rescaled to different dimensions from its pixel
dimensions (which can be done via CSS styling). To allow the touch code to work with DOM-based games,
the code uses the
Q.width
variable if the main Q.el doesn't have a width attribute (as it won't in the event of
a DOM-based game). From a performance perspective, this code could be improved by caching the
jQuery
calls instead of calculating them each call, but to keep the code straightforward and resilient to change events,
this is left as an exercise for you.
The primary setup method,
touchControls
, further defines two additional methods inside of it that do
most of the actual work for handling keypad events.
1.
getKey
calls
touchLocation
to get the pixel location on the Canvas and then returns the keypad
button (if any) that corresponds to that element.
2.
touchDispatch
is called each time a touch event occurs.
touchDispatch
consists primarily of
three loops:
• The first loop sets the
Q.inputs
array to
false
for all entries to turn all the keypad bound in-
puts off and takes note of any inputs that are on in the
wasOn
object.
• The second loop loops over all the current touches on the device and maps them to keypad presses,
setting the appropriate input. If the input isn't already on, the loop triggers an event on
Q.input
;
otherwise, the action is removed from the
wasOn
array.
• The last loop loops over whatever inputs were on before
touchDispatch
was called and trig-
gers the appropriate up event.
