HTML and CSS Reference
In-Depth Information
Next, the
keydown
event looks up the action associated with that
keycode
, if any, and then sets that input
to
true
. It also triggers an event with the same name as the input and then prevents any default browser actions
from taking place by calling
e.preventDefault()
.
The
keyup
event does the exact opposite, setting the action to
false
and triggering an action matching the
event name with
"Up"
appended.
Adding Keypad Controls
Next are the keypad controls, a version of which was also built in Chapter 3, “Finishing Up and Going Mobile.”
The goal of these controls is to add a number of different buttons to bottom of the screen. What makes these
slightly more difficult than the keyboard events is that you can't match
touchstart
and
touchend
events
directly to keypad presses. If you did, users couldn't slide their fingers around the screen as they are apt to do.
Instead, Quintus takes advantage that every touch event includes with it all the touches currently on the
screen along with any touches that have changed. It loops over these touch events each time there is any event
and updates the actions pressed regardless of what event occurs.
Using this mechanism requires a little more housekeeping to trigger events when a key is pressed or released,
but you'll end up with a behavior that mimics keypresses while still allowing users to slide their hands around.
The engine assumes that the controls are to be drawn across the bottom of the screen and should stretch the
entirety of the device. As such, the size of the controls is calculated by the number of entries in the controls ar-
ray. Five entries in the array mean that each control can take up one-fifth of the screen, minus the size of the gut-
ter between the controls. The controls array also allows blank entries that represent empty spots that shouldn't
trigger.
Add the code in
Listing 10-5
below the key functions inside the definition of
Q.InputSystem
below the
code you added in
Listing 10-4
.
Listing 10-5:
Touch controls
touchLocation: function(touch) {
var el = Q.el,
pageX = touch.pageX,
pageY = touch.pageY,
pos = el.offset(),
touchX = (el.attr('width') || Q.width) *
(pageX - pos.left) / el.width(),
touchY = (el.attr('height')||Q.height) *
(pageY - pos.top) / el.height();
return { x: touchX, y: touchY };
},
touchControls: function(opts) {
if(this.touchEnabled) return false;
if(!hasTouch) return false;
Q.input.keypad = opts = _({
left: 0,
gutter:10,
