HTML and CSS Reference
In-Depth Information
The innerWidth and innerHeight need to be checked multiple times. This is because the size of
the window changes over the course of the method call after the user rotates the device and after the win-
dow.scrollTo method is called to remove the address bar.
The other trick is that the CSS size of the canvas element can be set independently from its pixel size
(specified with the width and height attributes on the tag.) This enables you to scale the visual size of the
element up without having to push lots more pixels. The downside to this is that pixels will be effectively four
times as large, making the game look slightly pixelated. In the case of a retro-shooter such as Alien Invasion ,
this isn't a huge deal, but it's something to note.
The setupMobile now must be called from Game.initialize . In addition, the game should add
touch controls onto the page if only they are supported by the device. Modify the method to read
// Game Initialization
this.initialize = function(canvasElementId,sprite_data,callback) {
this.canvas = document.getElementById(canvasElementId);
this.playerOffset = 10;
this.canvasMultiplier= 1;
this.width = this.canvas.width;
this.height= this.canvas.height;
this.ctx = this.canvas.getContext &&
if(!this.ctx) {
return alert("Please upgrade your browser to play");
if( {
this.setBoard(4,new TouchControls());
With a check for , the game will add only the visual touch controls and bind to touch events
if the device supports it.
Adding to the iOS Home Screen
There's a last set of meta tags needed to reach HTML5-gaming nirvana: full-screen play. This code works only
on an iOS device, iPad, iPhone, or iPod Touch.
Add the following two <meta> tags to the <head> below the viewport declaration:
Search WWH ::

Custom Search