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.setBoard(4,new TouchControls());
// 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"); }
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.
Search WWH ::

Custom Search