Hello Cross-World_Learning Cocos2d-JS Game Development-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

Hello Cross-World

The time has come, the boring theory has ended, and we can now start coding our first project. Let's begin!

Firstly, create a page called index.html in the root of the game folder and write this HTML code:
```
<!DOCTYPE html>
  <head>
    <title>
      My Awesome game
    </title>
    <script src="cocos2d-html5/CCBoot.js" type="text/javascript">
</script>
    <script src="main.js" type="text/javascript">
</script>
  </head>
  <body style="padding:0;margin:0;background-color:#000000;">
  </body>
</html>
```
There's nothing interesting in it as it is just plain HTML. Let's take a closer look at these lines to see what is going on:
```
<script src=" cocos2d-html5/CCBoot.js "></script>
```
Here, I am including the Cocos2d-JS boot file to make the framework start:
```
<script src="main.js"></script>
```
From the preceding line, this is where we call the script with the actual game we are going to build. Next, we have the following code:
```
<canvas id="gameCanvas"></canvas>
```
This is the canvas we will use to display the game. Notice here that the canvas does not have a width and height, as they will be defined by the game itself.
Next is the creation of main.js: the only file we will call from our main index.html page. This is more of a configuration file rather than the game itself, so you won't code anything that is game-related at the moment. However, the file you are going to build will be the blueprint you will be using in all your Cocos2d-JS games.
The content of main.js is as follows:
```
cc.game.onStart = function(){
    cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
    cc.director.runScene(new gameScene());
};
cc.game.run();
```
Don't worry about the code at the moment; it looks a lot more complicated than it really is. At the moment, the only line we have to worry about is the one that defines the resolution policy.

Tip

One of the most challenging tasks in cross-platform development is to provide a good gaming experience, no matter what browser or what device the game is running on. However, the problem here is that each device has its own resolution, screen size, and ratio.

Cocos2d-JS allows us to handle different resolutions in a similar way web designers do when building responsive design. At the moment, we just want to adapt the game canvas to fit the browser window while targeting the most popular resolution, which is 320x480 (portrait mode). That's what this line does:
```
 cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
```
Using these settings, you should be pretty sure that your game will run on every device, although you will be working in a low resolution.
Also, have a look at this line:
```
cc.director.runScene(new gameScene());
```
Basically, a Cocos2d-JS game is made by a scene where the game itself runs. There can be more scenes in the same game. Imagine a scene with the title screen, a scene with the game over screen, and a scene with the game itself. At the moment, you only have one scene called gameScene. Remember this name because you are going to use it later.
Following this, the next required blueprint file you are going to build is project.json, which has some interesting settings. Let's take a look at the file first:
```
{
  "debugMode" : 0,
  "showFPS" : false,
  "frameRate" : 60,
  "id" : "gameCanvas",
  "renderMode" : 0,
  "engineDir":"cocos2d-html5/",

  "modules" : ["cocos2d"],

  "jsList" : [
    "src/gamescript.js"
  ]
}
```
What do these lines mean? Let's see them one by one:
- debugMode: This is the object key that determines the level of debug warnings. It has a range from 0 to 6. Leave it at 0 at the moment since the project is very simple and we won't make any errors.
- showFPS: This object can be true or false; it shows or hides the FPS meter on the screen.
- frameRate: This object sets the frame rate of your game. Set it to 60 to have a smooth game.
- id: This is the DOM element that is required to run the game. Do you remember you gave your canvas the gameCanvas id? Here you are.
- engineDir: This is the folder where Cocos2d-JS is installed.
- modules: This object engines the modules to load. At the moment, we only need the basic Cocos2d library.
- jsList: This is an array with the files used in the game. This means we are going to create our game in src/gamescript.js.
Finally, we arrive at the game script itself. This is the one that will contain the actual game, gamescript.js, which at the moment is just a plain declaration of the game scene:
```
var gameScene = cc.Scene.extend({
  onEnter:function () {
    this._super();
    console.log("my awesome game starts here");
  }
});
```
Here, you want to save everything and call index.html page from your localhost (refer to your WAMP or MAMP docs) in your browser. If you now open the developer console, you should see:
my awesome game starts here

Congratulations! This means you have successfully managed to create a Cocos2d-JS template file to build your future games.

Let's build our first mini game at once!

本周热推：

HoloLens 2开发入门精要：基于Unity和MRTK 征服C指针（第2版）Python程序设计教程 Linux服务器配置与管理项目化教程 Java编程技术与项目实战（第2版）

Hello Cross-World

Tip