Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

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 class="card player b flipped out">
    <div class="front face"></div>