HTML and CSS Reference
In-Depth Information
This object sets up some values based on the width of the game that will be used to draw objects. Each block
is set up to be 1/5th of the width minus a 10-pixel gutter to separate the buttons.
For each frame, the object's
draw
method is called. This method calls an internal method,
drawSquare
,
which draws a single rectangle with some text on it at the specified location. Instead of drawing triangles, the
code uses the Unicode UTF-8 symbols for the left and right arrows. The characters \u25C0 and \u25B6 repres-
ent left and right triangles.
NOTE
Unicode characters can be expressed in JavaScript by prefixing backslash u (\u) in front of the
UTF-8 code for that letter or symbol.
The
draw
method uses the
save
and
restore
methods on the 2-D canvas context to prevent the changes
to opacity and font from affecting any other canvas calls.
The
drawSquare
method does most of the actual work. It takes in an
x
and
y
location, the text to draw
on the button, and determines whether the button is currently held down; then it draws a filled rectangle and
text to create the button. The button state is used to set the opacity using the
globalAlpha
property for the
background of the button so that players can see when they press down the button.
To actually have this board appear, it needs to be added to the
Game
object on initialization. Modify the
Game.initialize
in the
engine.js
method by adding the
setBoard
call as well as a couple of prop-
erties onto
Game
that are used by
TouchControls
:
// Game Initialization
this.initialize = function(canvasElementId,sprite_data,callback) {
...
this.setupInput();
this.setBoard(4,new TouchControls());
this.loop();
SpriteSheet.load(sprite_data,callback);
};
// Game Initialization
this.initialize = function(canvasElementId,sprite_data,callback) {
this.canvas = document.getElementById(canvasElementId);
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();
this.loop();
SpriteSheet.load(sprite_data,callback);
};
Touch controls aren't yet enabled to control the player, but if you use the keyboard, you should see the but-
tons light up in response to the controls as if they were pressed.
