在javascript中碰撞检测

问题描述：

我正在实施一个自定义空间侵略者在HTML/JavaScript中。到目前为止，一切正常，但碰撞检测似乎是一个问题。在网上寻找一些解决方案之后，这里是我迄今为止的。在javascript中碰撞检测

我的敌人被表示在阵列中是这样的：

function Logo(I){ 
    I = I || {}; 
    I.sprite = new Image(); 
    I.active = true; 

    I.width = 25; 
    I.height = 25; 

    I.explode = function(){ 
     this.active = false; 
    } 

    I.draw = function(){ 
     context.drawImage(I.sprite,this.x,this.y); 
    } 

    I.setRes = function(name){ 
     this.sprite.src = name; 
    } 

    return I; 
}

其中填充这样的：

var logoArray = []; 
    for(i=0;i<logoData.length;i++){ 
     logoArray.push(Logo({ 
      x: logoData[i].x, 
      y: logoData[i].y 
     })); 
     logoArray[i].setRes("./graphics/logo_slices/logo_" + logoData[i].name + ".png"); 
     console.log(logoArray[i].sprite.src); 
    }

碰撞被这样处理（enemy.explode做this.active =假）：

function handleCollision(){ 
    playerBullets.forEach(function(bullet) { 
     logoArray.forEach(function(enemy) { 
      if (isCollide(bullet, enemy)) { 
      enemy.explode(); 
      bullet.active = false; 
      } 
     }); 
    }); 
} 

function isCollide(a, b) { 
    return a.x < b.x + b.width && 
     a.x + a.width > b.x && 
     a.y < b.y + b.height && 
     a.y + a.height > b.y; 
}

问题是，它使得处于非活动状态的所有影响poi的左侧NT。据我所知，很难说清楚我的问题很高兴澄清。

绘制函数的过滤器仅绘制阵列的有源元件：

logoArray.forEach(function(logo_slice){ 
    logo_slice.draw(); 
});

感谢您的帮助，您可以给！

'isCollide'的代码在哪里？这不是你的代码中最相关的部分吗？ – smarx

回答这个问题所需的一切都在你没有提供的代码中 - 'isCollide' – Jamiec

另外，你打算执行每像素碰撞检测吗？或者只是矩形重叠检测？ – Arnauld

答

关于你的碰撞逻辑，我会采取相反的做法：

取4例定义一个没有冲突和否定他们。在上方，在下方，除了左/右。不是这四个中的任何一个都必然会造成碰撞。

正如我想这是原因。 “引擎”的其余部分看起来很合理，应该可以工作。

collide = 

!(a.x + a.width < b.x || 
    a.x > b.x + b.width || 

    a.y + a.height < b.y|| 
    a.y > b.y + b.height)

此外，您可以定义一个参与碰撞的实体的半径，并通过半径使用交点。当然，你需要这个实体的中心来工作。

编辑：有关JS中不同碰撞检测方法的更多详细信息和详细示例，请参阅 https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection。

我之前尝试过这种方法，但最终得到相同的结果。我觉得我的方法在实际定位“敌人”方面存在问题。如果这有助于诊断，则碰撞似乎在到达任何切片之前被检测到。 – aur8l

嗨，再次抱歉，但我真的迷失了，我完全不知道什么是错的。 – aur8l

你确定你尝试了上述“方法”吗？ – Lemonade

在javascript中碰撞检测

相关推荐