Why do my particles never go back to the middle in JavaScript – Artificial Intelligence

I am building a learning AI (Artificial Intelligence) in Vanilla JavaScript but my particles are never going back to the centre of my canvas even though it says to in the code, I have been trying forever it seems like now.
This is my current code:

class Particle {
  constructor(x, y, score) {
    this.x = x;
    this.y = y;
    this.ix = x;
    this.iy = y;
    this.score = score || 0;
    this.badPos = [];
    this.there = false;
  }
  cross(p) {
    return new Particle(this.x, this.y, this.score + (p.score - this.score) * 0.5);
  }
  show(context) {
    context.fillStyle = "000000";
    context.beginPath();
    context.ellipse(this.x, this.y, 10, 10, 0, 0, Math.PI * 2);
    context.fill();
  }
  update() {
    let max = 1;
    let min = -1;
    if (this.there === false) {
      if (Math.random() < 0.5) {
        if (Math.random() < 0.5) {
          this.x += max;
        } else {
          this.x += min;
        }
      } else {
        if (Math.random() < 0.5) {
          this.y += max;
        } else {
          this.y += min;
        }
      }
    }
    if (this.x === width / 4) {
      this.score++;
      this.there = true;
    }
    this.x = constrain(this.x, 10, width);
    this.y = constrain(this.y, 10, height);
    for (let bad of this.badPos) {
      this.x = constrain(this.x, 10, bad.x);
      this.y = constrain(this.y, 10, bad.y);
    }
  }
  reset() {
    if (this.x !== width / 4) {
      this.badPos.push(new Vector(this.x, this.y));
      console.log("WRONG!");
    }
    this.x = width / 2;
    this.y = height / 2;
    this.there = false;
  }
}

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let ps = [];
let fs = 0;
canvas.width = 400;
canvas.height = 400;
let width = canvas.width;
let height = canvas.height;

document.body.appendChild(canvas);

ps.push(new Particle(width / 2, height / 2));
ps.push(new Particle(width / 2, height / 2));

function animate() {
  ctx.clearRect(0, 0, width, height);
  ctx.fillRect(width / 4, height / 2, 20, 20);
  for (let p of ps) {
    p.update();
    p.show(ctx);
  }
  if (fs % (60 * 10) === 0 && fs !== 0) {
    let baby = ps[0].cross(ps[ps.length - 1]);
    ps.push(baby);
    for (let p of ps) {
      p.reset();
      console.log(p);
    }
  }
  fs += 1;
  requestAnimationFrame(animate);
}

function constrain(num, min, max){
  const MIN = min || 1;
  const MAX = max || 20;
  const parsed = parseInt(num)
  return Math.min(Math.max(parsed, MIN), MAX)
}

animate();

I have been trying for a long time.
Any tips on how to make it work?
I would really appreciate help!

Thanks!