根据用户输入引用类中的不同对象答案

【问题标题】：Referencing different objects in a class depending on user input根据用户输入引用类中的不同对象
【发布时间】：2021-01-01 08:16:16
【问题描述】：

我正在尝试在 p5.js 中创建一个非常基本的物理模拟，并且我正在使用一个类来创建形状的多个实例（目前都是圆形），我有一个函数来检查用户是否在里面点击一个圆圈的区域，如果是这样，他们可以拖动它，但我遇到了一个问题。我需要让程序计算出它悬停的对象，但我不确定我会如何做，下面我的函数仅适用于第一个对象（obj1）。我可以改用 {classname}.posX 之类的吗？

function whilePressed()
    {
      if (Math.pow(mouseX-obj1.posX,2)+(Math.pow(mouseY-obj1.posY,2))<=(Math.pow(obj1.size/2,2)) | grabbed == true)
        {
          grabbed = true;
          if (firstGrab == true)
          {
            difX = (obj1.posX-mouseX);
            difY = (obj1.posY-mouseY);
            firstGrab = false;
          }
          obj1.posX = mouseX+difX;
          obj1.posY = mouseY+difY;
        }
    }

下面是类（draw 函数中有一个 switch 语句，因为我以前也有一个正方形，但决定在实现正方形之前先让一个圆工作）

class primitive
{
  constructor()
  {
    this.size = 50;
    this.posX = canvasSize/2;
    this.posY = canvasSize/2;
    this.velX = 0;
    this.velY = 0;
    this.terminalVel = 15;
  }
  
  pos(x,y)
  {
    this.posX = x;
    this.posY = y;
  }
  
  draw(shape = 'circle')
  {
    stroke(168,198,159);
    fill(204,226,163);
    switch (shape)
    {
      case 'circle':
        circle(this.posX,this.posY,this.size);
      break;
    }
  }
  
  gravity()
  {
    if (this.velY < this.terminalVel)
    {
      this.velY = (this.velY+1);  
    }
    else
    {
      this.velY = 20;
    }
    this.posY = this.posY+this.velY;
    
    if (this.posY > groundLevel-(this.size/2))
    {
      this.posY = groundLevel-(this.size/2);
      this.velY = 0;
    }
  }
}

【问题讨论】：

对于任何回答的人，我只是注意到 X 和 Y 坐标可以更改，这意味着您不会存储正确的 X 和 Y 坐标。我会更新我的答案。

标签： javascript class processing p5.js

【解决方案1】：

您可以像这样在原始类上创建静态方法：首先，创建一个数组，其中包含该类的所有实例。这是代码：
记住：我在构造函数中添加了参数name。这意味着在创建实例时这样做：

var foo = new primitive("foo");

var PRIMITIVES = [];
// ...
constructor(name)
  {
    this.name = name;
    this.size = 50;
    this.posX = canvasSize/2;
    this.posY = canvasSize/2;
    this.velX = 0;
    this.velY = 0;
    this.terminalVel = 15;
    PRIMITIVES.push(name);
  }

现在，使用相同的鼠标查找原理，您可以创建一个静态方法来查找并返回正确的实例。

static findInstance(mouseX, mouseY) {
  for (var i = 0; i < PRIMITIVES.length; i++) 
    {
      obj = window[PRIMITIVES[i]];
      if (Math.pow(mouseX-obj.posX,2)+(Math.pow(mouseY-obj.posY,2))<=(Math.pow(obj.size/2,2)))
        {
          return obj;
        }
    }
  
}

然后，您可以调用primitive.findInstance(mouseX, mouseY)，它会返回正确的实例。如果这不起作用，请发表评论。我希望这对你有所帮助。

【讨论】：

【解决方案2】：

创建一个对象数组：

let objects = []

objects.push(obj1);
objects.push(obj2);

在mousePressed()回调中实现一个算法来检测被点击的对象：

let draggedObject;
let dragOffsetX;
let dragOffsetY;

function mousePressed() {
 
    draggedObject = null;

    for (let i=0; i < objects.lenght; i++) {

        obj = objects[i];
        if (Math.pow(mouseX-obj.posX,2) + Math.pow(mouseY-obj.posY,2) <= Math.pow(obj.size/2,2)) {
            
            draggedObject = obj;
            dragOffsetX = draggedObject.posX - mouseX;
            dragOffsetY = draggedObject.posY - mouseY;
            break;
        }
    }
}

在mouseDragged()回调中改变对象的位置：

function mouseDragged() {

    if (dragged_object) {
        draggedObject.posX = mouseX + dragOffsetX;
        draggedObject.posY = mouseY + dragOffsetY;
    }
}

【讨论】：