我们下载的是cocos2dx-js的精简版本，主要是为了分析简单明了，能更清楚的看到架构流程。
下载地址:
http://cocos2d-x.org/filecenter/jsbuilder/
下载轻量版。
百牛信息技术bainiu.ltd整理发布于博客园
----------------------
服务器模拟使用xampp软件。
调试使用360浏览器自带调试。
开发环境当前没找到一个好的，暂时使用notepad++编辑，如有好的，请告知。
-----------------
一般学习一个引擎的思路便是阅读引擎自带的demo源码，熟悉架构以及模块。关于demo，我们下载完整版本，在cocos2d-js-v3.1\samples\js-tests\src 这个路径下。
关于api查询，可在官网找到，具体为http://www.cocos2d-x.org/wiki/Reference。
------------
下面我们来分析demo，熟悉下流程。
我们来看的是
HelloWorld.html这个文件.
<!DOCTYPE html>
<html>
<head>
???<title>Hello Cocos2d-JS</title>
???<script type="text/javascript" src="cocos2d-js-v3.1-lite.js" charset="UTF-8"></script>
</head>
<body> ??
???<canvas id="gameCanvas" width="800" height="450"></canvas>
???<script type="text/javascript">
?????????window.onload = function(){
?????????????cc.game.onStart = function(){
?????????????????//load resources
?????????????????cc.LoaderScene.preload(["HelloWorld.png"], function () {
?????????????????????var MyScene = cc.Scene.extend({
?????????????????????????onEnter:function () {
?????????????????????????????this._super();
?????????????????????????????var size = cc.director.getWinSize();
?????????????????????????????var sprite = cc.Sprite.create("HelloWorld.png");
?????????????????????????????sprite.setPosition(size.width / 2, size.height / 2);
?????????????????????????????sprite.setScale(0.8);
?????????????????????????????this.addChild(sprite, 0);
?????????????????????????????var label = cc.LabelTTF.create("Hello World", "Arial", 40);
?????????????????????????????label.setPosition(size.width / 2, size.height / 2);
?????????????????????????????this.addChild(label, 1);
?????????????????????????}
?????????????????????});
?????????????????????cc.director.runScene(new MyScene());
?????????????????}, this);
?????????????};
?????????????cc.game.run("gameCanvas");
?????????};
???</script>
</body>
</html>
简单来拆分下:
<script type="text/javascript" src="cocos2d-js-v3.1-lite.js" charset="UTF-8"></script>
引入引擎js
<canvas id="gameCanvas" width="800" height="450"></canvas>
需要一个id为gameCanvas tag为canvas的标签，为渲染使用。
主角代码为：
<script type="text/javascript">
?????????window.onload = function(){
?????????????cc.game.onStart = function(){
?????????????????//load resources
?????????????????cc.LoaderScene.preload(["HelloWorld.png"], function () {
?????????????????????var MyScene = cc.Scene.extend({
?????????????????????????onEnter:function () {
?????????????????????????????this._super();
?????????????????????????????var size = cc.director.getWinSize();
?????????????????????????????var sprite = cc.Sprite.create("HelloWorld.png");
?????????????????????????????sprite.setPosition(size.width / 2, size.height / 2);
?????????????????????????????sprite.setScale(0.8);
?????????????????????????????this.addChild(sprite, 0);
?????????????????????????????var label = cc.LabelTTF.create("Hello World", "Arial", 40);
?????????????????????????????label.setPosition(size.width / 2, size.height / 2);
?????????????????????????????this.addChild(label, 1);
?????????????????????????}
?????????????????????});
?????????????????????cc.director.runScene(new MyScene());
?????????????????}, this);
?????????????};
?????????????cc.game.run("gameCanvas");
?????????};
???</script>
我们可以看到标准的框架:
window.onload = function(){
};
代码写在这里，当环境加载完毕触发。
cc.game.onStart
给这个赋值。
cc.game.run("gameCanvas");
这个真正开始引擎。
cc.LoaderScene.preload 为加载前面列出来的数组资源，加载完毕后进入第二个函数。
加载完毕，创建了一个Scene ，这个为场景。
cc.director.runScene(new MyScene());
这个为将场景加载进入导演里面，此时才会去绘制，显示，以及响应。
我们来看下var MyScene里面的元素，在onEnter里面添加了一些元素，比如sprite label 使用addChild 将其加载进入scene里面，最终呈现出来。
流程整理为：
Window.onload 里面配置cc.game.onStart 为自己加载的第一个界面。
使用 cc.game.run("gameCanvas");进行引擎启动。
下面我们来看下引擎里面的cc.game.run函数的实现:
???run: function (id) {
???????var self = this;
???????var _run = function () {
???????????if (id) {
???????????????self.config[self.CONFIG_KEY.id] = id;
???????????}
???????????if (!self._prepareCalled) {
???????????????self.prepare(function () {
???????????????????self._prepared = true;
???????????????});
???????????}
???????????if (cc._supportRender) {
???????????????self._checkPrepare = setInterval(function () {
???????????????????if (self._prepared) {
???????????????????????cc._setup(self.config[self.CONFIG_KEY.id]);
???????????????????????self._runMainLoop();
???????????????????????self._eventHide = self._eventHide || new cc.EventCustom(self.EVENT_HIDE);
???????????????????????self._eventHide.setUserData(self);
???????????????????????self._eventShow = self._eventShow || new cc.EventCustom(self.EVENT_SHOW);
???????????????????????self._eventShow.setUserData(self);
???????????????????????self.onStart();
???????????????????????clearInterval(self._checkPrepare);
???????????????????}
???????????????}, 10);
???????????}
???????};
???????document.body ?
???????????_run() :
???????????cc._addEventListener(window, ‘load‘, function () {
???????????????this.removeEventListener(‘load‘, arguments.callee, false);
???????????????_run();
???????????}, false);
},
我们看,这里为首次进入初始化代码。
????????if (!self._prepareCalled) {
???????????????self.prepare(function () {
???????????????????self._prepared = true;
???????????????});
???????????}
关键代码：在
if (cc._supportRender) 里面，这个默认肯定是要支持渲染的。
cc._setup()设置默认参数，一些全局对象创建。
???_runMainLoop: function () {
???????var self = this, callback, config = self.config, CONFIG_KEY = self.CONFIG_KEY,
???????????director = cc.director;
???????director.setDisplayStats(config[CONFIG_KEY.showFPS]);
???????callback = function () {
???????????if (!self._paused) {
???????????????director.mainLoop();
???????????????if(self._intervalId)
???????????????????window.cancelAnimationFrame(self._intervalId);
???????????????self._intervalId = window.requestAnimFrame(callback);
???????????}
???????};
???????window.requestAnimFrame(callback);
???????self._paused = false;
???}
关键函数requestAnimFrame 执行刷新频率， director.mainLoop(); 一直执行，推动游戏执行。
调用配置的onstart 函数执行真正代码。
self.onStart();
cocos2dx-js 初探 整体流程helloworld.html分析
原文地址：http://www.cnblogs.com/bainiu/p/7589101.html