HTML and CSS Reference
In-Depth Information
var div = document.createElement('div');
div.style.width = p.tilew + "px";
div.style.height = p.tileh + "px";
div.style.styleFloat = div.style.cssFloat = 'left';
this._setTile(div,frame);
this.dom.appendChild(div);
return div;
},
_setTile: function(dom,frame) {
var asset = Q.asset(this.sheet().asset);
dom.style.backgroundImage = "url(" + asset.src + ")";
dom.style.backgroundPosition = (-this.sheet().fx(frame)) +"px " +
(-this.sheet().fy(frame)) + "px";
},
The
setup
method takes in the 2-D array, creates the DOM element by calling the internal helper method
_addTile
, and updates the
domTiles
and
shown
arrays with the appropriate values. The
domTiles
array
contains a 2-D array that matches the
tiles
array, except it points to the actual DOM elements so that they
can be manipulated. The
shown
array is a 2-D array of booleans that keeps track of which tiles are visible and
which are hidden.
The _
addTile
method takes in a frame and returns the DOM element set to that frame. Because lots of
DOM elements are going to be created, the engine uses the native
document.createElement
method as
opposed to the usual jQuery method to get a little speed advantage where possible. Setting the
float
property
is also a little tricky because different browsers refer to it differently when it's accessed via JavaScript. Rather
than try to determine which way is correct, the method takes the shortcut of just setting both options. It also
calls
_setTile
as a shortcut to set the background image and background image position correctly based on
the frame.
The last section of the class retrieves and updates the tiles in the tile map:
validTile: function(x,y) {
return (y >= 0 && y < this.p.rows) &&
(x >= 0 && x < this.p.cols);
},
get: function(x,y) { return this.validTile(x,y) ?
this.tiles[y][x] : null; },
getDom: function(x,y) { return this.validTile(x,y) ?
this.domTiles[y][x] : null; },
set: function(x,y,frame) {
var domTile = this.getDom(x,y);
if(!domTile) return;
this.tiles[y][x] = frame;
this._setFile(domTile,frame);
},
show: function(x,y) {
var domTile = this.getDom(x,y);
