Game Development Reference
In-Depth Information
continueGame: function(){ /* ... */ },
newGame: function(){ /* ... */ scene('newgame'); },
game: function(){ /* ... */ scene('game'); },
help: function(){ /* ... */ scene('help'); }
}
}();
Listing 3-8.
Starting the Router Entry Point of the Game Controller
$(document).ready(function(){
ns.Controller.init();
$(window).bind("hashchange", function() {
var uri = !location.hash ? '/' :location.hash.replace('#!','');
ns.Controller.route(uri);
}).trigger("hashchange");
});
Coding our Chess Game
After setting up some game pages, let's get to the heart of the matter. We will start by writing a quick
specification of the game and then have a look at the main parts of the code.
Game specification
We will start by specifying the user interface. This means defining the HTML structure, the basic styles,
states and properties that each element can have. Each state will be translated via a class, which will also
help us to style the game with CSS.
The game chessboard is an 8
×
8 square board. We have chosen to represent it with a
div#chessboard
element (a div with the chessboard id) containing 64
div
empty elements (created in JavaScript). Each of
these elements represents a square ordered from left to right and from top to bottom.
Note
We could have used a table element, but our solution is still viable: CSS can help
us to style a sequence of div elements like a table.
We define the states of the chessboard, the classes we are going to set on #chessboard:
player-black | player-white
means it's the black (or white) player's turn.
Let's now establish the states (and classes) that we are going to use on each square:
A
square code
to identify a square in the chessboard and follow chess name conventions: (from
a1
to
h8
)
lighter
indicates the square is lighter on the chessboard (1 out of 2 vertically and horizontally)
piece
indicates the square has a
piece
black | white
indicates the
color
of the piece
