使用 cocos2djs 来打小鸟

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

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

niao.gif

场景部分

我们需要3个场景

1. 开始场景
2. 游戏场景
3. 结束场景

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

s

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

Paste_Image.png

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

核心部分

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

鸟飞行的方向

1 : 鸟从右边进入 飞向左边
-1 : 左边进入飞向 右边
<pre>
<code>
var way = Math.random() > 0.5 ? 1: -1;
</code>
</pre>

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

鸟飞行的时间

我们假设 小鸟需要 1 － 3 秒 飞行到屏幕外边.
<pre>
<code>
var time = Math.floor(1+Math.random()*3);
</code>
</pre>

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

鸟的坐标

<pre>
<code>
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);
</code>
</pre>

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

模拟小鸟飞翔

借助cocos2d action 来模拟飞行.

<pre>
<code>
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;
                            }
                        }

                    })
                 ));

</code>
</pre>

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

####### 触摸打鸟

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

<pre>
<code>
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);
},

</code>
</pre>

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

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