HTML and CSS Reference
In-Depth Information
Selecting a card
To select a card, we will make use of the cards and their flipping effects to let the player select
one card among the choices.
Prepare for lift off
The previous task focuses on defining the card style. In this task, we let the player choose
one card in each round of batle. The following screenshot shows our planning. We show
three cards as a deck at the botom of the screen. When the player selects one card, we lip
the selected card and put it at the center-right side of the screen. The other non-selected
cards will hide at the botom.
Now, in the
index.html
file, we change the card elements inside
game-scene
into three
cards for the player, as shown in the following code:
<div id="game-scene" class="scene out">
<div class="card player a flipped out">
<div class="front face"></div>
<div class="back face"></div>
</div>
