Game Development Reference
In-Depth Information
This means that only the current page is in the viewport of the browser (and take the full space with the
styles we defined), other pages are outside, so are effectively invisible. We define a 1-second transition
duration to perform a smooth animation.
The
opacity
transition is indispensable: it prevents pages from showing up where they aren't wanted,
especially sections that transit from state B to state C and vice versa.
This transition is a little special: there is no
transition-duration
, only
transition-delay
, which is used for
the opacity property. Basically, if the page is current, it takes a full opacity (opacity set to 1), otherwise it is
transparent (opacity set to 0). Just doing that, this will not work because transparency would occur before
the page switch animation ends. To ensure this blink effect doesn't occur, we have set a transition delay to
2 seconds.
JavaScript, a high-level dynamic language
JavaScript is a dynamic and weakly-typed script language supporting imperative, functional, and oriented-
object programming paradigms. It follows the ECMAScript standard.
HTML provides a JavaScript API called DOM (Document Object Model), which allows us to work with the
document tree.
JavaScript libraries like jQuery (and its little brother, Zepto) help us work with the DOM, and provide full
support of its features for whatever the browser used. We'll cover more on jQuery and Zepto a little further
into the chapter.
Coding the game controller
Let's finish our page system by making a router and a controller for our game. The router is the entry point
of a controller's action. It helps to bind a URL to an action: when the URL hash changes, the related action
is called. This is done with the
hashchange
event.
We have made a scene function, which just moves the “
current
” class on the right page.
Listing 3-7.
The Game Controller
ns.Controller = function(){
var scene = function(id){
$('#'+id).addClass('current').siblings().removeClass('current')
}
return {
route: function(path) {
callRouteChangeFunctions();
if(path=="/") return this.index();
if(path=="/menu") return this.menu();
if(path=="/game/continue") return this.continueGame();
if(path=="/game/new") return this.newGame();
if(path=="/game") return this.game();
if(path="/help") return this.help();
},
index: function(){ return this.menu(); },
menu: function(){ /* ... */ scene('menu'); },
