2

My dist() function in my game project is not working for less than 130 or above and the distance between the character and the collectible didn't go less than 130 even when it,s on top. for example in my game project.

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

if I set the statement to if (distance < 140) or if (distance < 120) collectible will remain false.

I've tried changing gameChart_x and gameChart_y to mouseX and mouseY, distance didn't go below 90 I've also tried to new collectible still the same result.

I want the dist() between the collectible and character(mouseX, mouseY) should get to zero as the character gets closer.

The statement won't still work if a place my mouseX and mouseY on the collectibles.

Here is the code but with the character replaced with mouseX and 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);
 

  
  }
Prajwal Kulkarni
  • 1,480
  • 13
  • 22
Oluwaseun
  • 43
  • 6

1 Answers1

2

Your distance logic seems OK, but you're drawing your collectable with a y-offset, presumably in an attempt to position it flush to the ground:

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

On the other hand, the dist call measures based on collectable.y_pos. That's 100 pixels off from the image on screen, creating the illusion that the collectable is somewhere it isn't in terms of the rest of the game logic. You can pick up the collectable if you move your mouse in the air above it by 100 pixels.

Never* draw anything with an offset. If you need to change an entity's position, change it at the source:

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

And draw with no offset:

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

*: If things are still off by a little, you may be treating x/y positions as corners rather than centers, which you'll want to be consistent about both logically and when rendering. This may involve small offset tweaks.

ggorlen
  • 44,755
  • 7
  • 76
  • 106