HTML and CSS Reference
In-Depth Information
.css({width: 320, height:420 })
if(options.maximize) {
var w = $(window).width();
var h = $(window).height();
Q.wrapper = Q.el
.wrap("<div id='" + id + "_container'/>")
.css({ width: Q.el.width(),
height: Q.el.height(),
margin: '0 auto' });
Q.el.css({ position:'relative', overflow: 'hidden' });
Q.width = Q.el.width();
Q.height = Q.el.height();
setTimeout(function() { window.scrollTo(0,1); }, 0);
$(window).bind('orientationchange',function() {
setTimeout(function() { window.scrollTo(0,1); }, 0);
return Q;
This code creates the initial module wrapper method and also creates the setupDOM method. This is the
counterpart to Q.setup() for Canvas-based games. It either uses an existing DOM element or creates a new
one to be a wrapper for the game. If the maximize option is passed in, the method resizes the container to fit the
screen. Next, it creates a wrapper container around that element to center it on the page. It also sets the element
to be positioned to allow elements inside it to be positioned absolutely as necessary, and it sets the overflow
property to hidden to prevent any elements in the game from appearing outside of the game container.
Creating a Consistent Translation Method
Before adding in the DOMSprite and DOMStage classes to actually get something onto the screen, the issue
to get a consistent positioning method needs to be solved.
The idea is to find the best-performing method the browser in question supports and then bind that to a con-
sistent method name so that the rest of the DOM support doesn't need to know how exactly elements are po-
sitioned. CSS3 defines support for the transform property, which depending on the browser supports trans-
late(..) and translate3d(..) values that can move elements around more efficiently than using the
traditional left and top properties. translate3d in particular results in hardware-accelerated transforms
being applied to DOM elements.
Search WWH ::

Custom Search