Card Battle! - HTML5 Game Development - page 61

Classified intel
When do you deine an object deiniion and when do you declare an object instance directly?
When something is going to be reused many imes, declaring the deiniion allows us to
create many instances using the new operator. Otherwise, if we just need the object once,
an object instance is more than enough.
Creating the opponent's card
It is ime to prepare for the batle. In this task, we will create the opponent's card.
Prepare for lift off
As usual, we will prepare the interface before adding logic to the game using the
following steps:
1. 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>
2. 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;
}