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

for (var i in patternsToShow) {
var patternSlotNode = document.querySelector
('#element-template .pattern-slot').cloneNode
(/*clone children=*/true);
patternSlotNode.querySelector('.pattern')
.setAttribute('data-pattern', patternsToShow[i]);
deckNode.appendChild(patternSlotNode);
}
5. From the game.js ile, we remove all the selected paterns before staring a
new level:
nextLevel: function() {
...
game.compositionView.node.removeAllChildren();
this.startLevel();
},
6. We need the following CSS style for the composiion and paterns:
/* player's composition and pattern */
#your-composition {
position: absolute;
width: 100px;
height: 100px;
right: 65px;
top: 120px;
border: 3px solid #999;
}
#your-composition > .pattern {
width: 100px;
height: 100px;
position: absolute;
}
/* deck and pattern */
.deck { position: absolute;
top: 360px;
left: 20px;
}
.pattern-slot {
width: 100px;
height: 100px;
outline: 4px solid #BC7702;
float: left;
border-radius: 3px;
margin: 10px 0 0 10px;
}