Creating frog jump game in HTML5 using CreateJS: 03 Creating game background

In previous part, we have setup all the files to start the game coding. In this part you will learn how to create game background. Start with river and grass with foliage both side of the river.


Topics Covered

Declaring game constants and variables

Before start creating background we need to define some constants and variables which we will require in further development of game. As a standard practice I always define constants and variables at the top of the code.

In the first group of constants are defined for all the background elements width… side grass, foliage and river and other group for keycode.

The variables declared for different other game elements such as stage, river, frog and few of them are declared as array to store insects, leaf and life. In the further development stages we will see where the constants and variables are used.

Preloading game assets

Why we have to preload assets before start the game…?

Well, the answer is quite simple… Once your game starts, there should not be any glitch to load the content while your game is in progress.

In the preload function we have pushed all the content in queue and once all the assets will loaded the init function will trigger. Set the all game assets queue by id and source as path in object array and pass it to loadMenifest method. Later in the game we will use those ids to refer the specific assets. We don’t need to load assets again.

Initializing game

Now we have all the assets loaded for the game and of course for background too. But where to draw the background? Yes, we need the stage. So create the stage and set 60fps rate to update the stage.

Creating game background

Now we have the stage to add game elements. Define a function named buidGameBackground() and write the code to create the game background. See the function blow.

The first and the third block of code shows how grass and foliages are drawn on stage. The way of drawing grass and foliage is almost same. The middle block of code shows how river is drawn on the stage. So create a shape river sized shape and fill the water texture into the shape and add it into stage. In the later chapter we will see how to animate river water towards downside.

Creating frog jumping game in HTML5 using CreateJS

Download Source Files
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *