HTML and CSS Reference
In-Depth Information
if(e.type == 'touchstart' || e.type == 'touchend') {
for(i=0;i<e.changedTouches.length;i++) {
touch = e.changedTouches[i];
x = touch.pageX / Game.canvasMultiplier -
Game.canvas.offsetLeft;
if(x > 4 * unitWidth) {
Game.keys['fire'] = (e.type == 'touchstart');
}
}
}
};
Game.canvas.addEventListener('touchstart',this.trackTouch,true);
Game.canvas.addEventListener('touchmove',this.trackTouch,true);
Game.canvas.addEventListener('touchend',this.trackTouch,true);
Game.playerOffset = unitWidth + 20;
};
In the preceding description, the controls have been referred to as “buttons” because that is the way they are
drawn. But if you examine the hit detection code, you notice they are actually targeted as columns. Only the
x
location of the hit is used to determine if a user is pressing a button. This is a behavior used in a number of
mobile app store games, and it works well because players can be less exact when trying to press the buttons
and can place their hands vertically on the device where they feel comfortable.
This code adds in a method called
trackTouch
to
TouchControls
that acts as the universal handler
for any touch events. The first thing
trackTouch
does is call
e.preventDefault()
. This gets rid of
any existing behavior that might be associated with that event, including scrolling, clicking, zooming, and so
on. Doing this prevents the page from exhibiting any default behavior when the user interacts with the canvas
element. (At least on iOS it does. As of this writing, on Android you can still trigger scroll and zoom via multi-
touch. Hopefully that will be fixed soon.)
Next, the
trackTouch
method sets both the left and right keys to
false
. It does this because either or
both of these keys will be set back to
true
if there is a touch noted on the button. Performing the detection this
way allows users to slide their finger between the two buttons to move back and forth or swap fingers without
the game missing a beat. For any touches, the game sees if they are located in the first two units on the left of
the canvas and if so maps those to the left and right movement buttons.
For firing missiles, only the
changedTouches
are looked at. This is, as mentioned before, because the
player is forced to press the Fire button repeatedly to fire missiles in rapid succession. The game checks if any
of the touches are in the last section on the right and if so sets the fire key to
true
or
false
depending on
whether the event is a
touchstart
or a
touchend
, respectively.
Finally a variable called
playerOffset
is set to the
unitWidth + 20
. The point of this is to have the
player move up on the screen if touch controls are present, but sit on the bottom of the screen if the game is
played on a desktop browser.
For this to have an effect, the
PlayerShip
needs to be initialized with a new y location. Modify the bolded
line of
PlayerShip
in
game.js
:
var PlayerShip = function() {
this.setup('ship', { vx: 0, reloadTime: 0.25, maxVel: 200 });
this.reload = this.reloadTime;
this.x = Game.width/2 - this.w / 2;
