Cocos2d-JS工程中的文件结构

res文件夹存放资源文件

src文件夹是主要的程序代码

app.js是实现游戏场景的JavaScript文件

resource.js在src文件夹中,定义资源对应的变量

config.json保存模拟器运行配置信息

project.json是项目的配置信息

index.html是Web工程的首页

main.js与首页index.html对应的JavaScript文件,负责启动游戏场景

index.html代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Cocos2d-html5 Hello World test</title>
 6     <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
 7     <meta name="apple-mobile-web-app-capable" content="yes"/>
 8     <meta name="full-screen" content="yes"/>
 9     <meta name="screen-orientation" content="portrait"/>
10     <meta name="x5-fullscreen" content="true"/>
11     <meta name="360-fullscreen" content="true"/>
12     <style>
13         body, canvas, div {
14             -moz-user-select: none;
15             -webkit-user-select: none;
16             -ms-user-select: none;
17             -khtml-user-select: none;
18             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
19         }
20     </style>
21 </head>
22 <body style="padding:0; margin: 0; background: #000;">
23 <canvas id="gameCanvas" width="800" height="450"></canvas>
24 <script src="frameworks/cocos2d-html5/CCBoot.js"></script>
25 <script src="main.js"></script>
26 </body>
27 </html>

7~11行:meta信息是网页基本信息,这些设置能够使得index.html网页很好地在移动设备上显示。

23行:Canvas标签,通过JavaScript 可以在Canvas上绘制 2D 图形,Cocos2d-JS在网页运行的游戏场景都是通过Canvas渲染出来的。

24行:导入JavaScript文件CCBoot.js,我们不需要维护该文件。

25行:导入JavaScript文件main.js,我们需要维护该文件

 

 

main.js代码:

 1 cc.game.onStart = function(){
 2     cc.view.adjustViewPort(true);
 3     cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
 4     cc.view.resizeWithBrowserSize(true);
 5     //加载游戏所需资源
 6     cc.LoaderScene.preload(g_resources, function () {
 7         cc.director.runScene(new HelloWorldScene());
 8     }, this);
 9 };
10 cc.game.run();

1行:启动游戏

cc.game是一个游戏启动对象

2~4行:设置游戏视图属性

3行:设置游戏视图大小,涉及到屏幕适配问题,cc.ResolutionPolicy.SHOW_ALL是屏幕适配策略

g_resources参数是加载资源的数组,该数组是在src/resource.js文件中定义的

6行:运行HelloWorldScene场景,cc.director是导演对象

10行:cc.game.run()是运行游戏启动对象

 

project.json

 1 {
 2     "project_type": "javascript",
 3 
 4     "debugMode" : 1,
 5     "showFPS" : true,
 6     "frameRate" : 60,
 7     "id" : "gameCanvas",
 8     "renderMode" : 0,
 9     "engineDir":"frameworks/cocos2d-html5",
10 
11     "modules" : ["cocos2d"],
12 
13     "jsList" : [
14         "src/resource.js",
15         "src/app.js"
16     ]
17 }

5行:是否显示帧率调试信息,帧率调试就是显示在左下角文字信息。

6行:设置帧率为60,即屏幕1/60秒刷新一次。

11行:加载游戏引擎的模块

13~15行:声明需要加载的JavaScript文件,这里的文件主要是由我们编写的,我们每次添加一个JavaScript文件到工程中,就需要在此处添加声明

 

 

config.json代码:

 1 {
 2   "init_cfg": {
 3     "isLandscape": true,
 4     "name": "CocosJSGame",
 5     "width": 960,
 6     "height": 640,
 7     "entry": "main.js",
 8     "consolePort": 6050,
 9     "debugPort": 5086,
10     "forwardConsolePort": 10088,
11     "forwardUploadPort": 10090,
12     "forwardDebugPort": 10086
13   },
14  ...........
15   ]
16 }

2行:初始配置信息

3行:设置横屏显示还是竖屏显示

4行:设置模拟器上显示的标题

5、6行:设置屏幕的宽和高

7行:设置文件入口代码

 

app.js

 1 var HelloWorldLayer = cc.Layer.extend({
 2     sprite:null,
 3     ctor:function () {
 4         //////////////////////////////
 5         // 1. super init first
 6         this._super();
 7     //.....
 8        
 9         return true;
10     }
11 });
12 
13 var HelloWorldScene = cc.Scene.extend({
14     onEnter:function () {
15         this._super();
16         var layer = new HelloWorldLayer();
17         this.addChild(layer);
18     }
19 });

 

你可能感兴趣的:(Cocos2d-JS工程中的文件结构)