Building Games with CSS3 - HTML5 Mobile Game Development - page 226

insert: function(itm) {
if(itm.dom) { this.dom.appendChild(itm.dom); };
return this._super(itm);
},
destroy: function() {
this.wrapper.remove();
this._super();
},
rescale: function(scale) {
this.scale = scale;
Q.scaleDOM(this.wrapper_dom,scale);
},
centerOn: function(x,y) {
this.x = Q.width/2/this.scale - x;
this.y = Q.height/2/this.scale - y;
Q.positionDOM(this.dom,this.x,this.y);
}
});
}
The Q.DOMStage class extends the basic Canvas stage class, so all the methods in the normal Q.Stage
class, including pausing and unpausing are available. The init method has the task to create the DOM element
that acts as a container and the wrapper element that will be used for scaling the container up and down. After
that it just calls the init method of the inherited class to take care of the rest.
The insert and destroy methods similarly call the corresponding method of the super class. In addition,
insert appends the DOM element of the Sprite being added to the container element of the stage. The des-
troy method also makes sure the wrapper element is removed from the page, which removes all the child
elements with it.
The rescale method is new. It uses the Q.scaleDOM method created earlier in the chapter to rescale the
wrapper. This will be used the same way the Canvas was scaled with CSS in earlier chapters to fill the screen
on larger devices such as tablets. The centerOn method repositions the stage, taking into consideration the
current scale and will be used as a camera to follow the player around.
Replacing the Canvas Equivalents
With Q.setupDOM and the Q.DOMSprite and Q.DOMStage classes written, the basic functionality is
done. However, using the DOM equivalents is a little cumbersome. For example, to stage a scene using the
Q.DOMStage class, you need to override the stageClass and write
Q.stageScene(sceneObj,0,Q.DOMStage)
instead of simply
Q.stageScene(sceneObj);