Building a Game with the Cocos2d-html5 Library - HTML5 Game Development Insights - page 398

A Step-by-Step Process for Making the Tower Defence Game
Now let's create the game step by step. The name of your project is HalloweenDefence. You can refer to the repository
on github: https://github.com/linshun/HalloweenDefence . The directory structure is shown in Figure 24-13 .
Figure 24-13. Directory structure of HalloweenDefence
You can deploy the existing project to a web server, and then play it in a browse.
Creating the Tower Defence Project
As mentioned earlier, you can copy the template folder and then paste and rename it. You will create the game based
on the template.
After the game folder is created, open up the index.html file and set the gameCanvas to 480×318 pixels. This is the
design resolution of the game, which I will discuss later. You also need to set screen-orientation to landscape mode.
Cocos2d-html5 supports the features of multi-resolution adaptation, and all of your game's coordinates are based
on the design resolution, no matter the size of your browser's window. It is easy for you to enable the multi-resolution
adaptation feature. Listing 24-3 provides the code to do so.
Listing 24-3. The applicationDidFinishLaunching Function Enables the Multi-resolution Adaptation Feature
in main.js .
applicationDidFinishLaunching : function ( ) {
// initialize director
var director = cc.Director.getInstance();
// Set full screen mode to SHOW_ALL mode.
cc.EGLView.getInstance().setDesignResolutionSize(480, 318,
cc.RESOLUTION_POLICY.SHOW_ALL);