HTML and CSS Reference
In-Depth Information
var div = document.createElement('div'); = p.tilew + "px"; = p.tileh + "px"; = = 'left';
return div;
_setTile: function(dom,frame) {
var asset = Q.asset(this.sheet().asset); = "url(" + asset.src + ")"; = (-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;
show: function(x,y) {
var domTile = this.getDom(x,y);
Search WWH ::

Custom Search