为什么我的粒子在JavaScript中永远不会回到中间

我正在用香草JavaScript构建一个学习AI（人工智能），但我的粒子永远不会回到画布的中心，即使代码中说，我一直在尝试，现在看起来是这样。 这是我当前的代码：

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();

类粒子{
构造函数（x、y、分数）{
这个.x=x；
这个。y=y；
这1.ix=x；
this.iy=y；
this.score=得分| | 0；
this.badPos=[]；
this.there=false；
}
交叉（p）{
返回新粒子（this.x，this.y，this.score+（p.score-this.score）*0.5）；
}
显示（上下文）{
context.fillStyle=“000000”；
context.beginPath（）；
椭圆（this.x，this.y，10，10，0，0，Math.PI*2）；
context.fill（）；
}
更新（）{
设max=1；
设min=-1；
if（this.there==false）{
if（Math.random（）<0.5）{
if（Math.random（）<0.5）{
这个.x+=max；
}否则{
这个.x+=min；
}
}否则{
if（Math.random（）<0.5）{
这个.y+=max；
}否则{
这个.y+=min；
}
}
}
if（this.x==宽度/4）{
这个是.score++；
这是真的；
}
此.x=约束（此.x，10，宽度）；
this.y=约束（this.y，10，高度）；
为了（让这个坏掉吧，badPos）{
this.x=约束（this.x，10，bad.x）；
this.y=约束（this.y，10，bad.y）；
}
}
重置（）{
如果（此.x！==宽度/4）{
this.badPos.push（新向量（this.x，this.y））；
console.log（“错误！”）；
}
这.x=宽度/2；
这.y=高度/2；
this.there=false；
}
}
让canvas=document.createElement（“canvas”）；
设ctx=canvas.getContext（“2d”）；
设ps=[]；
设fs=0；
画布宽度=400；
画布高度=400；
让宽度=canvas.width；
let height=canvas.height；
document.body.appendChild（画布）；
ps.push（新粒子（宽度/2，高度/2））；
ps.push（新粒子（宽度/2，高度/2））；
函数animate（）{
ctx.clearRect（0，0，宽度，高度）；
ctx.fillRect（宽/4，高/2,20,20）；
for（设p/ps）{
p、 更新（）；
p、 显示（ctx）；
}
如果（fs%（60*10）==0&&fs！==0）{
让baby=ps[0]。交叉（ps[ps.length-1]）；
ps.push（婴儿）；
for（设p/ps）{
p、 重置（）；
控制台日志（p）；
}
}
fs+=1；
请求动画帧（动画）；
}
函数约束（num、min、max）{
常数MIN=MIN | 1；
常数MAX=MAX | 20；
const parsed=parseInt（num）
返回Math.min（Math.max（已解析，最小值），max）
}
制作动画（）；

我已经试了很久了。 关于如何让它工作，有什么建议吗？ 我真的很感激你的帮助

---

谢谢

这都是因为所有的婴儿都继承了badPos 如果你对这段代码进行注释或者对坏pos进行清理，一切都会按照你的意愿进行

// for (let bad of this.badPos) {
//  this.x = constrain(this.x, 10, bad.x);
//  this.y = constrain(this.y, 10, bad.y);
//}

我制作类向量是因为你们并没有在你们的问题中发布它

class Vector {
 constructor(x, y){
    this.x = x;
 this.y = y; 
}
}  

---

我将badPos的循环更改为：

for (let bad of this.badPos) {
      if (this.x === bad.x && this.y === bad.y) {
        this.x = constrain(this.x, 10, bad.x);
        this.y = constrain(this.y, 10, bad.y);
      }
    }

---

如果x位置小于原点，我也阻止它添加badPos。

你是说

reset（）

方法？在那里我得到了

“未捕获引用错误：未定义向量”

如果忘记发布向量类，我将感到抱歉！在这个问题上没有人工智能。这只是简单的数学。。。但是我试图阻止粒子到达不接近目标的点，并且已经到达了。但如果我不限制它，它确实可以工作。在控制台输出中，坏点的最大值变得越来越高，后来这个值被用作边界。因此，从一个点到另一个点（宽度/4），您不允许转到外部的点，您允许此操作。如果删除此代码不适合您，可能您会考虑使用badPoints=[]初始化方法；