Collision detection in Javascript game made using createJS

Question

Hello I am making a space shooter game and I want to check collision between boss and player bullets. The problem I am facing is that collision between boss bullet and player is perfectly detected but boss is colliding with its own bullet and loosing all its health and this happens only when animation goes to left side of canvas. Here is my code

function fire_Boss02_first(){

        var boss02_bullet_first=bullet_first.clone();
        boss02_bullet_first.x=boss02.x+bullet2_boss_stats.offSetX;
        boss02_bullet_first.y=boss02.y+bullet2_boss_stats.offSetY;
        boss02_bullet_first.st=bullet2_boss_stats;
        stage.addChild(boss02_bullet_first);
        time=(boss02_bullet_first.y+500)/0.99;
        createjs.Tween.get(boss02_bullet_first).to({y:1000},time);
        boss02_bullet_first.addEventListener("tick",collisionEvent);
        function collisionEvent(event) {
            for(var i=0; i<stage.children.length; i++){
                if(stage.getChildAt(i).name == "player"){
                    var intersection = ndgmr.checkRectCollision(stage.getChildAt(i),boss02_bullet_first );
                    if(intersection != null){
                        stage.getChildAt(i).st.health = stage.getChildAt(i).st.health - boss02_bullet_first.st.damage;
                         health_txt.text="ENERGY: "+stage.getChildAt(i).st.health;
                        if(stage.getChildAt(i).st.health <= 0){
                            explode = explode_fx.clone();
                            explode.x=stage.getChildAt(i).x -50;
                            explode.y=stage.getChildAt(i).y -50;
                            explode.addEventListener("animationend", endAnimation); 
                                function endAnimation(event) {
                                stage.removeChild(explode);
                             }                              
                             stage.addChild(explode);
                             stage.removeChildAt(i);
                             lives--;
                             lives_txt.text = "LIVES: " + lives;
                        }
                        stage.removeChild(boss02_bullet_first);
                        intersection = null;
                    }
                }   

                else if(stage.getChildAt(i).name == "boss02"){
                        var intersection = ndgmr.checkRectCollision(stage.getChildAt(i),bullet);
                        if(intersection != null){
                        stage.getChildAt(i).st.health = stage.getChildAt(i).st.health - bullet.st.damage;
                        console.log(stage.getChildAt(i).st.health);
                        console.log(bullet);
                        if(stage.getChildAt(i).st.health <= 0){
                            score+=500;
                            score_text.text="SCORE: "+score;
                            explode = explode_fx.clone();
                            explode.x=stage.getChildAt(i).x +50;
                            explode.y=stage.getChildAt(i).y +50;
                            explode.addEventListener("animationend", endAnimation); 
                                function endAnimation(event) {
                                stage.removeChild(explode);
                             }                              
                             stage.addChild(explode);
                             stage.removeChildAt(i);

                        }
                        stage.removeChild(bullet);
                        intersection = null;
                    }
                }

            }
        }

    }

This is the Console Output. I am using ndgmr.checkRectCollision for collision detection. Cant seem to find the bug.Any more code necessary do let me know Thanks.

using console.dir or console.table (if you have a table) will help you debug — Ranjeet
Actually I fixed it as my animation is sending just couple pixels of boss outside of canvas and is getting destroyed — Shivam Sood

adagar adagar · Accepted Answer · 2018-08-31T15:47:20

Something useful from a recent EaselJS prototype I've been working on:

if ( shipBox.x >= enemyBox.x + enemyBox.width || shipBox.x + shipBox.width <= enemyBox.x || shipBox.y >= enemyBox.y + enemyBox.height || shipBox.y + shipBox.height <= enemyBox.y )
{
  return false;
}else{
  return true;
}

This similarly helped me when I was trying to draw those bounding boxes:

function DrawBoundingBox(collider){
    var bb = new createjs.Shape();
    bb.graphics.clear().beginStroke("black").drawRect(collider.x, collider.y, collider.width, collider.height);
    bb.regX = collider.width / 2 + collider.x;
    bb.regY = collider.height / 2 + collider.y;
    bb.x = collider.x;
    bb.y = collider.y;
    stage.addChild(bb);
    stage.update();
}

Collision detection in Javascript game made using createJS

1 Answers