cocos - JS - 碰撞检测

碰撞检测是游戏的一个重要组成部分,我们这里使用一种最简单的方法,就是获取精灵的矩形碰撞框。当然圆形的碰撞检测也比较简单,其他形状就复杂多了。
首先是如何获取矩形碰撞框:
var hBox=this.hero.getBoundingBox();//主角碰撞框
var eBox=this.enemy.getBoundingBox();//敌人碰撞框
其次如何判断他们发生了碰撞:
if(cc.rectIntersectsRect(hBox, eBox)){//判断主角与敌人是否发生碰撞
//这里写发生碰撞后要执行的代码
}
现在我们要让主角发射的子弹在击中敌人的时候能消失,好吧,有上面的基础,直接上代码吧。
新建一个函数update,在ctor函数中this.schedule(this.update);每帧调用update。
update:function(){
var i;
var hBox=this.hero.getBoundingBox();//主角碰撞框
var eBox=this.enemy.getBoundingBox();//敌人碰撞框
for(i in this._bullets){//遍历所有子弹
var bullet=this._bullets[i];
var bBox=bullet.getBoundingBox();//子弹碰撞框
if(cc.rectIntersectsRect(bBox,eBox)){//判断子弹与敌人是否发生碰撞
this._bullets.splice(i, 1);//从子弹数组中删除子弹
this.removeChild(bullet,true);//移除子弹
}
}
}
好了,debug,发现子弹打到敌人会消失了。

CocosCreator实现的 解救人质 游戏,学会碰撞检测rescue.7z // Bullet.js cc.Class({ extends: cc.Component, properties: { mSpeed: 300, }, // LIFE-CYCLE CALLBACKS: // onLoad () {}, start() { var manager = cc.director.getCollisionManager(); // 获取碰撞检测系统 manager.enabled = true; }, update(dt) { // 设置子弹移动,当超出屏幕范围未发生碰撞时自动销毁 this.node.y += this.mSpeed * dt; if (this.node.y > 580) { console.log('超出屏幕范围,子弹销毁!'); this.node.destroy(); } }, /** * 当碰撞产生的时候调用 * @param {Collider} other 产生碰撞的另一个碰撞组件 * @param {Collider} self 产生碰撞的自身的碰撞组件 */ onCollisionEnter: function (other, self) { console.log('on collision enter'); if (other.tag == 1) { // 子弹碰到人质时,解救失败! console.log('解救人质失败!'); var failLabel = this.node.parent.getChildByName('failLabel'); failLabel.active = true; this.node.destroy(); } else if (other.tag == 2) { // 子弹碰到敌人时,解救成功! console.log('解救人质成功!'); var successLabel = this.node.parent.getChildByName('successLabel'); successLabel.active = true; this.node.destroy(); } }, /** * 当碰撞产生后,碰撞结束前的情况下,每次计算碰撞结果后调用 * @param {Collider} other 产生碰撞的另一个碰撞组件 * @param {Collider} self 产生碰撞的自身的碰撞组件 */ onCollisionStay: function (other, self) { console.log('on collision stay'); }, /** * 当碰撞结束后调用 * @param {Collider} other 产生碰撞的另一个碰撞组件 * @param {Collider} self 产生碰撞的自身的碰撞组件 */ onCollisionExit: function (other, self) { console.log('on collision exit'); } });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值