Building an Isometric City Game - HTML5 Game Development - page 159

We will need two more JS files for this task. Create the following two JS files inside the
scripts folder:
scripts/view-sprites.js
scripts/helpers.js
For newly created files, we need to include them inside our index.html file before loading
the game.js file:
<script src="scripts/view-sprites.js"></script>
<script src="scripts/helpers.js"></script>
The view-sprites.js file defines individual game sprites, such as Tile and Buildings .
The helper.js ile provides useful uiliies. In this task, we need to create a 2D array and
add the following create2DArray funcion to help.
Insert the following code inside the helper.js file:
var game = this.game || (this.game={});
var createjs = createjs || {};
;(function(game, cjs){
game.helper = game.helper || {};
game.helper.create2DArray = function(rows, cols, initialValue) {
var array = [];
for(var i=0; i<rows; i++) {
array[i] = [];
for (var j=0; j<cols; j++) {
array[i][j] = initialValue;
}
}
return array;
};
}).call(this, game, createjs);
Engage thrusters
In the following steps, we will lay the iles on the city loor in a 9 x 9 ile grid:
1. In the view-sprites.js file, we define the Tile class. Every ile on the map has
its own coordinates in the isometric array. The funcion argument is the bitmap
path. By default, we use our tile.png file:
var game = this.game || (this.game={});
var createjs = createjs || {};