It is time to prepare for the battle. In this task, we will create the opponent's card.
As usual, we will prepare the interface before adding logic to the game using the following steps:
In the
index.html
file, append the following opponent's card object after our player's cards:<div class="card opponent out"> <div class="front face"> <div class="power">100</div> </div> <div class="back face">back</div> </div>
The opponent's card is going in from the left side of the game scene. We define the style of placement and also the out and in classes for the JavaScript to toggle:
.card.opponent { bottom: 250px; } .card.opponent.out { left: -200px; } .card.opponent.in { transition-delay:.8s; left: 40px; }