HTML and CSS Reference
In-Depth Information
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');