p5.js 中的 dist() 函数不能小于某个数字

Question

我的游戏项目中的

dist()

功能在低于 130 或以上时不起作用，并且角色和收藏品之间的距离即使在顶部也不会低于 130。例如在我的游戏项目中。

distance = dist(
    collectable.x_pos,
    collectable.y_pos,
    gameChar_x,
    gameChar_y
  );
  
  if (distance < 130) {
    collectable.isFound = true;
  }

如果我将语句设置为

if (distance < 140)

或

if (distance < 120)

收藏品将保持错误状态。

我尝试将

gameChart_x

和

gameChart_y

更改为

mouseX

和

mouseY

，距离没有低于 90 我也尝试了新的收藏品仍然是相同的结果。

我希望收藏品之间的

dist()

和

character(mouseX, mouseY)

之间的值应该随着角色的接近而变为零。

如果将我的 mouseX 和 mouseY 放在收藏品上，该语句仍然不起作用。

这是代码，但字符替换为 mouseX 和 MouseY

var gameChar_x;
var gameChar_y;
var floorPos_y;
var isLeft;
var isRight;
var isFalling;
var isPlummeting;
var distance;
var collectable;

function setup() {
  createCanvas(1024, 576);
  floorPos_y = (height * 3) / 4;
  gameChar_x = width / 2;
  gameChar_y = floorPos_y;

  isLeft = false;
  isRight = false;
  isFalling = false;
  isPlummeting = false;

  collectable = {
    x_pos: 400,
    y_pos: 310,
    size: 40,
    isFound: false,
  };

  canyon = {
    x_pos: 200,
    width: 100,
  };
}

function draw() {


  background(100, 155, 255); //fill the sky blue

  noStroke();
  fill(0, 155, 0);
  rect(0, floorPos_y, width, height - floorPos_y); //draw some green ground

  //draw the canyon

  fill(175, 238, 238);
  rect(canyon.x_pos + 20, 432, canyon.width, 300);
  fill(100, 155, 255);
  rect(canyon.x_pos + 20, 432, canyon.width, 100);
  fill(210, 105, 30);
  rect(canyon.x_pos + 20, 432, canyon.width - 90, 300);
  fill(240, 128, 128);
  rect(canyon.x_pos + 110, 432, canyon.width - 90, 300);

  if (gameChar_x > canyon.x_pos + 20 && gameChar_x < canyon.x_pos + 100) {
    isPlummeting = true;
  } else {
    isPlummeting = false;
  }

  if (
    (isPlummeting == true && gameChar_y >= floorPos_y) ||
    gameChar_y > floorPos_y
  ) {
    gameChar_y += 5;
  }

  //COLLECTIBLE

  if (collectable.isFound == false) {
    fill(255, 215, 0);
    ellipse(collectable.x_pos, collectable.y_pos + 100, collectable.size);
    fill(218, 165, 32);
    ellipse(collectable.x_pos, collectable.y_pos + 100, collectable.size - 10);
    fill(255, 215, 0);
    text("£", collectable.x_pos - 5, collectable.y_pos + 107);
    textSize(collectable.size - 20);
  }

////////////////////////The BUG///////////////////////////////////////////
ellipse(mouseX, mouseY, 20, 20);
  distance = dist(collectable.x_pos, collectable.y_pos, mouseX, mouseY);
  if (distance < collectable.size) {
    collectable.isFound = true;
  }

  
  console.log(distance);
 

  
  }

Answer 1

你的距离逻辑似乎没问题，但你正在用 y 偏移绘制你的收藏品，大概是试图将其与地面齐平：

ellipse(collectable.x_pos, collectable.y_pos + 100, collectable.size);

另一方面，

dist

呼叫措施基于

collectable.y_pos

。这与屏幕上的图像相差 100 像素，造成了一种错觉，即收藏品不在游戏逻辑的其余部分的某个地方。将鼠标在空中移动 100 像素即可拾取该收藏品。

永远不要*绘制任何有偏移的东西。如果需要更改实体的位置，请在源处更改：

collectable = {
  x_pos: 400,
  y_pos: 410, // used to be 310
  size: 40,
  isFound: false,
};

并且没有偏移地绘制：

ellipse(collectable.x_pos, collectable.y_pos, collectable.size);

*：如果事情仍然有一点偏差，您可能会将 x/y 位置视为角点而不是中心，您需要在逻辑上和渲染时保持一致。