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>
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>
3. The following is our composition-view.js file:
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');
// add the pattern to the deck view
Search WWH ::

Custom Search