Cocos Creator 日记项目实战FlyBird

Cocos 笔记项目实战（FlyBird）

学习知识点：

碰撞组件及碰撞事件
数据存储
控件动画
背景滚动处理
得分处理
如何label控件显示字
声音播放

提供github下载地址: https://github.com/Noying/FlayBird

素材百度网盘:https://pan.baidu.com/s/1uU5daqfghqvjD_ADHIdKzw

碰撞组件及碰撞事件

例如，水管的碰撞组件，只需要先将水管大小设置好，然后添加组件，选择

就可以了，会自动的布满精灵。

事件处理，如我得飞鸟，如下：

主要是勾好第一个选项Enabled Contact Listened,获得碰撞事件,然后再飞鸟上的脚步Player.js 上添加函数：

    onCollisionEnter: function (other, self) {
        switch(other.tag){
            case 1:
                this.game.gameOver();
                break;
            case 2:
                 this.score++;
                 cc.log("score is "+this.score);
                 this.game.setScoreText(this.score);
                 break;
            default:
                 break;
        }
    
    },

官网资料：碰撞组件及碰撞回调

数据存储

我这个游戏主要是存储，鸟飞过获得最高分，因此我只有一个存储

    saveScore:function(){ //保存数据
        var maxScore = JSON.parse(cc.sys.localStorage.getItem('Score'));
        if(!maxScore)maxScore=0;
        if(this.score>=maxScore){
            cc.sys.localStorage.setItem('Score', this.score);
        }
    }

 onLoad () { //本来这里还想做个列表，然后排序，最高分和最低分之类的
        cc.director.preloadScene("menuSence");
        var maxScore = JSON.parse(cc.sys.localStorage.getItem('Score'));
        if(!maxScore)maxScore=0;
         this.score.getComponent(cc.Label).string = "Score: "+maxScore; //这里也必须熟悉
         this.backBtn.getComponent(cc.Button).node.on(cc.Node.EventType.TOUCH_END,this.GoBack,this);
     }

官网资料: 数据存储和数据读取

控件动画

我得动画主要是用在两个背景之间的切换了，代码如下:

  setMoveAction:function(){
        var fristAction = cc.moveBy(15,-640,0);
        var secondAction = cc.moveBy(0.1,1280,0);
        var retAction = cc.repeatForever(cc.sequence(fristAction,secondAction,fristAction));
        if(this.node.x==0){
            retAction = cc.repeatForever(cc.sequence(fristAction,secondAction,fristAction));
        }else if(this.node.x==640){
            retAction = cc.repeatForever(cc.sequence(fristAction,fristAction,secondAction));
        }
        return retAction;
    }

背景滚动处理

为了使背景显得在滚动，可以在背后，我认为可以使你得摄像头跟着走，或者你得背景自己移动，我这里是两个背景进行衔接，不停的运动，如图：

两块，可以衔接的图片不停的运动，当然这样的图片如何制作，我将在我得PS心得中分享

得分处理

因为，FlyBird是通过水管而计分的，我这里不想使用代码去判断坐标而去计分，所以我用了一个透明的，跨越了整个竖着的屏幕的，宽为1，长为屏幕长度的透明碰撞组件放置在水管的后方，这样，只要飞鸟经过了这个碰撞组件就可以计分。

如何label控件显示字

这个也是从网上查到，不管是Prefab还是脚本自己的属性控件，要想修改上面的字符串都得如下处理

 this.score.getComponent(cc.Label).string = "Score: "+maxScore; //这里也必须熟悉

    var label = cc.instantiate(this.startLabel);
            this.node.addChild(label);
            label.getComponent(cc.Label).string = time; //这个是个需要记住的地方

声音播放

cc.audioEngine.playEffect(this.hitAudio, false);

官方资料: 音频播放