HTML and CSS Reference
In-Depth Information
// Quest
// visualize the quest composition view:
var questCompositionNode = document.getElementById('quest-
composition');
// empty the DOM view
questCompositionNode.removeAllChildren();
// visualize the pattern view:
for (var i in patternsToShow) {
var patternNode = document.querySelector('#element-template
.pattern').cloneNode(/*clone children=*/true);
patternNode.setAttribute('data-pattern', patternsToShow[i]);
questCompositionNode.appendChild(patternNode);
}
};
8. We need to modify the game flow in the
game.js
file to show the quest:
game.flow = {
currentLevel: 3,
startLevel: function() {
game.quest = new game.Quest(this.currentLevel);
game.gameScene.visualize(game.quest);
},
...
}
var init = function() {
...
game.flow.startLevel();
}
9. Finally, we will create the view of the paterns and the quest in CSS:
#stage {
position: absolute;
width: 100%;
height: 30px;
line-height: 30px;
}
/* Template */
#element-template {display: none;}
/* quest */
#quest {
