HTML and CSS Reference
In-Depth Information
The entry point of the battle animation
There is going to be a long animaion sequence ater the player selects a card. In this task, we
get the entry point of the batle prepared. We deine the
beginBattleAnimation
method
where we move in the opponent's card. In the next task, we will add the enire animaion
sequence inside this method.
Building the battle animation
This is a major task that deines the enire batle animaion. Ater both the player's card and
opponent's card are on stage, the player's card emits a flame blaze towards the opponent
and then the opponent emits another blaze towards the player. The following screenshot
shows the blaze being emited from the player's card on right-hand side towards the
opponent's card:
Prepare for lift off
First, we need two more game objects—the blaze towards the left and the blaze towards
the right. Add them to the HTML before the end of the game-scene element, as shown in
the following code:
<div class="blaze toward-left"></div>
<div class="blaze toward-right"></div>
