Finishing Up and Going Mobile - HTML5 Mobile Game Development - page 48

Chapter 3
Finishing Up and Going Mobile
What's in this chapter?
• Exploring scene management
• Adding projectiles and enemies
• Using collision detection
• Creating explosions
Wrox.com Code Downloads for this Chapter
The wrox.com code downloads for this chapter are found at www.wrox.com/rem-
title.cgi?isbn=9781118301326 on the Download Code tab. The code is in the chapter 03 download and individu-
ally named according to the names throughout the chapter.
Introduction
One of the much-touted advantages of HTML5 is its support on mobile devices, something that, despite the name
of the topic, has been ignored in the game so far. This is remedied in this chapter. Adding mobile support to Alien
Invasion means recognizing when the game is played on a touch device and responding correctly. In this case it
means adding in touch controls and resizing the game to fit the device.
Adding Touch Controls
Since the introduction of the iPhone in 2007, the direction of input mobile devices has been clear: The touch-
screen has won. To make Alien Invasion playable on mobile and table devices, it must be playable with only the
screen as an input device.
Drawing Controls
To make mobile gameplay possible, the common solution is to add visible touch controls to the screen. These
controls can consist of three square buttons at the bottom of the page: a left arrow to move the ship left, a right
arrow to move the ship right, and an "A" button to fire.
To add in the controls, a new game board at a higher position than anything else is added in. Because it will
be rendered after everything else, the controls always sit nicely on top of the page.