昨天接触到了cocos2d-html5的的东东了, 第一次看其源代码一头雾水，幸好samples目录下面有几个例子，可以从这个入手。

MoonWarriors是一个射击类的游戏, 有点像以前玩的雷电, 一边看代码，一边玩这个游戏，基本上理解了cocos2d里面的一些基本的概念。

游戏里面有四个基本的概念，director, scene, layer, objects(spirte, menuitem, 等).

director负责scene的切换，一个scene可以有很多的layer, 每个layer上面可以画很多类型的object, 像飞船, 子弹，还有爆炸效果这些都是某种sprite。还有一些menu的控件，label, menuItem之类的。layer可以处理鼠标，键盘和触摸事件, 还可以注册timer事件。

游戏的初始化

整个App以一个最初的scene来初始化, 在资源加载完就切换到这个scene, 比如MoonWarriors代码main.js, 里面cocos2dApp是从cocos2d里面的Application派生来的。

var myApp = new cocos2dApp(SysMenu.scene);

在这个构造函数里面会去进行cocos2d的setup, 然后load一些资源，在资源load完以后, 会回调applicationDidFinishLaunching最后会切换到 sysMenu这个场景了.

cc.Director.getInstance().replaceScene(new this.startScene());

这儿用的是Director来切换场景的, Director是个全局的单例对象。

场景切换

sysMenu 这一层主要就三个按钮, newGame, about, settings。还有一些动画效果。

在sysMenu这一层，在init函数里面，会用Spirte， Menu之类的画按钮和一些显示效果, 并且这些按钮之类的可以设置回调函数。

比如 about按钮

var about = cc.MenuItemSprite.create(aboutNormal, aboutSelected, aboutDisabled, this.onAbout, this);

然后在about点击后，按钮的回调函数里面会切换到about场景..

onAbout:function (pSender) {

    this.onButtonEffect();

    var scene = cc.Scene.create();

    scene.addChild(AboutLayer.create());

    cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));

}

About, Setting这俩个scene和这个类似吧, 显示一些游戏相关文字，然后在按钮的回调函数里面切换场景。

事件处理

在GameLayer这一层，就是主要的游戏咯，它处理touchmove, mouseMove等时间，然后更新画面.(其实吧，我觉得所有游戏都是这样子的), layer首先需要先设置以下这个层是否需要处理这些事件。

    if( 'keyboard' in sys.capabilities )

        this.setKeyboardEnabled(true);

    if( 'mouse' in sys.capabilities )

        this.setMouseEnabled(true);

    if( 'touches' in sys.capabilities )

        this.setTouchEnabled(true);

然后在对应的回调函数onTouchesMoved, onMouseDragged, onKeyDown, onKeyUp处理相应的事件。

update和timer

每个layer都有一个update函数，会调用这个来更新layer, 然后可以用schedule这个函数注册一个类似于timeout的回调函数, 在GameLayer.init里面这样用了

    this.scheduleUpdate();

    this.schedule(this.scoreCounter, 1);

    this.schedule(this.movingBackground, 3);

然后在GameLayer.update负责更新画面, movingBackground去移动背景，scoreCounter负责统计分数以及关卡的管理.

Sprite

游戏里面的飞船，子弹，还有敌人, 以及爆炸的效果都是派生自Sprite这个类，Spirte给我感觉就是加载图片，然后对图片做各种动画效果。然后提供了各种函数比如移动， 放大, blend color之类对这些图片作变换。一般带动画效果的都可以用这个Sprite.