HTML and CSS Reference
In-Depth Information
Next, open up the
blockbreak.js
file and modify the initial setup calls to include the DOM module and
chain in a call to
domOnly()
.
$(function() {
var Q = window.Q = Quintus()
.include('Input,Sprites,Scenes,DOM')
.domOnly()
.setup();
Q.input.keyboardControls()
Because the
domOnly()
method replaces all the Canvas classes with their DOM-based equivalents, no oth-
er changes to the code need to be made.
Fire up the game in a browser. You'll need to run it off of localhost as usual, as it loads JSON data.
You should see the same game as in the previous chapter, with the exception of the movement controls on
the bottom of the screen on mobile. The hotspots for controlling the paddle still work but because no code has
been written to display the buttons, nothing appears on the screen on mobile.
If you inspect the page in Chrome, you can notice that all the blocks along with the paddle and ball are actual
DOM elements. You now have an HTML5 game that runs in IE6!
Summary
In this chapter you learned how to build games using DOM elements by using performance-optimized trans-
forms and transitions. You also added DOM element support to the Quintus engine and converted the
Block-
break
example to a DOM-based game with just a few lines of code.