In this section, we will demonstrate a number of concepts that will let you take what you have learned in previous sections and put together a complete game.
Concepts to be demonstrated in this section include:
“Start” and “Game Over” screens
Timers (up and down)
Keeping score
“Start” and “Game Over” screens
enchant.js provides an easy way to add game “Start” and “Game Over” screens. Unlike examples in previous sections, the examples here use the nineleap.enchant.js plugin. You indicate you want to use the plugin by including it in the host HTML file. (In the project files, open index.html and look for the line that reads <script src='misc/plugins/nineleap.enchant.js'></script>)
Once you link to the plugin in the host HTML file, the plugin automatically gives your game a “Start” screen. Adding a “Game Over” screen is almost as easy: just call game.end() where you want the game to end.
Rain Game 1
For our first complete game, we will take the “Collecting raindrops” example from Collisions and turn it into a game that challenges the player to collect all four raindrops as quickly as possible. The game will start when the user clicks on the “Start” screen, will tell the user how long she has been playing, and will display a “Game Over” screen when the player collects all four raindrops.
In this section, you will be introduced to:
“Start” and “Game Over” screens.
Implementing a timer that counts up.
Working with Labels to show text.
Code reorganization
We start by reorganizing the original code by moving the “helper functions” and making a factory function for the collector as well as for the droplets.
We have also added boundary limits to the collector’s movement.
We have changed the code to use an image for the background instead of a fixed color. (The background image has the same dimensions as the game.)
Since all the examples in this section are configured to use the nineleap.enchant.js plugin, the game will automatically start with a “Start” screen.
The example below adds a timer object to the game that counts the number of frames that have transpired since the game began.
The timer won’t start counting until real game play has started. Game play starts when any of the droplets begin to move.
Note: while there is a game.frames property that automatically increases each frame, in the current release of enchant.js it starts counting as soon as the “Start” screen is shown, not when gameplay begins. The timer object is a workaround for that problem.
If you divide the number of frames that have transpired by the game’s frame rate, you will have the number of seconds since gameplay began.
This will yield a time with a lot of precision (a lot of digits after the decimal place.) To get rid of the decimal places, you can use JavaScript’s Math.round, Math.floor, or Math.ceil functions, depending on the effect you are after.
Math.floor is good for counting up because the number of seconds will become 1 only after one complete second, 2 only after two complete seconds, and so on.
An event listener on the game for each frame ticks the timer and updates the label with the number of seconds that the game has been played.
The game above challenged the player based on the question, “How quickly can you collect the droplets?” In this second version of the game, we will change the challenge to “How many drops can you collect in (some-number-of) seconds?”
In this section, you will be introduced to:
Keeping score
Implementing a timer that counts down
Keeping score
We need to keep track of the how many drop we have caught (giving the player one point per drop).
We will update the label with the total number of drops caught.