HTML and CSS Reference
In-Depth Information
If you write a DOM-based game, this adds some unnecessary noise to the code, so to keep the code simpler,
add a method that replaces Canvas-based methods and classes with their DOM-based equivalents. You can call
this method before setup to make it easier to work with DOM games.
Add the code in Listing 12-6 to the usual spot at the bottom of quintus_dom.js .
Listing 12-6: The Q.domOnly method
Q.domOnly = function() {
Q.Stage = Q.DOMStage;
Q.setup = Q.setupDOM;
Q.Sprite = Q.DOMSprite;
return Q;
Chaining in this call to the beginning of a game's setup makes it easier to convert a game from Canvas to
Testing the DOM Functionality
Before delving into building a CSS3 nethack-style game, try out the DOM functionality by converting the
simple Blockbreak game from the previous chapter into a DOM-based one.
Open up your blockbreak.html from the previous chapter (or copy the code over to a new directory)
and add a <script> tag to load the quintus_dom.js file you just wrote. You'll also need to change the
style tag to reference #quintus instead of just the canvas element:
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=0,
minimum-scale=1.0, maximum-scale=1.0"/>
<title>Block Break</title>
<script src='jquery.min.js'></script>
<script src='underscore.js'></script>
<script src='quintus.js'></script>
<script src='quintus_input.js'></script>
<script src='quintus_sprites.js'></script>
<script src='quintus_scenes.js'></script>
<script src='quintus_dom.js'></script>
<script src='blockbreak.js'></script>
body { padding:0px; margin:0px; }
#quintus { background-color:black; }
Search WWH ::

Custom Search