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 battle. The following screenshot shows our planning. We show three cards as a deck at the bottom of the screen. When the player selects one card, we flip the selected card and put it at the center-right side of the screen. The other non-selected cards will hide at the bottom.

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>
  <div class="card player b flipped out&quot...