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

keyboardControls: function(keys) {
keys = keys || DEFAULT_KEYS;
_(keys).each(function(name,key) {
this.bindKey(key,name);
},Q.input);
this.enableKeyboard();
},
enableKeyboard: function() {
if(this.keyboardEnabled) return false;
// Make selectable and remove an :focus outline
Q.el.attr('tabindex',0).css('outline',0);
Q.el.keydown(function(e) {
if(Q.input.keys[e.keyCode]) {
var actionName = Q.input.keys[e.keyCode];
Q.inputs[actionName] = true;
Q.input.trigger(actionName);
Q.input.trigger('keydown',e.keyCode);
}
e.preventDefault();
});
Q.el.keyup(function(e) {
if(Q.input.keys[e.keyCode]) {
var actionName = Q.input.keys[e.keyCode];
Q.inputs[actionName] = false;
Q.input.trigger(actionName + "Up");
Q.input.trigger('keyup',e.keyCode);
}
e.preventDefault();
});
this.keyboardEnabled = true;
},
The keyboard controls consist of three methods:
• bindKey is responsible for binding a key code (the numeric identifier of the key pressed, not the ASCII
representation) to a specific action by setting a value on the Q.input.keys object. It accepts either a
key name from the KEY_NAMES array (such as " LEFT ") or a straight keycode.
• keyboardControls is used to actually enable keyboard controls on the game. It binds any passed-in
keys (or uses the DEFAULT_KEYS defined in Listing 10-4 ) by calling bindKey on each and then calls
enableKeyboard , which does the browser event binding.
• enableKeyboard defines both a keydown and a keyup event on the element. To make the <can-
vas> element selectable but disable any outline focus, you first need to add the tabindex property
and then set the outline style to 0 .