Adding health points to the game

In this task, we are going to add health points to both the player and the opponent. We reduce the health points during the battle if any side gets hurt.

Prepare for lift off

First, we define the user interface of the health points in HTML. Put the following code in the index.html file, right after opening the #game-scene tag. We also create a battle indicator:

<div class="hp-background">
  <div class="hp opponent"></div>
  <div class="hp player"></div>
</div>

Engage thrusters

We are now going to put all the health points code in a new file:

1. Let's create a new file named hp.js under the js folder. Then, we include the newly created JavaScript file in HTML before importing our game-scene.js file:

   <script src='js/hp.js'></script>

2. Next, as usual, the styling will be for our health points interface. We can append it to the end of the game.css file:

   .hp-background {
     border-bottom...