Creating frog jump game in HTML5 using CreateJS: 02 Setting up game files

Now we have all the points of development stages. So let’s start with setting up game files. To setup game files, first of all we will create a game directory with the game name. After creating a create all the game files inside this directory.

Topics Covered

Creating HTML file and setup game interface

Create a new HTML file and name it index.html. You can use any text or code editor to develop your game. In my case I am using Netbeans. Once you created html file write the following code.

In the head section you can see, I have added a font “Righteous” which we will use in game later to display the score, game instructions and other messages of the game.
In the next line I have added “createjs-2015.11.26.min.js” CreateJS library javascript file. So all the CreateJS classes will be enable to us build the game.
Then add “script.js “ file to write the game logic.
Finally I have created a canvas in body tag and set up its width 800px and height 600px. Also called “preload()” function on html body onload event.

Creating game javascript file

After creating HTML file now create a blank javascript file named script.js. This file we have already linked in html file. And here we will write the game logic.

Creating assets directory

Lastly create a directory named “assets” where we will store all the assets which will require in game. The assets could be image files in jpg or png format depends on how images we will be need in game.

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 *