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
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() {
console.log("Power of opponent card: ",
3. Now, when any player's card is selected, we execute the batle animaion ater all
the exising code:
elm.onclick = function(){
/* original code: select a card */
/* original code: remove non-selected cards */
/* battle */
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.
Search WWH ::

Custom Search