In this task, we allow players to select the pattern from their decks and display the sequence of the selection in the composition view.
Perform the following steps to add user interaction to our game:
We allow players to undo their selection, so we need to add an undo button to the
index.html
file:<a href="#" id="undo-button" class="button">Undo</a>
When starting a level in the
game.js
file, we store the player's selection sequence and register the clicking event by adding the following highlighted code:startLevel: function() { game.quest = new game.Quest(this.currentLevel); game.compositionSeq = []; game.composition = new game.Composition(); game.gameScene.visualize(game.quest); game.gameScene.handleInput(); },
In the
patch.js
file, we need to addforEach
to theNodeList
andHTMLCollection
objects using the following code:NodeList.prototype.forEach = Array.prototype.forEach; HTMLCollection.prototype.forEach = Array.prototype.forEach;
In the
composition-view.js
file, we need the following methods to display the pattern selection in the composition's DOM element:game.compositionView = { node: document.getElementById('your-composition'), pushPattern: function(patternId) { var newChild = document.createElement('div'); newChild.classList.add('pattern'); newChild.setAttribute('data-pattern', patternId); this.node.appendChild(newChild); }, pullPattern: function() { var lastChild = this.node.querySelector('.pattern:last-child'); if (lastChild) { // find the pattern in the deck and make it visible var deckNode = document.getElementById('deck'); var resumePattern = deckNode.querySelector('[data-pattern="' + lastChild.getAttribute('data-pattern') + '"]'); resumePattern.style.display = 'block'; // remove the current pattern this.node.removeChild(lastChild); } }, selectPattern: function(pattern) { this.pushPattern(pattern); game.compositionSeq.push(pattern); }, undo: function() { this.pullPattern(); game.compositionSeq.pop(); }, };
Then, we need the mouse event to invoke our selection logic. In the
scenes.js
file, we add the following clicking event to thegameScene
:gameScene.handleInput = function() { document.querySelectorAll("#deck .pattern").forEach(function(elm){ elm.onclick= function(){ var pattern = elm.getAttribute('data-pattern'); elm.style.display = 'none'; game.compositionView.selectPattern(pattern); }; }); var undoBtn = document.getElementById('undo-button'); undoBtn.onclick = function(e){ game.compositionView.undo(); e.preventDefault(); }; };
Let's move to styling. We have a new undo button, so we need the following CSS rules to place it in the right position with the image:
#undo-button { position: absolute; right: 70px; top: 240px; z-index: 999; background: url(images/undo_btn.png) no-repeat; width: 90px; height: 26px; } #undo-button:hover {background-position: 0 -26px;}
Also, we add mouse-related styling to the pattern's slot:
.pattern-slot:hover{outline-color: #D68700;} .pattern-slot:active {outline-color: #BC7702;}
The selection is done by the click event on the pattern. Basically, we get the pattern ID from the data-
attribute. Once the pattern ID is known, it triggers the following method:
game.compositionView.selectPattern(pattern);
Then, the composition pushes the selection into an array.