res文件夹存放资源文件

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

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

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

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

project.json是项目的配置信息

index.html是Web工程的首页

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

index.html代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>Cocos2d-html5 Hello World test</title>

     <link rel="icon" type="image/GIF" href="res/favicon.ico"/>

     <meta name="apple-mobile-web-app-capable" content="yes"/>

     <meta name="full-screen" content="yes"/>

     <meta name="screen-orientation" content="portrait"/>

     <meta name="x5-fullscreen" content="true"/>

     <meta name="360-fullscreen" content="true"/>

     <style>

         body, canvas, div {

             -moz-user-select: none;

             -webkit-user-select: none;

             -ms-user-select: none;

             -khtml-user-select: none;

             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

         }

     </style>

 </head>

 <body style="padding:0; margin: 0; background: #000;">

 <canvas id="gameCanvas" width="800" height="450"></canvas>

 <script src="frameworks/cocos2d-html5/CCBoot.js"></script>

 <script src="main.js"></script>

 </body>

 </html>

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

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

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

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

main.js代码：

 cc.game.onStart = function(){

     cc.view.adjustViewPort(true);

     cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);

     cc.view.resizeWithBrowserSize(true);

     //加载游戏所需资源

     cc.LoaderScene.preload(g_resources, function () {

         cc.director.runScene(new HelloWorldScene());

     }, this);

 };

 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

 {

     "project_type": "javascript",

     "debugMode" : 1,

     "showFPS" : true,

     "frameRate" : 60,

     "id" : "gameCanvas",

     "renderMode" : 0,

     "engineDir":"frameworks/cocos2d-html5",

     "modules" : ["cocos2d"],

     "jsList" : [

         "src/resource.js",

         "src/app.js"

     ]

 }

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

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

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

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

config.json代码：

 {

   "init_cfg": {

     "isLandscape": true,

     "name": "CocosJSGame",

     "width": 960,

     "height": 640,

     "entry": "main.js",

     "consolePort": 6050,

     "debugPort": 5086,

     "forwardConsolePort": 10088,

     "forwardUploadPort": 10090,

     "forwardDebugPort": 10086

   },

  ...........

   ]

 }

2行：初始配置信息

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

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

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

7行：设置文件入口代码

app.js

 var HelloWorldLayer = cc.Layer.extend({

     sprite:null,

     ctor:function () {

         //////////////////////////////

         // 1. super init first

         this._super();

 　　　　//.....

         return true;

     }

 });

 var HelloWorldScene = cc.Scene.extend({

     onEnter:function () {

         this._super();

         var layer = new HelloWorldLayer();

         this.addChild(layer);

     }

 });

Cocos2d-JS工程中的文件结构的更多相关文章

  1. web工程中URL地址的推荐写法

    三.web工程中URL地址的推荐写法 使用c标签<c:url value="" /> 会自动添加项目名 -> value中的值 前面要加 “/” 在JavaWeb ...

  2. VS2010/MFC编程入门之三（VS2010应用程序工程中文件的组成结构）

    VS2010/MFC编程入门之三(VS2010应用程序工程中文件的组成结构)-软件开发-鸡啄米 http://www.jizhuomi.com/software/143.html   鸡啄米在上一讲中 ...

  3. 如何在js文件中实现获取request.getCotextPath();

    我们在jsp中可以方便的使用“request.getCotext()”来获取工程的根目录. 但是如果我们的js代码存在一个单独的js文件中,这时候再想获取根目录,我们就要自己截取了.可以采用下面的方式 ...

  4. 以太坊智能合约开发，Web3.js API 中文文档 ethereum web3.js入门说明

    以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...

  5. 如何在原生工程中引入Cordova工程-for iOS 【转】

    http://blog.csdn.net/e20914053/article/details/50170487 如今混合开发方兴未艾,有的项目可能一开始是原生开发的,后期需要加入混合开发,如将Cord ...

  6. vue-cli 工程中引入jquery

    在vue-cli 生成的工程中引入了jquery,记录一下.(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : &quo ...

  7. 把 Reative Native 47 版本集成到已有的 Native iOS 工程中

    一.搭建开发环境 http://reactnative.cn/docs/0.46/getting-started.html#content 二.创建一个模板 运行以下命令,创建一个最新版本的 reac ...

  8. React Native工程中TSLint静态检查工具的探索之路

    建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...

  9. 【转】doxygen+graphviz生成工程中的类继承树及函数调用图

    转自----hequn8128 在阅读代码量比较多的项目时,类的继承树和函数调用图能够直观地向我们显示类之间或者函数之间的各种关系,方便我们了解程序的整体框架,很多时候可以起到事半功倍的作用.这里尝试 ...

随机推荐

  1. BZOJ 1067 & Interval_Tree

    1067: [SCOI2007]降雨量 Time Limit: 1 Sec Memory Limit: 162 MB Submit: 3099 Solved: 800 Description 我们常常 ...

  2. UVA 11235 (游程编码+ST算法)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=23846 题目大意:给定一个升序序列,有q次询问,每次询问(L,R) ...

  3. TYVJ P1082 找朋友 Label:字符串

    描述 童年的我们,对各种事物充满了好奇与向往.这天,小朋友们对数字产生了兴趣,并且想和数字交朋友.可是,怎么分配这些数字才能使得每个小朋友都唯一地找到一个数字朋友呢?C小朋友说:咱们按自己名字的字典序 ...

  4. get和post方法的区别

    在form表单提交数据的过程中,method属性提供了两个值:get,post,默认为get方式[参1] 即一种为get提交,一种是post提交.那么这两种提交方式有什么不同呢? 查询了一些资料后,总 ...

  5. 去掉Xcode源码末尾的空格

    去掉Xcode源码末尾的空格 在用 Xcode 开发的时候,很容易就在行末增加一些空格了.这些空格在上传到 review board 上后 , 就会被特别的颜色显示出来.因为一种好的编程风格是说 , ...

  6. iOS开发中使用[[UIApplication sharedApplication] openURL:]加载其它应用

        iOS 应用程序之间(1)  在iOS开发中,经常需要调用其它App,如拨打电话.发送邮件等.UIApplication:openURL:方法是实现这一目的的最简单方法,该方法一般通过提供的u ...

  7. WPF的Page介绍及Page Window Frame 之间的链接使用示例，嵌套问题

    本文源参考 http://www.cnblogs.com/ListenFly/archive/2013/02/24/2923474.html 谢谢源作者 WPF中的Page相比Window来说更加的精 ...

  8. SQL优化之【类型转换】

    DBA的日常工作中SQL优化占大半的时间,通常都是SQL语句性能问题或者schema设计有问题,最近遇到一个类型转换的问题,所以在这里分享一下,废话不多说了,直接建表进行测试. mysql), key ...

  9. Foreach 与 Foreach-Object 的区别

    下面两个实例可以看出:   Get-ADGroupMember -Identity "CN=gAPCHN-HGZ-IE10-Users,OU=Groups,OU=Hangzhou - Chi ...

  10. PHP 设计模式 笔记与总结（6）基础设计模式：工厂模式、单例模式和注册树模式

    三种基础设计模式(所有面向对象设计模式中最常见的三种): ① 工厂模式:使用工厂方法或者类生成对象,而不是在代码中直接new 在 Common 目录下新建 Factory.php: <?php ...