Creating a Two-Dimensional Map Editor - HTML5 Game Development Insights - page 357

TileList.prototype.bind = function(sprites) {
var list = this.byId;
for (var i=0;i<list.length;i++)
list[i].bind(sprites);
}
Map Field and Its Serialization to JSON
Your map field has two layers: surface and objects. Actually, there is no specific reason for the two-layer limit; it's just
the case on which we're working in this chapter, based on the author's experience with dynamic multiplayer worlds.
As discussed previously, the code can be expanded as you like without too much effort.
Sometimes, dynamic tile indexes prevent the hacking of a multiplayer game. If the order of the tiles in the list is
always random, a hacker would have to track all those dynamic IDs.
Serialization is the difficult part here, because between saving the map and loading it after application restart,
the configuration can change, and that changes all tile indexes. This is not a problem if you store the names of the tiles
that you were using for specific indexes. Later, you can load and save the map from localStorage . Note that you can't
add functions to objects that will be saved, because you are going to use JavaScript Object Notation (JSON) format:
function createTwoDimArray(dim1, dim2, def) {
var res = [];
for (var j=0;j<dim1; j++) {
var a = [];
for (var i=0;i<dim2; i++)
a.push(def);
res.push(a);
}
return res;
}
MapField is a basic object for rendering the entire field, based on simple two-dimensional arrays and created for
each type of tile (surface and object):
function MapField(tiles, cols, rows) {
this.tiles = tiles;
this.cols = cols;
this.rows = rows;
this.surface = createTwoDimArray(rows, cols, tiles.defaultSurface);
this.objects = createTwoDimArray(rows, cols, tiles.defaultObject);
}
MapField.prototype = {
rows: 0,
cols: 0,
checkBounds: function(col, row) {
return col>=0 && col < this.cols && row>=0 && row < this.rows;
},
getSurface: function(col, row) {
return this.checkBounds(col, row) && this.surface[row][col] || this.tiles.defaultSurface
},