在javascript游戏中，使画布中的两个移动形状不重叠（碰撞）

所以我对javascript还不熟悉，我试着让它看起来像一个游戏。。。在这个游戏中，红球可以移动，蓝球应该跟随红球，就像蓝球应该朝向红球一样

现在他们正在跟踪，但蓝球相互重叠，最后只交了一个球

我不希望这个重叠。。。如何阻止这种情况

这是我的密码

const canvas = document.getElementById("game");
const context = canvas.getContext("2d");

canvas.width = window.innerWidth-20;
canvas.height = window.innerHeight-20;

let gameover = false;
let x = canvas.width / 2;
let y = canvas.height / 2;
let dx = 0;
let dy = 0;

x3=y3=0;
virx = new Array();
viry = new Array();

for (i=0; i<25; i++)
{
    virx.push(Math.floor((Math.random() * window.innerWidth-20) + 1));
    viry.push(Math.floor((Math.random() * window.innerHeight-20) + 1));
}

const state = {
  "ArrowRight": false,
  "ArrowLeft": false,
  "ArrowUp": false,
  "ArrowDown": false
}



function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(x, y, 10, 0, Math.PI * 2, false);
  context.fillStyle = "red";
  context.fill();
  context.closePath();

  for (i=0; i<25; i++)
  {
    newpoint();
    context.beginPath();
    context.arc(virx[i], viry[i], 10, 0, Math.PI * 2, false);
    context.fillStyle = "blue";
    context.fill();
    context.closePath();
  }
}

function logic() {

  const direction = determineDirection();

  if (direction.dx) {
    dx = dx + direction.dx;
  }

  if (direction.dy) {
    dy = dy + direction.dy;
  }

  x = x + dx;
  y = y + dy;

  if (dx > 0) {
    dx -= 0.02;
  }
  if (dx < 0) {
    dx += 0.02;
  }
  if (dy > 0) {
    dy -= 0.02;
  }
  if (dy < 0) {
    dy += 0.02;
  }

}

function play() {
  draw();
  logic();
}









document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function newpoint()
{
    flag=0;
    vx= x - virx[i];
    vy= y - viry[i];
    vsize = Math.sqrt((vx*vx) + (vy*vy));
    vn_x = vx / vsize;
    vn_y = vy / vsize;

    newx = virx[i] + 0.5 * vn_x;
    newy = viry[i] + 0.5 * vn_y;
    // virx[i] = newx;
    // viry[i] = newy;

    // for (j=0; j<25; j++)
    // {
        // c = Math.sqrt(Math.pow((virx[j]-newx), 2)+Math.pow((viry[j]-newy), 2));

        // if (c<20)
        // {
            // flag=1;
        // }
    // }

    if (flag==0)
    {
        virx[i] = newx;
        viry[i] = newy;
    }
}

function determineDirection() {
  const {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  } = state
  if (ArrowRight && ArrowUp) {
    return {
      dx: .040,
      dy: -.040
    };
  }
  if (ArrowRight && ArrowDown) {
    return {
      dx: .040,
      dy: .040
    };
  }
  if (ArrowLeft && ArrowUp) {
    return {
      dx: -.040,
      dy: -.040
    };
  }
  if (ArrowLeft && ArrowDown) {
    return {
      dx: -.040,
      dy: .040
    };
  }
  if (ArrowLeft) {
    return {
      dx: -.040,
      dy: 0
    }
  }
  if (ArrowRight) {
    return {
      dx: .040,
      dy: 0
    }
  }
  if (ArrowUp) {
    return {
      dx: 0,
      dy: -.040
    }
  }
  if (ArrowDown) {
    return {
      dx: 0,
      dy: .040
    }
  }
  return {
    dx: 0,
    dy: 0
  }
}

function keyDownHandler({
  key
}) {
  state[key] = true;
}

function keyUpHandler({
  key
}) {
  state[key] = false;
}
setInterval(play, 10);

const canvas=document.getElementById（“游戏”）；
const context=canvas.getContext（“2d”）；
canvas.width=window.innerWidth-20；
canvas.height=window.innerHeight-20；
让gameover=false；
设x=canvas.width/2；
设y=canvas.height/2；
设dx=0；
设dy=0；
x3=y3=0；
virx=新数组（）；
viry=新数组（）；
对于（i=0；i=0）{
dy-=0.02；
}
if（dy<0）{
dy+=0.02；
}
}
函数播放（）{
draw（）；
逻辑（）；
}
文档。addEventListener（“keydown”，keyDownHandler，false）；
文件。addEventListener（“keyup”，keyUpHandler，false）；
函数newpoint（）
{
flag=0；
vx=x-virx[i]；
vy=y-viry[i]；
vsize=Math.sqrt（（vx*vx）+（vy*vy））；
vn_x=vx/vsize；
vn_y=vy/vsize；
newx=virx[i]+0.5*vn_x；
newy=viry[i]+0.5*vn_y；
//virx[i]=newx；
//viry[i]=newy；
//对于（j=0；j