使用 createJS 制作的 Javascript 游戏中的碰撞检测答案

【问题标题】：Collision detection in Javascript game made using createJS使用 createJS 制作的 Javascript 游戏中的碰撞检测
【发布时间】：2018-08-31 23:47:20
【问题描述】：

您好，我正在制作一款太空射击游戏，我想检查 Boss 和玩家子弹之间的碰撞。我面临的问题是老板子弹和玩家之间的碰撞被完美地检测到，但是老板正在与自己的子弹碰撞并失去所有的健康，这只有在动画进入画布左侧时才会发生。这是我的代码

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

            }
        }

    }

这是控制台输出。我正在使用 ndgmr.checkRectCollision 进行碰撞检测。似乎无法找到错误。任何需要的更多代码让我知道谢谢。

【问题讨论】：

使用console.dir或console.table（如果你有表的话）会帮你调试
实际上我修复了它，因为我的动画只在画布外发送了几个像素的老板并且正在被破坏

标签： javascript createjs easeljs

【解决方案1】：

最近我一直在研究的 EaselJS 原型中的一些有用的东西：

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

当我尝试绘制这些边界框时，这同样对我有帮助：

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();
}

【讨论】：