HTML and CSS Reference
In-Depth Information
// Clockwise from midnight (a la CSS)
var DEFAULT_JOYPAD_INPUTS = [ 'up','right','down','left'];
Q.inputs = {};
Q.joypad = {};
var hasTouch = !!('ontouchstart' in window);
Q.InputSystem = Q.Evented.extend({
// TODO: Fill in Input System code
});
Q.input = new Q.InputSystem();
};
As you can see, this code sets up four constant-style variables used in the input module. The first,
KEY_NAMES
, is a convenience array that matches input keycodes with more developer friendly names.
Listing
10-3
defines codes for only the arrow keys, the spacebar, and the Z and X keys because that is what this topic
uses, but you can add additional keycodes if needed.
The remaining three arrays define the default input action bindings for the keyboard, keypad touch controls,
and the joypad.
Next up are the
Q.inputs
and
Q.joypad
objects, which hold the current state of the action inputs. These
are initialized to empty objects, and a boolean variable,
hasTouch
, is defined to check if support for the touch
events is available in the browser.
Finally, a stub for the
InputSystem
class is added, which inherits from
Evented
so that, as shown in the
listing, objects can bind to input events.
Handling Keyboard Events
Keyboard events are the easiest to handle, and the code bears a striking similarity to the code from Chapter 1,
“Flying Before You Walk.” You can fill in the TODO in
Q.InputSystem
from
Listing 10-3
with the code in
Listing 10-4:
Keyboard events
Q.InputSystem = Q.Evented.extend({
keys: {},
keypad: {},
keyboardEnabled: false,
touchEnabled: false,
joypadEnabled: false,
bindKey: function(key,name) {
Q.input.keys[KEY_NAMES[key] || key] = name;
},
