Finishing Up and Going Mobile - HTML5 Mobile Game Development

HTML and CSS Reference

In-Depth Information

"black">

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 http://mh5gd.com/ch3/resize .

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.save();

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);

ctx.restore();

}

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

Home