HTML and CSS Reference
In-Depth Information
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content=
Now reload the game, and then click the button to add it to your home screen. With the exception of a small
sliver of status bar at the top of the page, your game can now run full screen. (See Chapter 6 for a full explana-
tion of these tags.) You can also run the version of the game to this point at .
Adding a Score
There's still one obvious piece to the game that is clearly missing: a point system for users to brag about to their
friends. This is something that you can remedy quickly by adding a new game board to the game.
Add the contents of Listing 3-4 to the bottom of engine.js .
Listing 3-4: GamePoints
var GamePoints = function() {
Game.points = 0;
var pointsLength = 8;
this.draw = function(ctx) {;
ctx.font = "bold 18px arial";
ctx.fillStyle= "#FFFFFF";
var txt = "" + Game.points;
var i = pointsLength - txt.length, zeros = "";
while(i-- > 0) { zeros += "0"; }
ctx.fillText(zeros + txt,10,20);
this.step = function(dt) { }
This object has one purpose in its life: to draw the score in the top left of the game. The current score for
the game is stored directly on the Game object in a property named points . Every time a new GamePoints
object is created, the game assumes a new game is beginning and resets the score to 0 .
For every frame, the game grabs the current score and pads it with leading zeros so that it's always point-
sLength digits long. It then calls fillText to draw the points onto the screen.
To get the points onto the page, a GamePoints object needs to be created. Open up game.js and add the
initializer to the fifth board:
var playGame = function() {
var board = new GameBoard();
Search WWH ::

Custom Search