HTML and CSS Reference
In-Depth Information
Engage thrusters
Let's coninue the batle with the following steps:
1. Inside the
gameScene.restartGame
method, we add the following code to toggle
the
out
and
flipped
state for all the cards:
/* reset the transition state */
allCardElms.forEach(function(elm){
elm.classList.remove('in');
elm.classList.add('out');
});
allPlayerCardElms.forEach(function(elm){
elm.classList.remove('selected');
elm.classList.add('flipped');
});
2. Remember that we have commented out the
restartGame
method calling in the
previous task. Now, we can enable this method calling by removing the comments.
The batle round then repeats unil the game ends:
gameScene.restartGame();
3. At last, when the game over scene appears, we determine which side wins and then
show the win/loss screen correspondingly:
gameOverScene.onShow = function() {
if (game.HP.isPlayerDead()) {
this.node.classList.add('loss');
this.node.classList.remove('won');
} else {
this.node.classList.add('won');
this.node.classList.remove('loss');
}
}
Objective complete - mini debriefing
The
onShow
method is called whenever the
scene.show
method is called. So, this is a good
ime to change the background to show the win or loss background.
