HTML5 and Mobile Game Development - Learn HTML5 by Creating Fun Games - page 378

border-radius: 100px;
}
</style>
We set the body tag to be as wide as the viewport and remove any margin and pad-
ding from it so that touches near the edge of the screen would not be missed by the
element's event handling. We also style the div elements to look round, have a red
background color, and be absolutely positioned so that we can place one anywhere
a touch is detected. We could have used a canvas element instead of rendering mul-
tiple div tags to represent each touch but that is an insignificant detail for this demo.
Finally, we get down to the JavaScript logic of the application. To summarize the
structure of this demonstration, we simply use a global array where each touch is
stored. Whenever any touch event is detected on the document, we flush that global
array that keeps track of each touch, create a div element for each active touch,
and push that new node to the global array. At the same time as this is happening,
we use a request animation frame look to continuously render all the DOM nodes
contained in the global touches array.
// Global array that keeps track of all active
touches.
// Each element of this array is a DOM element
representingthe location
// and area of each touch.
var touches = new Array();
// Draw each DOM element in the touches array
function drawTouches() {
for (var i = 0, len = touches.length; i <
len; i++) {
document.body.appendChild(touches[i]);
}
}
// Deletes every DOM element drawn on screen
function clearMarks() {
var marks = document.querySelectorAll("div");