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

Ending the game

In this task, we will add a life system to give the game an ending. For each box that passes through the dead line, we deduce one life. The game continues until a player loses all the life points.

Prepare for lift off

Before we get into the logic, we would like to define how many lives a player gets in each game. We define this value in the setting object, as shown in the following code:

game.setting = {    
  initialLifes: 3,
  // existing settings go here.

Engage thrusters

Let's code the game-end logic with the following steps:

  1. We have defined three lives per game so we will use three hearts to represent three lives. Before we add bitmap graphics, we use a RectShape function to represent a heart. Furthermore, we will use a container object to store all the hearts so it can be easily placed on the stage. In the final task, we will replace all these RectShapes functions into bitmap graphics of the shape of a heart. Append the following code inside the gameView object: