HTML and CSS Reference
In-Depth Information
The game needs to handle different screen resolutions. To this end, instead of drawing fixed size input
squares (which could end up being too large or too small depending on the device), the game adjusts the size
of the squares based on the width of the game. Based on some informal testing, dividing the width of the game
into five regions works well enough. Buttons are large enough to be hit easily but don't take up too much screen
real estate.
The first step is to add the controls onto the page. Open up
engine.js
and add the following object (as
shown in
Listing 3-1
)
to the bottom.
Listing 3-1:
TouchControls for Alien Invasion
var TouchControls = function() {
var gutterWidth = 10;
var unitWidth = Game.width/5;
var blockWidth = unitWidth-gutterWidth;
this.drawSquare = function(ctx,x,y,txt,on) {
ctx.globalAlpha = on ? 0.9 : 0.6;
ctx.fillStyle = "#CCC";
ctx.fillRect(x,y,blockWidth,blockWidth);
ctx.fillStyle = "#FFF";
ctx.textAlign = "center";
ctx.globalAlpha = 1.0;
ctx.font = "bold " + (3*unitWidth/4) + "px arial";
ctx.fillText(txt,
x+blockWidth/2,
y+3*blockWidth/4+5);
};
this.draw = function(ctx) {
ctx.save();
var yLoc = Game.height - unitWidth;
this.drawSquare(ctx,gutterWidth,yLoc,
"\u25C0", Game.keys['left']);
this.drawSquare(ctx,unitWidth + gutterWidth,yLoc,
"\u25B6",Game.keys['right']);
this.drawSquare(ctx,4*unitWidth,yLoc,"A",Game.keys['fire']);
ctx.restore();
};
this.step = function(dt) { };
};
