精灵碰撞检测难题完美解决指南：精确高效的碰撞检测

javascript

2024-03-17 08:16:33

完美解决精灵碰撞检测难题

引言

在使用精灵时，由于精灵图像的透明区域，碰撞检测可能会出现问题。本文将深入探讨解决此问题的方法，帮助你实现精准高效的精灵碰撞检测。

定义精灵边界

第一步是定义每个精灵的碰撞边界。这些边界应准确地表示精灵的实际碰撞区域，排除透明部分。

修改碰撞检测函数

下一步，修改碰撞检测函数以使用这些定义的边界，而不是精灵尺寸。更新后的函数如下：

function collision(first, second) {
  if (!(first.x > second.collisionX + second.collisionWidth ||
    first.x + first.collisionWidth < second.collisionX ||
    first.y > second.collisionY + second.collisionHeight ||
    first.y + first.collisionHeight < second.collisionY)) {
    return true;
  }
}

精灵边界示例

对于不同的精灵，其边界可能不同。这里有两个示例：

防御者：

collisionX: 10,
collisionY: 10,
collisionWidth: cellSize - cellGap * 4,
collisionHeight: cellSize - cellGap * 4,

攻击者：

collisionX: 10,
collisionY: 10,
collisionWidth: cellSize - cellGap * 4,
collisionHeight: cellSize - cellGap * 2,

更新精灵类

将这些边界添加到 Defender 和 Attacker 类中：

class Defender {
  constructor(x, y) {
    this.collisionX = 10;
    this.collisionY = 10;
    this.collisionWidth = cellSize - cellGap * 4;
    this.collisionHeight = cellSize - cellGap * 4;
  }
}

class Attacker {
  constructor(verticalPosition) {
    this.collisionX = 10;
    this.collisionY = 10;
    this.collisionWidth = cellSize - cellGap * 4;
    this.collisionHeight = cellSize - cellGap * 2;
  }
}

调整碰撞检测

有了这些边界，碰撞检测函数现在将准确地检查精灵之间的碰撞，而忽略透明区域。

示例输出

以下是使用调整边界后的碰撞检测示例：

const defender = new Defender(100, 100);
const attacker = new Attacker(100, 200);

if (collision(defender, attacker)) {
  // 碰撞检测到
} else {
  // 没有碰撞
}