HTML and CSS Reference
In-Depth Information
Engage thrusters
Let's follow these steps to create the opponent's card:
1. During the setup inside the
gameScene
module, we create a
Card
instance for that
element so that we can get the power of this card later:
var opponentCard = new
Card(document.querySelector('.card.opponent'));
2. Next, we deine the entry point of the batle animaion funcion. Place the following
funcion code inside the
gameScene.setup
method. It toggles the opponent state
to make it visible in the game scene. Also, note that we are using
opponentCard.
node
because it is a
Card
instance instead of the raw element node:
var beginBattleAnimation = function() {
opponentCard.node.classList.remove('out');
opponentCard.node.classList.add('in');
console.log("Power of opponent card: ",
opponentCard.power());
}
3. Now, when any player's card is selected, we execute the batle animaion ater all
the exising code:
allPlayerCardElms.forEach(function(elm){
elm.onclick = function(){
/* original code: select a card */
/* original code: remove non-selected cards */
/* battle */
beginBattleAnimation();
}
});
Objective complete - mini debriefing
We created the opponent's card and started the batle by showing the opponent's card in the
game scene.
The opponent card's transition
We have deined the transiion duraion and easing funcion in the card-lipping task. In this
task, we only need to define the
in
and
out
posiion for the opponent's card. Also, we have
added a 0.8 second delay to the transiion in animaion to make the animaion look smooth.
