Game Development Reference
In-Depth Information
The native resolution of the Jewel Jam game is big (1440 × 1080), so scaling is definitely necessary if
you want the game to run properly on all smartphones and tablets. You also pass along the name of
the div element containing the canvas. The reason is that you change the margin of this div so the
game is displayed nicely in the middle of the screen, in case the screen ratio differs from the
game-size ratio (see Figure 13-1 ).
Figure 13-1. You have to make sure the game screen is always nicely displayed in the middle of the browser window!
In the Game.start method, you store the size of the game in a member variable _size . You also
define a read-only property size to access that member variable. This way, you indicate to the users
of the Game class that they aren't supposed to change the native size of the game while the game is
running. You pass along the identifiers for the game area and the canvas to the Canvas2D.initialize
method, because you have to do the legwork of scaling and positioning the sprites in the methods
belonging to Canvas2D . This is the complete Game.start method:
Game_Singleton.prototype.start = function (divName, canvasName, x, y) {
this._size = new Vector2(x, y);
Canvas2D.initialize(divName, canvasName);
this.loadAssets();
this.assetLoadingLoop();
};
In Canvas2D , you store a reference to the div element so you can use that to change margins later.
You retrieve that element the same way you retrieved the canvas element:
this._canvas = document.getElementById(canvasName);
this._div = document.getElementById(divName);
You need to calculate the scaling factor to apply every time the browser window is resized. You can
do this by attaching an event-handler function, as follows:
window.onresize = Canvas2D_Singleton.prototype.resize;
 
Search WWH ::




Custom Search