cocos2d-js 开发基础练习代码(1)——熟悉场景加载，精灵，动画使用等

cocos2d-js 开发基础练习代码(1)

个人入门练习敲代码例子：GameKernelScene.js 功能是加载个场景 layer界面随机添加些sprite从上往下掉落，超出屏幕则删除

代码涵盖内容包括：cocos2d-js场景的创建，layer的创建，sprite的创建，动画的使用，定时器的使用，以及JavaScript语法基础，对象的使用，方法的调用，数组Array的元素两种删除使用，Array添加自定义方法的方法，添加对象成员属性等。

新手一枚刚开始从c++转js，主要为了方便以后熟悉查阅，基本都是很基础的框架使用练习和js语法基础练习，看了一目了然，讲不出什么技术来，不懂欢迎评论交流

加载GameKernelScene.js方法，在入口cocos2d-js 工程下的main.js中添加启动代码：

 //load resources
 cc.LoaderScene.preload(images_res, function () {
     cc.director.runScene(new GameKernelScene());
 }, this);

下章练习敲：使用事件管理器创建用户交互以及cocos精灵帧动画的js使用

/* 添加Array自定义删除方法 */
Array.prototype.DeleteByIdx = function(n) {
    /* n表示索引第几项，索引从0开始计算 */
    /* prototype为对象原型，注意这里为对象增加自定义方法的方法，属于JavaScript语法 */

    if(n<0)
        return this;
    else
        return this.slice(0,n).concat(this.slice(n+1,this.length));

    /*  concat 方法：返回一个新数组，这个新数组是由两个或更多数组组合而成的。这里
        就是返回this.slice(0,n)+this.slice(n+1,this.length)组成的新数组，这中间，刚好
        去掉了被删除的第n项

        slice方法： 返回一个数组的一段，两个参数，分别指定开始和结束的位置。
    */
}

var GameKernelLayer = cc.Layer.extend({
    // members
    bgSprite:null,
    SushiSpritesMgr:null,
    ctor:function () {
        // 1. super init first
        this._super();

        // init vars 
        //不使用自定义删除方法的Array初始化
        //this.SushiSpritesMgr = [];

        //使用自定义删除方法的Array初始化
        this.SushiSpritesMgr = new Array();      

        // 2. add your contents

        var size = cc.winSize;

        // add btns
        var closeItem = new cc.MenuItemImage(
            images_res.CloseNormal_png,
            images_res.CloseSelected_png,
            function () {
                cc.log("Z.x: Menu is clicked！");
            },this);

        closeItem.attr({
            x:size.width - 20,
            y:20,
            anchorX:0.5,
            anchorY:0.5
        });

        var menu = new cc.Menu(closeItem);
        menu.x = 0;
        menu.y = 0;
        this.addChild(menu, 1);

        // add other codes below...
        // cocos label
        var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);
        // set position
        helloLabel.x = size.width / 2;
        helloLabel.y = 0;
        // add node
        this.addChild(helloLabel, 5);

        helloLabel.runAction(
            cc.spawn(
                cc.moveBy(2.5,cc.p(0, size.height - 40)),
                cc.tintTo(2.5, 255, 125, 0)
            )
        );

        // cocos sprite
        this.bgSprite = new cc.Sprite(images_res.GameKernel_Bg);
        this.bgSprite.attr({
            x: size.width / 2,
            y: size.height / 2,
            scale: 0.5,
            rotation: 180,
            anchorX: 0.5,
            anchorY: 0.5
        });
        this.addChild(this.bgSprite, 0);

        this.bgSprite.runAction(
            cc.sequence(
                cc.rotateTo(2, 0),
                cc.scaleTo(2, 1, 1)
            )
        );

        /* 启动定时器 */
        this.schedule(this.update,1,16*1024,1);

        return true;
    },

    addSushi: function() {

        var sushi = new cc.Sprite(images_res.GameFlyBody_Image);
        var size = cc.winSize;

        var posX = sushi.width/2 + size.width/2*cc.random0To1();

        sushi.attr({
            x: posX,
            y: size.height - 30
        });

        this .addChild(sushi, 5);
        this.SushiSpritesMgr.push(sushi);

        /* action */
        var dorpAction = cc.MoveTo.create(4,cc.p(sushi.x, -30));
        sushi.runAction(dorpAction);
    },

    removeSushi: function() {
        /* 移除到屏幕底部的sushi */
        for(var i = 0; i < this.SushiSpritesMgr.length; i++){
            cc.log("Z.x: remove Sushi......");
            if(0 >= this.SushiSpritesMgr[i].y){
                cc.log("Z.x: remove - "+i);
                this.SushiSpritesMgr[i].removeFromParent();
                this.SushiSpritesMgr[i] = undefined;

                //不使用自定义删除方法的Array初始化  对应上面初始化数组的语句
                //this.SushiSpritesMgr.splice(i,1);
                //i = i-1;

                //使用自定义删除方法的Array初始化
                this.SushiSpritesMgr = this.SushiSpritesMgr.DeleteByIdx(i);
            }
        }
    },

    update:function() {
        /* 添加一个掉落物体 放开则添加多个*/
        if(true/*0 == this.SushiSpritesMgr.length*/){
            this.addSushi();            
        }
      
        /* 检测掉落物体 是否超出屏幕之外 */
        this.removeSushi();
    }

});

var GameKernelScene = cc.Scene.extend({
    onEnter:function () {
        this._super();

        var layer = new GameKernelLayer();
        this.addChild(layer);
    }
});