Crafting a CSS3 RPG - HTML5 Mobile Game Development - page 230

A better plan of attack would be to create a single tile map sprite that contains all the tiles and that can be
stepped and moved around as a single entity. Because the individual tiles aren't moving, collision detection is
as simple as dividing a position by the size of each tile to get a tile position and checking that one location.
Implementing the DOM Tile Map Class
For all these reasons the engine adds in a class called Q.DOMTileMap , which encapsulates all this functional-
ity. The individual levels of the RPG extend this class to add additional game-specific functionality.
Each tile in the tile map is added as a floated DOM element to increase browser performance. Provided the
width and height of the containing <div> is set correctly, all the floated elements will end up in the right spot
visually.
To prevent the user from seeing the entire dungeon at once, the tile map also supports showing and hiding
individual tiles. (The player reveals the tiles of the level as they move.) Because setting the display method to
none would result in all the floated tiles shifting, the class instead just toggles the visibility property of the
element. As every time the browser reaches in and affects the DOM there is a performance penalty, the tile map
class keeps track of which tiles are shown and hidden in a data structure and changes only the DOM element
when absolutely necessary.
Listing 13-1 shows the code for the Q.DOMTileMap class. Add it to the bottom of quintus_dom.js in
the usual spot before the final closing curly-brace.
Listing 13-1: The DOMTileMap class
Q.DOMTileMap = Q.DOMSprite.extend({
// Expects a sprite sheet, along with cols and rows properties
init:function(props) {
var sheet = Q.sheet(props.sheet);
this._super(_(props).extend({
w: props.cols * sheet.tilew,
h: props.rows * sheet.tileh,
tilew: sheet.tilew,
tileh: sheet.tileh
}));
this.shown = [];
this.domTiles = [];
},
setImage: function() { },
setup: function(tiles,hide) {
this.tiles = tiles;
for(var y=0,height=tiles.length;y<height;y++) {
this.domTiles.push([]);
this.shown.push([]);
for(var x=0,width=tiles[0].length;x<width;x++) {
var domTile = this._addTile(tiles[y][x]);
if(hide) { domTile.style.visibility = 'hidden'; }
this.shown.push(hide ? false : true);