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.
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>
We are now going to put all the health points code in a new file:
Let's create a new file named
hp.jsunder thejsfolder. Then, we include the newly created JavaScript file in HTML before importing ourgame-scene.jsfile:<script src='js/hp.js'></script>
Next, as usual, the styling will be for our health points interface. We can append it to the end of the
game.cssfile:.hp-background { border-bottom: 1px solid #333; background: #ababab;...