Building a CSS Quest Game - HTML5 Game Development - page 19

</div>
</div>
<div id='element-template'>
<!-- for composition view -->
<div class="pattern" data-pattern='1'></div>
</div>
2. We will import the three files at the end of HTML file. They are patch.js ,
composition.js , and quest.js :
<script src='js/patch.js'></script>
<script src='js/composition.js'></script>
<script src='js/quest.js'></script>
<script src='js/scenes.js'></script>
<script src='js/game.js'></script>
3. We want to make it easy to remove all the DOM elements from the quest view.
This is why we have a patch file. Put the following code in the patch.js file: to
add the removeAllChildren method to all the DOM nodes:
// add removeAllChildren to Node object.
Node.prototype.removeAllChildren = function() {
while(this.firstChild) {
this.removeChild(this.firstChild);
}
};
4. Then, we add a basic skeleton to the composition.js file:
(function(){
var game = this.colorQuestGame = this.colorQuestGame || {};
// composition model definition
// composition is a deck of pattern put together
var Composition = game.Composition = (function(){
function Composition(){
this.data = [];
}
return Composition;
})();
})();