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.
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
DOM.
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:
<!DOCTYPE HTML>
<html lang="en">
<head>
<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>
<style>
body { padding:0px; margin:0px; }
#quintus { background-color:black; }
</style>
</head>
<body>
</body>
</html>
