Setting up the environment for Cocos2d-html5

Before we actually begin developing this game, let's spend some time setting up an environment for our HTML5 games. Since these are HTML5 games, they will essentially run in a web browser—be it on a computer or a mobile device. You are free to run these games in a browser of your choice. My personal favorite is Google Chrome!

Since we will be using JavaScript to develop the game, I would definitely recommend brushing up on some basic JavaScript coding principles before ping into the code. You can visit the following URL for some help:

http://jstherightway.org/

Moving on, here is the list of software that you will require to run the tests/samples in the Cocos2d-html5 source as well as the Cocos2d-html5 games we'll develop:

• Cocos2d-html5 source (version 2.2.3 at the time of writing this chapter) can be found at http://cdn.Cocos2d-x.org/Cocos2d-html5-v2.2.3.zip
• WebStorm (optional) at https://confluence.jetbrains.com/display/WI/Previous+WebStorm+Releases
• WampServer (optional and for Windows only) can be downloaded from http://www.wampserver.com/en/

The first software on the list is, of course, the source of the Cocos2d-html5 engine, without which we won't be able to move a single web-based muscle.

The next software on the list is WebStorm, which is a powerful JavaScript editor that provides features such as code completion, code refactoring, debugging, and many others. Of course, this does not impact our chapter in anyway. You can choose to use any editor of your choice.

The last item on the list is WampServer, which is optional and is valid only for developers working on a Windows machine. WampServer provides a web server that can serve files over HTTP. This is especially useful if you want to test your game on wireless devices connected to the same network as your development machine.

Once you've downloaded the above software, move to the next section where we will create a sample project.