Lesson 50: Lives

Released in 1985 with the Nintendo Entertainment System, Super Mario Bros was a ground-breaking game. You may wonder if HTML5 and JavaScript are powerful enough to replicate a game such as this. In fact, it has been done and was available for free for one month before taken down for copyright infringements. See more details at www.fullscreenmario.com.

Image from: http://gamessaga.com/super-mario-brothers

In these last few lessons, you have accomplished much of core the functionality of Super Mario Bros, such as the ability to jump on platforms and progress through levels. Now you will implement another feature of Super Mario Bros, and most other games, by giving your player multiple lives.

1. Create a Life Bar to display the number of "extra" lives remaining (other than the player's current life).

Add a lifebar div to the HTML.

Give the lifebar the styles to place it at the top right corner of the gameWindow.

You should now be able to see the aqua colored div that will be used to display the number of extra lives the player has.

Once you are confident the lifebar is where it belongs, delete the height and background-color. These were only added temporarily so we could see the lifebar.

2. Add a heart in the lifebar for each extra life the player has.

Declare lifebar as a global variable and then set it equal to the lifebar div once the page loads. Also, declare numLives as a global variable with an initial value of 0. Finally, create a loop that will call the addLife() function three times.

Create the addLife() function to increase the value of numLives by one, create a new img element with a src of heart.png (which was included with the project files), and then add that img element to the lifebar.

Now the player will have 3 extra lives showing in the lifebar.

3. Reload the level when the player falls into a hole.

Initially, this may sound simple. You just need to restart the current level. Since nextLevel() moves the player on to the next level, you can simply subtract one from level so that nextLevel() will then load the level you were just on.

Unforunately, it is not quite that easy. The problem is that the nextLevel() function only loads levels 2 and beyond. The code for loading level 1 is in the init() function.

To remedy this, Move the code related to initializing level 1 out of init()...

and place it in nextLevel().

Here is a step-by-step explanation of what needs to be done:

At this point, when the player falls into a hole, the current level should reload. You should test this on each level.

4. Take a life when the player falls into a hole.

At the moment the player falls into a hole, call removeLife().

Create removeLife() so that it reduces numLives by one and then removes one of the hearts from lifebar.

Recall that .children returns all the child elements of an element as an Array. In this case, lives is an Array of the img elements in the lifebar div; and lives[0] is the first img element in lives.

You should now see a heart disappear each time the player falls into a hole.

While lastChild is something not introduced in previous lessons, you may want to use it in this case to simply the code for removing a heart.

5. End the game when the player dies and has no remaining hearts (extra lives).

You should now have 4 lives (the 3 extra lives indicated by the hearts) and the current life. On the fourth loss of life, the lose message should appear.

For testing purposes, it is nice to be able to have the level you are currently working on load immediately. Because of how you structured your code, this is easy to do. For instance, if you want to test out level 3 as you are working on it, you would simple intialize level to 2...

and the game will load on level 3.