javascript - 如何防止两个组件重叠

Question

如何防止 2 个组件重叠，请帮助我让它们跟随鼠标但不重叠。我不是编码专家，请用简单的语言解释。

function component(x,y,r) {
       var randomcolor = ["violet","indigo","blue","green","yellow","orange","red"];
    this.pos=createVector(x,y);
    this.r=r;
    this.color=randomcolor[Math.floor(Math.random()*randomcolor.length)];
    this.show=function() {
     fill(this.color);
      stroke(241,241,241);
     ellipse(this.pos.x,this.pos.y,this.r*2,this.r*2);
    }
    this.crash = function(other) {
      var d = p5.Vector.dist(this.pos,other.pos);
    if (d<this.r+other.r) {
      this.r+=other.r/20;
      return true;}

}
    
    this.move=function(){
      this.pos.x=lerp(this.pos.x,mouseX,0.1);
      this.pos.y=lerp(this.pos.y,mouseY,0.1);
this.pos.x = constrain(this.pos.x,this.r,width-this.r)
this.pos.y = constrain(this.pos.y,this.r,height-this.r)

}    
}

Answer 1

要使多个对象移动而不会相互碰撞，您需要

• 跟踪所有对象的当前位置
• 能够识别每个对象，以便碰撞方法不会检测到对象与自身的碰撞
• 在尝试移动物体之前检查以确保不会发生碰撞

对于您的示例代码，这是使多个组件向鼠标移动而不会相互碰撞的一种可能性。我重写了你的崩溃函数并添加了一些全局变量。这并不优雅，但我认为它以一种您可以理解如何解决此类问题的方式回答了您的问题。

var ids = 0;
var allComponents = [];
function setup(){
  createCanvas(600,600);
  new component(10,10,10);
  new component(590,10,10);
}

function draw(){
   background(255);
   for (let i = 0; i < allComponents.length; i++){
     allComponents[i].show();
     allComponents[i].move();
   }
}
function component(x,y,r) {
    var randomcolor = ["violet","indigo","blue","green","yellow","orange","red"];
    this.pos=createVector(x,y);
    this.r=r;
    this.id = ids++;
    allComponents[allComponents.length] = this;         
    this.color=randomcolor[Math.floor(Math.random()*randomcolor.length)];
    this.show=function() {
      fill(this.color);
      stroke(241,241,241);
      ellipse(this.pos.x,this.pos.y,this.r*2,this.r*2);
    }
    this.crash = function(other) {
      var d = p5.Vector.dist(this.pos,other.pos);
      if (d< this.r + other.r) {
        return true;
      }
      return false;
    }
    
    this.move=function(){
      let originalX = this.pos.x;
      let originalY = this.pos.y;
      this.pos.x=lerp(this.pos.x,mouseX,0.1);
      this.pos.y=lerp(this.pos.y,mouseY,0.1);
      this.pos.x = constrain(this.pos.x,this.r,width-this.r);
      this.pos.y = constrain(this.pos.y,this.r,height-this.r);
      for (let i = 0; i < allComponents.length; i++){
        let other = allComponents[i];
        if (this.id !== other.id && this.crash(other)){
          this.pos.x = originalX;
          this.pos.y = originalY;
          break;
        }
      }  
    }    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>