HTML and CSS Reference
In-Depth Information
Engage thrusters
Let's work on the patern with the following steps:
1. In the game scene of the
index.html
file, we add two DOM elements, namely,
#your-composition
and
#deck
:
<div id="game-scene" class="scene out">
...
<div id="your-composition"></div>
<div id="deck" class="deck"></div>
</div>
2. In the template element, we add the template for the patern's slot:
<div id="element-template">
<!-- for deck view -->
<div class="pattern-slot">
<div class="pattern" data-pattern="1"></div>
</div>
...
</div>
3. The following is our
composition-view.js
file:
(function(){
var game = this.colorQuestGame =
this.colorQuestGame || {};
// composition module
game.compositionView = {
node: document.getElementById('your-composition'),
};
})();
4. Before the end of the
gameScene.visualize
method, we add the visualizaion
logic for the player's composiion:
// randomize the patterns array
patternsToShow.sort(function(a, b){
return Math.random() - 0.5;
});
// empty the current deck view
var deckNode = document.getElementById('deck');
deckNode.removeAllChildren();
// add the pattern to the deck view
