O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding a power value to the cards

In this task, we will add a power value to the cards. We will also create a Card object to get the original value back.

Prepare for lift off

Before going into the core part, we will get the interface prepared.

There is not much to add in HTML. Add the power element inside the front face element, as shown in the following code:

<div class="front face">
  <div class="power">100</div>
</div>

Also, add some very basic CSS styling to define the power text, which is large and aligned in the center, as shown in the following code:

.card .power{
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 30px;
  font-size: 2em;
}

Engage thrusters

The core part of this task is the JavaScript logic, explained as follows:

  1. First, we ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required