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

Creating the opponent's card

It is time to prepare for the battle. 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 class="back face">back</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;
    } {
      left: 40px;

Engage thrusters

Let's follow these steps to create the opponent's card:

  1. During the setup inside the gameScene module, we create a Card instance for that element so that we can get the power...