细说Cocos2d-JS——从项目构造说起

来源：互联网发布：mac的chili试色编辑：程序博客网时间：2024/06/18 08:02

“Hello World”——多么熟悉的问候语。对于Cocos2d-JS来说，这个问候，来得太简单了，无论你是否熟悉Cocos2d-JS，只要你用过或者见过其他人使用过与Eclipse类似的IDE的话，简单几步，就可以创建一个可以运行项目，跑起你对世界的问候“Hello World”。

然而，对于大多数“新手”甚至是一部分“老手”来说，新建的一个项目，可能对各个目录或文件有个大概的了解，但，如果要深入每个文件来细致解释的话，可能就不行了，更不用说深入每一行代码了。我们今天，就来解决这个问题。

一、新建一个简单项目

在这里呢，我们先新建一个项目，然后，根据这个新建的项目，我们深入地去解释一下。当然了，新建之后，你可以自己运行一下，用模拟器形式和Web形式。新建的项目大致情况如下：

这里写图片描述

如果一切顺利的话，你新建的项目的大概情况呢，就和上面的图示大致一样。

二、总体分析

我们首先来大概分析一下项目的组成内容，自上而下顺序分析。

JavaScript Resources：你使用的就是JavaScript，没有它，你怎么搞？
cocosstudio文件夹：主要用于存放Cocos Studio项目相关内容等。
res文件夹：主要存放资源文件，如json文件，图片，音乐等。
script文件夹：主要存放游戏引擎的相关文件，主要是jsb*.js文件。
src文件夹：存放主要的程序代码。
——app.js：实现游戏场景“Hello World”的JS文件。
——resource.js：定义资源对应的变量。
config.json：保存模拟器运行配置信息。
index.html： Web工程的首页。
main.js：与首页index.html对应的JS文件。
project.json：项目的配置信息。

下面，我们详细分析一下，其中一些比较让人困惑的部分。一些简单的文件和文件夹就不再分析了。

三、index.html——Web工程的首页

