Professional HTML5 Mobile Game Development

Accessing a Game Container Element

For the game to render anything on the screen, it must have an object to draw on. For Canvas games this is a Canvas element. For other types of games, it will be either a regular <div> or an SVG element. To this end you’ll create a flexible setup method on Quintus that grabs a container from a passed-in ID or creates an element from scratch if necessary. The setup method also grabs the context from the element if it’s supported.

Add the code in Listing 10-1 to the bottom of quintus.js from Chapter 9 above the final return Q statement.

Listing 10-1: The Quintus setup and clear methods

 Q.setup = function(id, options) { var touchDevice = 'ontouchstart' in document; options = options || {}; id= id || "quintus"; Q.el = $(_.isString(id) ? "#" + id : id); if(Q.el.length === 0) { Q.el = $("<canvas width='320' height='420'></canvas>") .attr('id',id).appendTo("body"); } var maxWidth = options.maxWidth || 5000, maxHeight = options.maxHeight || 5000, resampleWidth = options.resampleWidth, resampleHeight = options.resampleHeight; if(options.maximize) { $("html, body").css({ padding:0, margin: 0 }); var w = Math.min(window.innerWidth,maxWidth); var h = Math.min(window.innerHeight - 5,maxHeight) if(touchDevice) { Q.el.css({height: h * 2}); window.scrollTo(0,1); w = Math.min(window.innerWidth,maxWidth); h = Math.min(window.innerHeight - 5,maxHeight); } if(((resampleWidth && w > resampleWidth) || (resampleHeight && h > resampleHeight)) && touchDevice) { Q.el.css({ ...