Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

Adding a launch bar with power

The player doesn't know how much power needs to be applied to the ball. This will lead to confusion. We can improve this by displaying a power indicator when shooting the ball.

Prepare for lift off

We will create the hierarchy directly from Flash. The following screenshot shows the symbol hierarchy:

Then, we export these graphics into a JS file that we can use directly in the CreateJS library. Or, you can find the file from the code bundle.

We create another new file, view.js. We will place the logic to control the assets there. Specifically, we control the power indicator graphics inside this file.

We will need to include the new files into the HTML before we move on:

<script src="scripts/assets.js"></script>
<script src="scripts/view.js"></script>

Engage thrusters

Let's execute the following steps to create the power indicator:

  1. First, we set up a new file called view.js. Inside the file, we initialize the power indicator graphics and define...