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.setupMobile();
this.width = this.canvas.width;
this.height= this.canvas.height;
this.ctx = this.canvas.getContext &&
this.canvas.getContext('2d');
if(!this.ctx) {
return alert("Please upgrade your browser to play");
}
this.setupInput();
if(this.mobile) {
this.setBoard(4,new TouchControls());
}
this.loop();
SpriteSheet.load(sprite_data,callback);
};
With a check for
this.mobile
, 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:
