Game Development Reference
In-Depth Information
var c = String.fromCharCode(i+97);
self.pieces.push( piece('white', firstRowTypes[i], c+'1') );
self.pieces.push( piece('white', 'pawn', c+'2') );
self.pieces.push( piece('black', 'pawn', c+'7') );
self.pieces.push( piece('black', firstRowTypes[i], c+'8') );
}
}
// ... the rest of the game logic code ...
}
We can now focus on the game logic code independently of the content and the style.
The Renderer class
The Renderer class intends to bring the game logic (from the Game class) into the DOM. It helps the
Game class development to focus only on the pure logic of the game; whereas the Renderer will connect it
to the user interface. Following our game specification, all it will do is update classes on squares, as
shown in Listing 3-11.
Listing 3-11.
Renderer class
ns.Renderer = function(){
var self = this;
self.init = function(game){
self.game = game;
self.board = $('#chessboard').empty();
forEachPosition(function(p){ /* init chessboard squares */ });
self.render();
self.game.bindChange(function(){ self.render() });
return this;
}
self.render = function(){
self.board[0].className = 'player-'+self.game.currentPlayer;
forEachPosition(function(p, l, d){ // on each square p:
// [code] Update the classes of p for the current game state
});
// [code] update black eated div
// [code] update white eated div
}
}
The Storage class
We will use Local Storage, an HTML5 feature that allows us to persist data on the client side.
The
localStorage
variable has three main methods:
A setter
setItem(key, text)
A getter
getItem(key)
and a “remover”
removeItem(key)
