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 create a new module to randomize all the power values. Prepend the following code in the game-scene.js file. The benefit of separating this logic is to make changing the power formula easy in...