大佬教程收集整理的这篇文章主要介绍了cocos2d-js（一）引擎的工作原理和文件的调用顺序，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Cocos2d-js可以实现在网页上运行高性能的2D游戏，实现原理是通过HTML5的canvas标签，该引擎采用Javascript编写，并且有自己的一些语法，因为没有成熟的IDE，一般建立工程是通过WebStorm手动创建文件与文件夹，实现将引擎跑起来，下面详解一下运行过程。
首先，用户最先访问到的是index.html页面，在index.html中引入引擎的启动文件CCBoot.js和自己编写的游戏的启动文件@H_688_4@main.js。除此之外，还需要在工程的根目录下写一个project.json，来描述工程，引擎会自动读入这个文件，确定工程的类型、功能设置、引入的模块、自己的js文件列表等。
一般是将cocos2d的引擎拷贝到自己的工程目录下，使用frameworks/cocos2d-html5这个目录下的引擎文件。
下面的流程图说明了cocos2d的基本工作流程：
下面我们以frameworks/cocos2d-html5/template为例分析一下这个工程。
工程的运行结果为在屏幕上显示Hello、屏幕分辨率、Logo等内容。
首先分析一下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="viewport" content="width=321,user-scalable=no" />
<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);
}
</style><pre name="code" class="html"><script src="../CCBoot.js"></script>
<script src="main.js"></script>
<body style="padding:0; margin: 0; BACkground: #000;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="1920" height="1920"></canvas>
</body>
Head中的大部分标签都是用于说明一些显示的属性，如果是手机网页应用则需要设置这些，如果是普通的网页应用则不必设置，可以省略成如下这样：
<head>
<title>title</title>
<meta name="viewport" content="user-scalable=no"/>
<meta charset="utf-8"/>
</head>
<script src="../CCBoot.js"></script> <script src="main.js"></script>这个工程在body中还载入了loading.js，这个只是启动时的loading动画，可以不加。
<body style="padding:0; margin: 0; BACkground: #000;"> <script src="res/loading.js"></script> <canvas id="gameCanvas" width="1920" height="1920"></canvas> </body>要特别注意canvas的id，在json中需要声明它，供引擎使用。
接下来，通过CCBoot.js，引擎会去加载和解析project.json，注意把它放在工程的根目录下，下面我们来看看这个json文件的内容：
{ "debugMode" : 1,"noCache": true,"showFPS" : true,"frameRate" : 60,"id" : "gameCanvas","renderMode" : 0,"ENGIneDir":"../","modules" : ["cocos2d"],"jsList" : [ "src/resource.js","src/myApp.js" ] }
按照json的标准格式，这个文件说明了工程的调试模式、是否缓存、是否显示帧率、最大帧率、canvas的id、渲染模式、还有引擎的路径，注意引擎路径这里，因为这个模版工程是寄生在frameworks之内的，因此它的上一层目录就是引擎，对于一般的工程一定要找到引擎的正确位置，在frameworks/cocos2d-html5。
其中，jList是要加载的js文件列表，在这里加载后，以后在任何文件的任何位置都可以访问这些js文件。
下面我们看一下工程的目录结构：
src中一般用于存放自己的js文件，也就是jsList中要加载的那些文件，而资源文件一般放到res中，为了保证性能，资源文件不应当在一开始就全部加载到工程中，而应当进行懒加载，即使用时才加载，为了方便加载资源，一般会写一个resource.js来对资源路径和分类进行封装，下面我们来看看resource.js的内容：
var s_HelloWorld = "HelloWorld.jpg"; var s_CloseNormal = "CloseNormal.png"; var s_CloseSELEcted = "CloseSELEcted.png"; var g_resources = [ //image s_HelloWorld,s_CloseNormal,s_CloseSELEcted ];
当前工程只有三种图片，HelloWorld的Logo、一个按钮的两种状态，首先定义变量存储图片路径，然后用一个数组存储一次性要用到的所有资源，因为这个模版只有一个场景，因此只需要一个资源数组，这个资源数组可以在main.js中进入场景时传入，实现在场景切换完成后同时实现资源的加载。
由于index.html中包含了main.js，因此会运行main.js，下面我们看main.js的内容：
cc.game.onStart = function(){ if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js,please remove it document.body.removeChild(document.getElementById("cocosLoading")); var designSize = cc.size(480,800); var screenSize = cc.view.getFrameSize(); if(!cc.sys.isNative && screenSize.height < 800){ designSize = cc.size(320,480); cc.loader.resPath = "res/Normal"; }else{ cc.loader.resPath = "res/HD"; } cc.view.setDesignResolutionSize(designSize.width,designSize.height,cc.ResolutionPolicy.SHOW_ALL); //load resources cc.LoaderScene.preload(g_resources,function () { cc.director.runScene(new MyScene()); },this); }; cc.game.run();这里用到了cc.game这个类，重写了它的onStart方法，在cocos2d-js中，所有的API都是以cc开头，全部使用点语法，在调用cc.game.run()方法之后，cc.game会自动调用onStart方法，从而实现工程设置与场景的加载。
注意最后一句：
//load resources cc.LoaderScene.preload(g_resources,this);用到了cc.LoaderScene的preload方法来切换场景，这个方法的参数如下：
cc.LoaderScene.preload(resources,cb,target)其中第一个参数是在切换场景时要加载的资源，这里的g_resources是在上述的resource.js中定义的；第二个参数是要加载的内容，用大括号包围，其内写上切换的代码；第三个参数是目标，一般都是填写this。
要实现切换场景，使用的是cc.director的runScene方法，director的含义是导演，这个类的命名十分的形象，说明这个类是控制场景切换和游戏走向的，可以从中获取场景的一些数据和切换场景。
传入的参数是一个场景的实例，MyScene这个类是在哪里定义的呢？注意到jsList中还有一个文件myApp.js没被提到过，它便是定义MyScene类的文件。
它的代码如下：
var MyLayer = cc.Layer.extend({ HelloLabel:null,sprite:null,init:function () { ////////////////////////////// // 1. super init first this._super(); ///////////////////////////// // 2. add a menu item with "X" image,which is clicked to quit the program // you may modify it. // ask director the window size var size = cc.director.getWinSize(); // add a "close" icon to exit the progress. it's an autorelease object var closeItem = new cc.MenuItemImage( s_CloseNormal,s_CloseSELEcted,function () { cc.log("close"); },this); closeItem.setAnchorPoint(0.5,0.5); var menu = new cc.Menu(closeItem); menu.setPosition(0,0); this.addChild(menu,1); closeItem.setPosition(size.width - 20,20); ///////////////////////////// // 3. add your codes below... // add a label shows "Hello World" // create and initialize a label this.HelloLabel = new cc.LabelTTF("Hello","Impact",38); // position the label on the center of the screen this.HelloLabel.setPosition(size.width / 2,size.height - 40); // add the label as a child to this layer this.addChild(this.HelloLabel,5); // add "Helloworld" splash screen" this.sprite = new cc.Sprite(s_HelloWorld); this.sprite.setAnchorPoint(0.5,0.5); this.sprite.setPosition(size.width / 2,size.height / 2); this.sprite.setScale(size.height / this.sprite.getContentSize().height); this.addChild(this.sprite,0); } }); var MyScene = cc.Scene.extend({ onEnter:function () { this._super(); var layer = new MyLayer(); this.addChild(layer); layer.init(); } });首先第一行可以看到对MyLayer类的定义，这里先提一下，cocos2d-JS中对类的继承是通过调用extend方法实现的，传入的为类的具体内容，例如要继承CCLayer类，则按第一行代码写var MyLayer = cc.Layer.extend({...});
再看最后几行代码，定义了一个继承自Scene的类，这里之所以有两个类，是因为切换场景时接收的是Scene，而为了实现用户输入，应到使用Layer，因此一个常用的用法是先定义一个Layer，再定义一个Scene，在Scene中实现把Layer加入到Scene中，然后在Layer中写代码。
CCLayer与CCScene都是继承自CCNode 的类，其中CCLayer比CCScene多了用户输入的功能。
这时候我们再回到上面的preload代码，在那里实例化MyScene，场景在实例化时会调用onEnter方法，只要重写onEnter方法，在场景中加入一个Layer即可。
接下来，在Layer中写主要代码即可，有关cocos2d-js的具体语法详见下一篇。
以上是大佬教程为你收集整理的cocos2d-js（一）引擎的工作原理和文件的调用顺序全部内容，希望文章能够帮你解决cocos2d-js（一）引擎的工作原理和文件的调用顺序所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。