如何阻止 collide2D 检测 p5.js

Question

我正在使用 p5.js 中的 collide2D 库来检测我的播放器是否撞到障碍物。如果是这样，我希望玩家少 1 条生命。我遇到的问题运行是，当我遇到障碍物时，它一直在消除生命，我将鼠标悬停在它上面，所以当我悬停在整个障碍物上时，我最终得到 -100 条生命。

Code in class Rock(my obstacle):

    isColliding(obj) {
      let hit = collideRectCircle(obj.x - 55, obj.y - 60, 105, 109, this.x, this.y, 130);
      return hit;
    }

code in draw:

  for (let i = 0; i < rocks.length; i++) {
    if (rocks[i].isColliding(unicorn)) {
      lives -= 1
      // if (lives <= 0) {
      //   gameOver();
      // }
    }

Answer 1

这听起来像是您想要检测条件何时从假变为真，而不是检测条件是否为真。诀窍是您需要跟踪每个障碍物的状态（假设同时与独角兽碰撞的两块岩石应该减少 2 条生命）。有几种方法可以做到这一点：

// Option 1. Store the rock-unicorn collision state on each rock
function draw() {
  // ...

  for (let i = 0; i < rocks.length; i++) {
    if (rocks[i].isColliding(unicorn)) {
      if (!rocks[i].wasColliding) {
        lives -= 1;
      }
      // Additional collisions with this rock will not decrement another life
      rocks[i].wasColliding = true;
    } else {
      // Once the collision ends, the rock becomes dangerous again
      rocks[i].wasColliding = false;
    }
  }
}

或

// Option 2. keep track of the collision states in a Set on unicorn
// This assumes that unicorn.collidingRocks = new Set() has been run when unicorn is created
// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
function draw() {
  // ...

  for (let i = 0; i < rocks.length; i++) {
    if (rocks[i].isColliding(unicorn)) {
      if (unicorn.collidingRocks.has(rocks[i])) {
        lives -= 1;
      }
      // Additional collisions with this rock will not decrement another life
      unicorn.collidingRocks.add(rocks[i]);
    } else {
      // Once the collision ends, the rock becomes dangerous again
      unicorn.collidingRocks.delete(rocks[i]);
    }
  }
}

选项二的效率会低一些，因为在检查或更改碰撞状态时，它必须执行 set lookups/adds/deletes 而不是仅 (1) 数组索引查找。然而，它会是更好的 OOP 设计，因为它实际上是 unicorn 关心它是否已经与岩石碰撞，而不是岩石关心。例如，在不止一只独角兽的情况下，这也会产生实际影响。

如何阻止 collide2D 检测 p5.js

How to stop collide2D from detecting p5.js

javascript

collision-detection

p5.js