Adapting to Different Devices - Building JavaScript Games for Phones, Tablets, and Desktop - page 176

Before you can start writing JavaScript code, you need to take care of a few things in the HTML
page. The reason is that tablets and smartphone devices define default touch behavior on web
pages, such as the ability to scroll or zoom in a web page. Those interactions would interfere with
playing the game, so you want to switch them off. This can be done in the header of the HTML file
by adding the following tag to the header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
The viewport in HTML defines the section of the page that is in view. For example, when you
navigate to a page and it zooms in automatically on one portion, this is done by modifying the size
of the viewport. In the meta tag, you can define the properties of the viewport. This example tells the
browser three things: the width of the viewport is the same as the width of the device, the scale of
the page is 1 when the page is first viewed, and the user can't scale the page. As a result, all touch
interactions to change the positioning or scaling of the HTML page are switched off.
Now you can start writing the JavaScript code to handle touch events. The way touch input works
in JavaScript is that every time the user touches the screen, a touchstart event is generated, and
a unique identifier is assigned to that touch. When the user touches the screen with another finger,
another touchstart event occurs with a new, unique identifier. When the user moves a finger on the
screen, a touchmove event is generated, and the unique identifier of the finger that is moving can
be obtained from the event. Similarly, when the user stops touching the screen, a touchend event
is generated, and again the identifier of the finger that has stopped touching the screen can be
retrieved from the event.
To handle touches, create a class Touch_Singleton and the associated single instance Touch , similar
to the way you created the Keyboard and Mouse objects. In the constructor of the class, you create
an array where you store each touch and the related information. In addition, you store whether
each touch is a press or not. A touch press means in the previous game-loop iteration the finger was
not touching the screen, but in the current iteration it is. Furthermore, you have to attach the event-
handler functions. Here is the complete constructor method:
function Touch_Singleton() {
this._touches = [];
this._touchPresses = [];
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchend', handleTouchEnd, false);
document.addEventListener('touchcancel', handleTouchEnd, false);
document.addEventListener('touchleave', handleTouchEnd, false);
document.body.addEventListener('touchmove', handleTouchMove, false);
}
Dealing with touches is relatively new for browsers (as opposed to keyboard and mouse input). As
a result, not all browsers use the same terminology. This is why you need to add event listeners
for different varieties of touchend events. However, in the end, you deal with three types of events:
touchstart , touchmove , and touchend . Each of them gets its own event-handler function.
When a user starts touching the screen, the handleTouchStart function is called. In that function,
you simply store the touch event in the _touches array so you can retrieve the data later if needed.
However, it's possible that the user may start touching the screen with multiple fingers at the same
time. Therefore, the event contains an array of new touches. You can access that array with the