使用 cocos2djs 来打小鸟
cocos2djs 如今已经火到爆，大家可以根据极客学院的教程走一遍 体验下js开发游戏的魅力.
这是一个很简单的游戏， 不同颜色的小鸟会随机出现在屏幕上, 在规定时间内尽可能打死最多的小鸟. 分数和 时间分别显示在屏幕 左上角 和右上角.
niao.gif
场景部分
我们需要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>
别忘了退出场景的时候 清除掉 事件.
