Bootstrapping the Quintus Engine: Part II - HTML5 Mobile Game Development - page 166

Chapter 10
Bootstrapping the Quintus Engine: Part II
What's in this chapter?
• Capturing input
• Drawing onscreen controls
• Loading assets
Wrox.com Code Downloads for this Chapter
The wrox.com code downloads for this chapter are found at www.wrox.com/rem-
title.cgi?isbn=9781118301326 on the Download Code tab. The code is in the chapter 10 download and individu-
ally named according to the names throughout the chapter.
Introduction
In the last chapter the seeds of a reusable engine were planted. This chapter fills out that base with classes to get
something onto the screen, accept user input, and load assets.
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 Can-
vas 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>")