Bootstrapping the Quintus Engine: Part II - HTML5 Mobile Game Development - page 176

The last part of touchControls binds any of the touch events— touchstart , touchend , touch-
move , and touchcancel —to call touchDispatch .
The last method, disableTouchControls , simply removes the event handlers from the element, dis-
abling the onscreen keypad. It also marks the joypad as disabled if that happened to be set up.
Adding Joypad Controls
The last supported input mechanism, the joypad, is also the most complicated, primarily because it needs to
work as both an analog and a digital keypad that maps keypad locations to actions to make it compatible with
the keyboard and keypad input.
The idea behind the joypad is that the user can initiate a touch anywhere in the joypad area to center the
control, and then the joypad should detect movement relative to that location. Again, the joypad is configurable
in size, colors, and alpha, as well as the actions it triggers. To make the most common use case simple to initial-
ize, however, defaults are set for most of the options. The joypad also triggers the same default actions as the
keyboard and keypad: up, right, left, and down.
Unlike the keypad, the joypad needs to treat each of the touch events differently. The touchstart event
is used to start and center the joypad, capturing the identifier of the touch so that only that touch adjusts the
joypad from then on. touchmove events are used to actually move the center of the joypad around. Finally,
the touchend event removes the joypad.
Add the code in Listing 10-6 below the keypad functions inside the definition of Q.InputSystem after
the code from Listing 10-5 .
Listing 10-6: Joypad controls
joypadControls: function(opts) {
if(this.joypadEnabled) return false;
if(!hasTouch) return false;
var joypad = Q.joypad = _.defaults(opts || {},{
size: 50,
trigger: 20,
center: 25,
color: "#CCC",
background: "#000",
alpha: 0.5,
zone: (Q.el.attr('width')||Q.width) / 2,
joypadTouch: null,
inputs: DEFAULT_JOYPAD_INPUTS,
triggers: []
});
Q.el.on('touchstart',function(e) {
if(joypad.joypadTouch === null) {
var evt = e.originalEvent,
touch = evt.changedTouches[0],
loc = Q.input.touchLocation(touch);