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 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> ...

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