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

Selecting the pattern
In this task, we allow players to select the patern from their decks and display the sequence
of the selecion in the composiion view.
Engage thrusters
Perform the following steps to add user interacion to our game:
1. We allow players to undo their selecion, so we need to add an undo buton to the
index.html ile:
<a href="#" id="undo-button" class="button">Undo</a>
2. When staring a level in the game.js ile, we store the player's selecion 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();
},
3. In the patch.js file, we need to add forEach to the NodeList and
HTMLCollection objects using the following code:
NodeList.prototype.forEach = Array.prototype.forEach;
HTMLCollection.prototype.forEach =
Array.prototype.forEach;
4. In the composition-view.js file, we need the following methods to display the
patern selecion in the composiion'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');