Game Development Reference
In-Depth Information
this.onOrientationChange();
} else {
window.onresize = this.resizeGame;
this.resizeGame();
}
}
Device.onOrientationChange = function () {
var me = this;
setTimeout(me.resizeGame, 100);
}
Device.resizeGame = function () {
var nTop, nLeft, scale;
var gameWrapper = document.getElementById('gameWrapper');
var w = window.innerWidth;
var h = window.innerHeight;
var nWidth = window.innerWidth;
var nHeight = window.innerHeight;
var widthToHeight = canvas.width / canvas.height;
var nWidthToHeight = nWidth / nHeight;
if (nWidthToHeight > widthToHeight) {
nWidth = nHeight * widthToHeight;
scale = nWidth / canvas.width;
nLeft = (w / 2) - (nWidth / 2);
gameWrapper.style.left = (nLeft) + "px";
gameWrapper.style.top = "0px";
}
else {
nHeight = nWidth / widthToHeight;
scale = nHeight / canvas.height;
nTop= (h / 2) - (nHeight / 2);
gameWrapper.style.top = (nTop) + "px";
gameWrapper.style.left = "0px";
}
canvas.setAttribute("style", "-webkit-transform:scale(" + scale +
")");
window.scrollTo(0, 0);
}
window.game.Device = Device;
}());
This code should all look very familiar to you. The only difference here is that it is all wrapped up in an object that
can be called upon when initializing your application. The
prepare
function is called after all necessary values have
been set—primarily the references to the
canvas
element and its size.
Creating the Application Class
The application class,
Villager
, is used to manage state by loading, running, and unloading game scenes. Again,
this should be review to you at this point. Looking at the code, a few new states are introduced to adhere to this
application, including a level select and a level complete scene. Listing 14-4 shows the
Village.js
file in its entirety.
