HTML and CSS Reference
In-Depth Information
hide: function(x,y) {
if(!this.validTile(x,y)) return;
if(!this.shown[y][x]) return;
this.getDom(x,y).style.visibility = 'hidden';
this.shown[y][x] = false;
}
});
This class is a little complicated so break it down into three chunks. The first part, the init method, sets up
the tile map's properties:
Q.DOMTileMap = Q.DOMSprite.extend({
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() { },
init pulls out the spritesheet and the number of rows, columns, and tiles from the passed-in properties and
uses that to calculate the width and height of the sprite. It calls the this._super() method to let the DOMS-
prite class finish the initialization and creation of the actual DOM element. The init method of DOMS-
prite also calls setImage to set a background image on the sprite, but because the DOMTileMap element
doesn't need a background image, this method is overridden to be an empty stub method.
Next are the three methods used to take a 2-D array of tile frames and create the tile map:
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);
this.domTiles[y].push(domTile);
}
}
},
_addTile: function(frame) {
var p = this.p;
Search WWH ::




Custom Search