五 CocosEditor基礎教程第二季 之矩形碰撞檢測

前言：

這一節主要講解矩形碰撞，在碰撞要求不是很嚴格的時候，簡單的矩形碰撞可以幫助我們；

遊戲規則很簡單，雪球一直射擊中，小怪物躲避就行；

效果圖

代碼下載

https://github.com/makeapp/cocoseditor-samples （snow-collision）

代碼分析

1 更新函數裏面，隔二秒產生一個新的雪球以及雪球函數newSnowBall（）；

MainLayer.prototype.onUpdate = function (dt) {
    this.currentTime += dt;
   

    if (this.currentTime - this.lastSnowBall > 2) {
        this.newSnowBall();
        this.lastSnowBall = this.currentTime;
    }

根據怪物的位置設置雪球射擊速度方向speedX和speedY，射擊時間newTime;

MainLayer.prototype.newSnowBall = function () {
    var snowBall = cc.Sprite.createWithSpriteFrameName("m_snowball_roll_2.png");
    snowBall.setPosition(cc.p(360, 200));
    snowBall.setZOrder(100);
    snowBall.setAnchorPoint(cc.p(0.5, 0.5));
    snowBall.setTag(-100);
    snowBall.newTime = this.currentTime;
    snowBall.speedX = (this.monster.getPosition().x - snowBall.getPosition().x) / 8;
    snowBall.speedY = (this.monster.getPosition().y - snowBall.getPosition().y) / 8;
    this.rootNode.addChild(snowBall);
}

2 從根節點找到雪球children，然後檢測碰撞

下面有四種：可以把代碼註釋，分別查看四種不同的效果

1 碰撞一 普通，直接通過getBoundingBox函數獲取精靈矩形，這種不是很精準

2  //碰撞二 通過rectCreate函數縮小矩形範圍  達到更精準；

3  //碰撞三 擴大碰撞區域  200dp就發生了碰撞，這個在一些遊戲需要把某個區域的怪物都殺死的時候可以應用，比如發射了炸彈，方圓500px都要消除

4 //碰撞四 兩個精靈中心距離小於40時 這個是高中數學知識，兩點距離

  for (var i = 0; i < this.rootNode.getChildrenCount(); i++) {
        var child = this.rootNode.getChildren()[i];
        if (child.getTag() == -100) {
            //  cc.log("ball");
            var monsterX = this.monster.getPosition().x;
            var monsterY = this.monster.getPosition().y;
            var childX = child.getPositionX();
            var childY = child.getPositionY();

            /*var followX = childX + (this.currentTime - child.newTime) * (monsterX - childX) / 5;
             var followY = childY + (this.currentTime - child.newTime) * (monsterY - childY) / 5;*/

            var followX = childX + (this.currentTime - child.newTime) * child.speedX;
            var followY = childY + (this.currentTime - child.newTime) * child.speedY;

            child.setPosition(cc.p(followX, followY));
            if (child && child.getPositionY() > 1500) {
                child.removeFromParent(true);
                continue;
            }

            //碰撞一 普通
            /*if (cc.rectIntersectsRect(child.getBoundingBox(), this.monster.getBoundingBox())) {
             this.createParticle("around", monsterX, monsterY);
             cc.AudioEngine.getInstance().playEffect("res/sounds/bomb.mp3", false);
             child.removeFromParent(true);
             }*/

            //碰撞二 縮小矩形範圍  更精準；
            /*if (cc.rectIntersectsRect(cc.rectCreate(child.getPosition(), [10, 10]), cc.rectCreate(this.monster.getPosition(), [20, 20]))) {
             this.createParticle("around", monsterX, monsterY);
             cc.AudioEngine.getInstance().playEffect("res/sounds/bomb.mp3", false);
             child.removeFromParent(true);
             }*/

            //碰撞三 擴大碰撞區域 200dp就發生了碰撞
            /*if (cc.rectIntersectsRect(cc.rectCreate(child.getPosition(), [10, 10]), cc.rectCreate(this.monster.getPosition(), [200, 200]))) {
                this.createParticle("around", monsterX, monsterY);
                cc.AudioEngine.getInstance().playEffect("res/sounds/bomb.mp3", false);
                child.removeFromParent(true);
            }*/

            //碰撞四 兩個精靈中心距離小於40時
            var distance = cc.pDistance(child.getPosition(), this.monster.getPosition());
            if (distance < 40) {
                this.createParticle("around", monsterX, monsterY);
                cc.AudioEngine.getInstance().playEffect("res/sounds/bomb.mp3", false);
                child.removeFromParent(true);
            }

        }
    }

over