Cocos2d-HTML5入门第三天
来源：程序员人生 发布时间：2014-11-22 08:41:18 阅读次数：2244次
第2天掠过，不要在乎细节。
第3天了，目前只搭了个hello world版本，而且换了3个版本，到现在仍旧不知道怎样开发游戏。
在上1篇文章搭建的基础上，分析1下结构。
抛开游戏不说，只谈b/s的b，顺着1开始的入口index.html页面。
眼前1个标准的H5页面
1个html5的新标签canvas，俩个js文件。
打开第1个文件cocos2d/cocos2d-html5/CCBoot.js
2千多行代码，粗略从头读到尾巴，发现里边不过就是定义了1个cc的命名空间，当作全局变量对象，这个cc对象加了很多方法和属性。
代码1开始添加了1些经常使用的工具方法
比如
cc.newElement = function (x) {
return document.createElement(x);
};
cc._addEventListener = function (element, type, listener, useCapture) {
element.addEventListener(type, listener, useCapture);
};
封装了新建元素结点和捕获事件监听的方法。
顺着下看，cc对象又挂了1个属性：game对象，对象里面挂了1些配置信息对象，从字面量看是1些帧速度，依赖包，引擎路径等配置。
还有1些方法比如说run,应当是游戏开始方法；
有个_initConfig应当是初始化游戏，比如引进依赖脚本，图片等。
最后在2184行有1句cc.game._initConfig();
然后回头看了下_initConfig();方法
原来里面是读取我们主目录下的project.json文件，然后把project.json的信息初始化合并进self.config，有点类似jQuery插件开发的option有木有，比如说,project文件配置的js脚本路径，引擎engineDir路径，模块名字等。并没有我想象那样1开始就加载文件……
ok，目前为止大概了解CCBoot.js的作用了。定义了cc，然后初始化了1些配置信息。
接着看看inde.html引进的第2个文件main.js
cc.game.onStart = function(){
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在这里被定义了，再回头看CCBoot.js，在game对象里面被声明缺省为null,然后在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);
},
回到main.js，看看onstart方法 里面1开始的size方法并且没有在CCBoot.js里面定义，目测是在异步引进cocos2d各个模块下面定义的方法，打开cocos2d 库文件夹下面的模块，发现大部份方法和属性都是挂在cc对象下的。
回到onstart方法，
里面根据不同的窗口加载不同的res资源，在这里我们res目录确切也有对应两种大小的资源图片。
cc.LoaderScene.preload应当是加载该场景用到的资源文件并且显示场景
最后1行
cc.game.run();
会调用刚刚定义的onstart方法。如果把这行注释掉，刷新index.html,会发现很多脚本都没有加载进来，页面1片黝黑.看来动态加载场景的脚本是cocos2d-hmlt5的1个特点。
今天差不多这样了，共写了两篇文章。
赶今儿白天抽空研究1些游戏特点和API，做好铺垫，争取周末做点甚么粗来。
碎觉……
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
