Question

我正在实现HTML / 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 = false）：

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

问题在于它会使影响点左侧的所有内容处于非活动状态。我理解很难描述我的问题，因此很难澄清。

绘制函数过滤以仅绘制数组的活动元素：

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

感谢您提供任何帮助！

Answer 1

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

取4个定义不碰撞的情况并否定它们。在上面，在下面，在左边/右边。不是这4个中的任何一个使它必然是一个碰撞。

正如我猜这是原因。其余的＆＃34;引擎＆＃34;看起来很合理，应该有效。

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

javascript中的碰撞检测

1 个答案: