Card Battle! - HTML5 Game Development - page 56

2. The card elements are the key elements that we are going to query several imes
during the gameplay. We can cache the querying element instead of asking the
DOM to ind them every ime, as shown in the following code:
;(function(){
// cache node querying
var allPlayerCardElms =
document.querySelectorAll('.card.player');
var allCardElms = document.querySelectorAll('.card');
// rest of game-scene.js code
3. Next, we build the card selecion logic ater gameScene :
gameScene.onShow = function() {
this.startGame();
}
gameScene.startGame = function() {
this.restartGame();
}
gameScene.restartGame = function() {
var animatePlayerCardsIn = function() {
allPlayerCardElms.forEach(function(elm){
elm.classList.remove('out');
elm.classList.add('in');
elm.classList.add('flipped');
});
}
setTimeout(animatePlayerCardsIn, 800); // delay a while
}
gameScene.setup = function() {
// each player card
allPlayerCardElms.forEach(function(elm){
elm.onclick = function(){
/* select a card */
elm.classList.remove('flipped');
elm.classList.add('selected');
/* remove non-selected cards */
document.querySelectorAll('.flipped').forEach(function
(elm){
elm.classList.remove('in');
elm.classList.add('out');
});
}
});
}