Блог

Если я нажимаю на первый шар, второй отображается как выбранный. если я нажимаю на второй, третий отображается как выбранный и так далее.

Но логическое значение задано правильно.

Я не могу найти проблему в коде, это должна быть какая-то логическая ошибка.

Я ценю любую помощь, спасибо.

получайте удовольствие от этого парадокса 😉

мой sketch.js

 let balls = [];
let ballAmount = 3;


function setup() {
  
  let red = color(255, 0, 0);
  let green = color(0,255,0);
  let blue = color(0,0,255);

  let colors = [red, green, blue];
  
  
  createCanvas(innerWidth, innerHeight);
  noStroke();
  

  for (let i = 0; i < ballAmount; i  ) {
    let tempX = 200   (100 * i);
    balls.push(new Ball(tempX, 200, 20, colors[i])); 
  }
}

function draw() {
  background(0);
  
  balls.forEach((ball) => {
    ball.show();
  });
}

function mousePressed() {
  
  print(balls);
  balls.forEach((ball) => {
    ball.clicked();
  });
}
 

мой ball.js (класс)

 class Ball {
  constructor(x, y, r, color){
    this.pos = new p5.Vector();
    this.pos.x = x;
    this.pos.y = y;
    this.r = r;
    this.isSelected = false; 
    this.ballFill = color;
  }
  
  show() {
    fill(this.ballFill);
    ellipse(this.pos.x, this.pos.y, this.r * 2);
    
    if (this.isSelected){
      stroke(255, 255, 0);
      strokeWeight(4);
    } else {
      noStroke();
    }
  }
  
  clicked() {  
    let d = dist(mouseX, mouseY, this.pos.x, this.pos.y);
    if (d <= this.r) {
      this.isSelected = true;
    } else {
      this.isSelected = false;
    }
  }
}
 

Три примечания…

1. Пожалуйста, будьте более подробны в своем вопросе. К счастью, ваш код говорит сам за себя, но в противном случае я бы понятия не имел, о чем вы на самом деле спрашиваете. Описание вашего сообщения было «разумным», но заголовок отвратительный.
2. Кажется, вы рисуете свои эллипсы с идеей, что r составляет половину радиуса, поэтому вы умножаете r на 2. Вы должны использовать ellipseMode(RADIUS) вместо этого, чтобы было более ясно, что это то поведение, которое вы хотите. Это позволяет вам вводить радиус как половину ширины окружности, как вы используете свой r . Смотрите эту страницу для получения дополнительной информации.
3. Причина, по которой вы всегда выделяете «следующий» шар вместо того, который вы нажали, заключается в том, что вы рисуете шар ПЕРЕД изменением значений обводки:

это

 show() {
  fill(this.ballFill);
  ellipse(this.pos.x, this.pos.y, this.r);

  if (this.isSelected){
    stroke(255, 255, 0);
    strokeWeight(4);
  } else {
    noStroke();
  }
}
 

должно быть

 show() {
  fill(this.ballFill);
  if (this.isSelected){
    stroke(255, 255, 0);
    strokeWeight(4);
  } else {
    noStroke();
  }
  ellipse(this.pos.x, this.pos.y, this.r);
}
 

Вы рисовали выбранный шар с отключенным обводкой, затем вы включили обводку, затем вы нарисовали следующий, невыбранный шар С только что включенным обводкой, после чего вы снова отключили обводку.