p5.js游戏dist函数计算异常，收藏品无法按条件消失求助

核心问题分析 #

• 收藏品状态被反复重置：这段代码大概率在draw()循环中，每次循环都会重新创建collectable对象，导致isFound永远被设为false，之前的检测结果直接失效。
• 坐标逻辑完全混乱：
  1. 先定义了初始位置为(100,310)的收藏品，接着调用translate把坐标系移到该位置。
  2. 立刻重新定义收藏品为(0,0)，直接覆盖了原本的位置数据。
  3. 计算距离时用的是重置后的(0,0)，但角色的gameChar_x/gameChar_y是世界坐标系下的位置，两者不在同一维度，距离计算必然错误。
• 绘制与检测的坐标不匹配：绘制的收藏品实际位置是(100, 310+100)，但检测用的是(0,0)，完全不是同一个点。

修复后的代码 #

// 把收藏品对象放在draw()外面，只初始化一次，保留状态
let collectable = {
  x_pos: 100,
  y_pos: 310,
  size: 40,
  isFound: false,
};

function draw() {
  // 其他游戏逻辑（比如角色绘制、场景渲染）...

  // 绘制收藏品（仅当未被收集时）
  if (!collectable.isFound) {
    push();
    // 移到收藏品的基准位置
    translate(collectable.x_pos, collectable.y_pos);
    fill(255, 215, 0);
    ellipse(0, 100, collectable.size);
    fill(218, 165, 32);
    ellipse(0, 100, collectable.size - 10);
    fill(255, 215, 0);
    textSize(collectable.size - 20);
    text("£", -5, 107);
    pop();
  }

  // 计算收藏品在世界坐标系的真实位置（基准位置+绘制偏移）
  let collectableRealX = collectable.x_pos;
  let collectableRealY = collectable.y_pos + 100;
  // 计算角色与收藏品的真实距离
  let distance = dist(collectableRealX, collectableRealY, gameChar_x, gameChar_y);
  
  // 距离小于50时标记为已收集
  if (distance < 50) {
    collectable.isFound = true;
  }

  // 其他游戏逻辑...
}

关键修复点说明 #

1. 将collectable对象移到draw()函数外，确保状态不会在每次循环时被重置。
2. 计算距离时使用收藏品的世界坐标系真实位置，和角色坐标保持统一维度，距离计算才会准确。
3. 调整textSize的位置，避免影响其他绘制元素的字号设置。

内容的提问来源于stack exchange，提问作者Oluwaseun