使用 cocos2djs 来打小鸟

cocos2djs 如今已经火到爆，大家可以根据极客学院的教程走一遍体验下js开发游戏的魅力.

这是一个很简单的游戏，不同颜色的小鸟会随机出现在屏幕上, 在规定时间内尽可能打死最多的小鸟. 分数和时间分别显示在屏幕左上角和右上角.

niao.gif

场景部分

我们需要3个场景

开始场景
游戏场景
结束场景

开始场景很简单一个背景加上一个开始按钮

游戏场景是我们核心部分我们会在这里创建小鸟然后飞行通过触摸交互去杀死它们

Paste_Image.png

结束场景很简单就不贴图了

核心部分

最核心的算法部分应该是小鸟随机从屏幕中飞过了,这里采用简单的随机数.来模拟

鸟飞行的方向

1 : 鸟从右边进入飞向左边
-1 : 左边进入飞向右边


 
 var way = Math.random() > 0.5 ? 1: -1;

Math.random() 会生成0.0 - 1.0 之间的随机数字也就是 0.0 < x < 1.0 不包括 0 和 1.采用0.5作为左右分界线.

鸟飞行的时间

我们假设小鸟需要 1 － 3 秒飞行到屏幕外边.


 
 var time = Math.floor(1+Math.random()*3);

注意下 Math.floor 用来取整数加上 Math.random()*3 取得 [0,1,2] 3个整数. 在＋1 取得[1,2,3]

鸟的坐标


 
 var size = cc.winSize;
 var startPos = cc.p(way == 1 ?size.width:0, Math.random() * size.height);
 var endPos = cc.p(way == 1 ? 0 : size.width, Math.random() * size.height);

startPos 小鸟进入屏幕的坐标这个地方通过前面方向(way)的判断来确定小鸟从左边还是右边进入. 如果是右边的话,那么就是屏幕右边贴着屏幕边的任意随机高度进入屏幕飞向左边。
endPos 相反而已.

模拟小鸟飞翔

借助cocos2d action 来模拟飞行.


 
 var bird = new cc.Sprite(res.bird_png,this._birdRect[Math.floor(Math.random() * 4)]); 
         //缩放下
        bird.setScale(-0.5*way,0.5);
        bird.setAnchorPoint(cc.p(0,0.5));
        bird.setPosition(startPos);

         this._birdLayer.addChild(bird);
         this._birdList.push(bird);

                  var _this = this;
                 //小鸟动起来
                 bird.runAction(new cc.Sequence(
                    new cc.MoveTo(time,endPos),
                    //结束执行
                    new cc.CallFunc(function(){

                        for(var i=0; i <_this._birdList.length;i++){
                            var b = _this._birdList[i];
                            //删除掉当前的小鸟
                            if(b == bird){
                                 //指定位置删除 删除数量
                                _this._birdList.splice(i,1);
                                //从layer中移除
                                bird.removeFromParent();
                                break;
                            }
                        }

                    })
                 ));

runAction会执行动作函数然后一个序列来执行。 moveTo 指定了飞行结束位置 endPos 然后callFuns 为动画执行完成的回调这里我们删除了小鸟在数组中的位置以及从父层中删掉.因为它飞到屏幕外面了不需要了.

####### 触摸打鸟

我们需要在 onEnter中添加单点触摸事件.


 
 onEnter : function(){
 this._super(); 
     this._step = 0;

    //启动update函数
    this.scheduleUpdate();

    //添加鼠标事件
    var _this = this;
    this._touchEvent = new cc.EventListener.create({
        //单点触摸
        event : cc.EventListener.TOUCH_ONE_BY_ONE,
        swallowTouches : true,
        onTouchBegan: function(touch,event){

            //新创建的小鸟在数组后面 屏幕上面 所以我们这里要逆向遍历
            for(var i = _this._birdList.length -1; i >=0 ; i--){
                var bird = _this._birdList[i];
                //获得小鸟的碰撞包围盒
                var box =bird.getBoundingBox();

                //检测碰撞是否生效 box 和 当前点击的位置
                if(cc.rectContainsRect(box,touch.getLocation())){
                    //当前分数＋1
                    _this._scoreValue += 1;
                    _this._countdownSprite.setString(_this._scoreValue);

                    //移除bird bird死亡
                    _this._birdList.splice(i,1);
                     bird.removeFromParent();

                    break;

                }
            }

            //如果为true 继续检测后面事件 进行事件传播
            return false;
        }

    });


    //加入到事件管理器中
    cc.eventManager.addListener(this._touchEvent,this);

},

//退出
onExit : function(){
    this._super();

    //关闭update函数
    this.unscheduleUpdate();

    //移除事件
     cc.eventManager.removeListener(this._touchEvent);
},

别忘了退出场景的时候清除掉事件.

代码部分git
https://github.com/sherlock221/FightBird.git