代码如下：

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); box-sizing: border-box;"><!DOCTYPE html></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">charset</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"utf-8"</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>Cocos2d-html5 Hello World test<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"icon"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"image/GIF"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"res/favicon.ico"</span>/></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-mobile-web-app-capable"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"yes"</span>/></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"full-screen"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"yes"</span>/></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"screen-orientation"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"portrait"</span>/></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"x5-fullscreen"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"true"</span>/></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"360-fullscreen"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"true"</span>/></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span><span class="css" style="box-sizing: border-box;">        <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">body</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">canvas</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">div</span> <span class="hljs-rules" style="box-sizing: border-box;">{            <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-moz-user-select</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> none</span></span>;            <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-user-select</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> none</span></span>;            <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-ms-user-select</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> none</span></span>;            <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-khtml-user-select</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> none</span></span>;            <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-tap-highlight-color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">rgba(<span class="hljs-number" style="box-sizing: border-box;">0</span>, <span class="hljs-number" style="box-sizing: border-box;">0</span>, <span class="hljs-number" style="box-sizing: border-box;">0</span>, <span class="hljs-number" style="box-sizing: border-box;">0</span>)</span></span></span>;        <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>    </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">style</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"padding:0; margin: 0; background: #000;"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">canvas</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"gameCanvas"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"800"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"450"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">canvas</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"frameworks/cocos2d-html5/CCBoot.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"main.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul>

代码分析：

上面是一段很简单的HTML代码，并没有涉及什么高级用法。
网页头部（head）：主要简单设置了网页样式（style）以及meta信息，其中meta信息是网页的基本信息，主要作用是尽量使得网页能够在各种浏览器上优雅地显示出来。具体meta的用法请自行Google或百度，这里就不赘述了。
canvas标签： canvas标签是HTML5提供的，通过JavaScript可以在Canvas上绘制2D图形，Cocos2d-JS在网页运行的游戏场景都是通过Canvas渲染出来的，但Cocos2d-JS在本地运行游戏场景时，是通过OpenGL渲染出来的。其实与OpenGL类似，HTML5有WebGL，但是不同浏览器对WebGL的支持程度不同。所以，Cocos2d-JS没有采用WebGL进行渲染，而是采用了Canvas。虽然后者在性能方面不如前者，但是，对于一般的网页游戏来说，Canvas已经足够满足要求了。但是，我觉得未来的发展趋势必然是对WebGL的全面支持，HTML5游戏（网页游戏）会越来越好，性能也越来越不是问题。另外，注意canvas标签的id，后面的project.json文件中会用到这个id。
JavaScript导入：文件的末尾分别导入了CCBoot.js和main.js文件，其中CCBoot.js可以查看源码，是游戏引擎文件。main.js则是我们马上要讲的与首页对应的JavaScript文件。

四、main.js——与首页对应的JS

代码如下：

<code class="language-JavaScript hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.game</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.onStart</span> = function(){    cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.adjustViewPort</span>(true)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setDesignResolutionSize</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">960</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">640</span>, cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ResolutionPolicy</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SHOW</span>_ALL)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.resizeWithBrowserSize</span>(true)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    //load resources    cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.LoaderScene</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.preload</span>(g_resources, function () {        cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.director</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.runScene</span>(new HelloWorldScene())<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    }, this)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>}<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.game</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.run</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

代码分析：

main.js主要负责启动游戏场景，无论是在Web浏览器上运行还是在本地运行，都是由它来负责启动游戏场景。
其中，cc.game.onStart是设置cc.game的onStart函数方法，在游戏启动时会自动调用这个函数。该函数的第一、二行代码，用于设置游戏视图的相关属性。其中，第二行是设置游戏视图的适配策略，这个我们后面再详细介绍，这里有个印象就好。接下来是加载游戏场景所需的资源，其中g_resources参数是加载资源的数组，该数组是在resource.js文件中定义的。加载完资源之后，要通过cc.director对象来运行HelloWorldScene场景。
最后一句cc.game.run()。让游戏启动，这样才会在适当的时机自动运行我们刚刚定义好的onStart函数方法。
PS：有些方法没有细说，由于Cocos2d-JS是开源的，你可以自行查看源代码，其中一些深入的东西，我们后面会慢慢讲。

五、project.json——项目配置文件

代码如下：

<code class="hljs json has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">{    "<span class="hljs-attribute" style="box-sizing: border-box;">project_type</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"javascript"</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">debugMode</span>" : <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">showFPS</span>" : <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">frameRate</span>" : <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">id</span>" : <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"gameCanvas"</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">renderMode</span>" : <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">engineDir</span>":<span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"frameworks/cocos2d-html5"</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">modules</span>" : <span class="hljs-value" style="box-sizing: border-box;">[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"cocos2d"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"cocostudio"</span>]</span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">jsList</span>" : <span class="hljs-value" style="box-sizing: border-box;">[        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"src/resource.js"</span>,        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"src/app.js"</span>    ]</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

代码分析：

其实这个文件主要是项目的一些配置信息。由于在mian.js文件开头有一段对project.json文件的简要介绍，介绍地很全面了。虽然是英文的，但是还是很简单的。看看就懂了。这里主要提一点，Cocos2d-JS游戏引擎有很多模块（modules），我们最好按需加载，而不是全部加载，至于游戏引擎都有哪些模块，各个模块到底都包含些什么内容，请自行查看frameworks\cocos2d-html5\moduleConfig.json文件。

英文介绍如下：

<code class="language-JavaScript hljs coffeescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">/** * A brief explanation <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"project.json"</span>: * Here <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> the content <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> project.json file, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> the <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">global</span> configuration <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> your game, you can modify it to customize some behavior. * The detail <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> each field <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> under it. {    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"project_type"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"javascript"</span>,    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"project_type"</span> indicate the program language <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> your project, you can ignore <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span> field    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"debugMode"</span>     : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"debugMode"</span> possible values :    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>      <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> - No message will be printed.    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>      <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> - cc.error, cc.assert, cc.warn, cc.log will <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">print</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>      <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span> - cc.error, cc.assert, cc.warn will <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">print</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>      <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span> - cc.error, cc.assert will <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">print</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>      <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span> - cc.error, cc.assert, cc.warn, cc.log will <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">print</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">on</span> canvas, available only <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">on</span> web.    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>      <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span> - cc.error, cc.assert, cc.warn will <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">print</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">on</span> canvas, available only <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">on</span> web.    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>      <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span> - cc.error, cc.assert will <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">print</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">on</span> canvas, available only <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">on</span> web.    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"showFPS"</span>       : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> Left bottom corner fps information will show <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">when</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"showFPS"</span> equals <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, otherwise it will be hide.    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"frameRate"</span>     : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>,    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"frameRate"</span> set the wanted frame rate <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> your game, but the real fps depends <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">on</span> your game implementation <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">and</span> the running environment.    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"id"</span>            : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"gameCanvas"</span>,    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"gameCanvas"</span> sets the id <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> your canvas element <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">on</span> the web page, it<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'s useful only on web.    "renderMode"    : 0,    // "renderMode" sets the renderer type, only useful on web :    //      0 - Automatically chosen by engine    //      1 - Forced to use canvas renderer    //      2 - Forced to use WebGL renderer, but this will be ignored on mobile browsers    "engineDir"     : "frameworks/cocos2d-html5/",    // In debug mode, if you use the whole engine to develop your game, you should specify its relative path with "engineDir",    // but if you are using a single engine file, you can ignore it.    "modules"       : ["cocos2d"],    // "modules" defines which modules you will need in your game, it'</span>s useful only <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">on</span> web,    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> using <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span> can greatly reduce your game<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'s resource size, and the cocos console tool can package your game with only the modules you set.    // For details about modules definitions, you can refer to "../../frameworks/cocos2d-html5/modulesConfig.json".    "jsList"        : [    ]    // "jsList" sets the list of js files in your game. } * */</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li></ul>

六、config.json——模拟器配置文件

代码如下：

<code class="hljs json has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">{  "<span class="hljs-attribute" style="box-sizing: border-box;">init_cfg</span>": <span class="hljs-value" style="box-sizing: border-box;">{    "<span class="hljs-attribute" style="box-sizing: border-box;">isLandscape</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">isWindowTop</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">name</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"MyNewStudy"</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">width</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">960</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">height</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">640</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">entry</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"main.js"</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">consolePort</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6050</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">uploadPort</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6060</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">debugPort</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5086</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">forwardConsolePort</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10088</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">forwardDebugPort</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10086</span></span>,    "<span class="hljs-attribute" style="box-sizing: border-box;">forwardUploadPort</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10090</span>  </span>}</span>,  "<span class="hljs-attribute" style="box-sizing: border-box;">simulator_screen_size</span>": <span class="hljs-value" style="box-sizing: border-box;">[    {      "<span class="hljs-attribute" style="box-sizing: border-box;">title</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"iPhone 3Gs (480x320)"</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">width</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">480</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">height</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">320</span>    </span>},    {      "<span class="hljs-attribute" style="box-sizing: border-box;">title</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"iPhone 4 (960x640)"</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">width</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">960</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">height</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">640</span>    </span>},    {      "<span class="hljs-attribute" style="box-sizing: border-box;">title</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"iPhone 5 (1136x640)"</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">width</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1136</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">height</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">640</span>    </span>},    {      "<span class="hljs-attribute" style="box-sizing: border-box;">title</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"iPad (1024x768)"</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">width</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1024</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">height</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">768</span>    </span>},    {      "<span class="hljs-attribute" style="box-sizing: border-box;">title</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"iPad Retina (2048x1536)"</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">width</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2048</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">height</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1536</span>    </span>},    {      "<span class="hljs-attribute" style="box-sizing: border-box;">title</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Android (800x480)"</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">width</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">800</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">height</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">480</span>    </span>},    {      "<span class="hljs-attribute" style="box-sizing: border-box;">title</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Android (854x480)"</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">width</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">854</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">height</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">480</span>    </span>},    {      "<span class="hljs-attribute" style="box-sizing: border-box;">title</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Android (1280x720)"</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">width</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1280</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">height</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">720</span>    </span>},    {      "<span class="hljs-attribute" style="box-sizing: border-box;">title</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Android (1920x1080)"</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">width</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1920</span></span>,      "<span class="hljs-attribute" style="box-sizing: border-box;">height</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1080</span>    </span>}  ]</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li></ul>

代码分析：

只有在Cocos Code IDE中运行才需要该文件，它是配置模拟器运行信息的。
在这里，简要介绍一下，第一行isLandscape主要用于设置是否横屏显示，第二行用于设置模拟器的标题，第三、四行用于设置屏幕的宽高，第五行用于设置入口文件，接下来几行用于设置端口信息。

七、resource.js——定义资源变量

代码如下：

<code class="language-JavaScript hljs cs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> res = {    HelloWorld_png : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"res/HelloWorld.png"</span>,    MainScene_json : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"res/MainScene.json"</span>};<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> g_resources = [];<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> i <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> res) {    g_resources.push(res[i]);}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

代码分析：

这段代码比较简单，主要通过变量res来定义资源的别名，防止资源硬编码，这样更加灵活便捷。接着，就把定义好的资源都加入到g_resources变量中，在游戏启动的时候会自动加载g_resources变量中的资源（main.js中进行相关设置）。

八、app.js——“Hello World”场景文件

代码如下：

<code class="language-JavaScript hljs cs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> HelloWorldLayer = cc.Layer.extend({    sprite:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>,    ctor:function () {        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 1. super init first</span>        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._super();        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span><span class="hljs-xmlDocTag" style="box-sizing: border-box;">///</span>//</span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2. add a menu item with "X" image, which is clicked to quit the program</span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    you may modify it.</span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// ask the window size</span>        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> size = cc.winSize;        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> mainscene = ccs.load(res.MainScene_json);        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.addChild(mainscene.node);        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;    }});<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> HelloWorldScene = cc.Scene.extend({    onEnter:function () {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._super();        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> layer = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> HelloWorldLayer();        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.addChild(layer);    }});</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li></ul>

代码分析：

这段代码呢，完成了我们看到的“Hello World”场景的展示。上面两段代码呢，主要声明了两个类，分别是继承自cc.Scene的HelloWorldScene和继承自cc.Layer的HelloWorldLayer。并且在HelloWorldScene中重写了父类的onEnter方法，该方法在进入场景时调用。重写父类方法时，通过this._super()调用父类的实现。然后，创建了一个HelloWorldLayer的实例，并添加到场景中。而HelloWorldLayer中主要重写了父类的ctor构造函数，并在构造函数中使用了Cocos Studio中导出的资源（ccs.load）。

0 0