javascript - 如何在 p5.js 中正确地将对象添加到数组？

Question

好的，在阅读代码之前，首先要知道这是一个名为 P5.js 的 javascript 库 https://p5js.org

我注意到我的 addMCS 函数没有将对象添加到数组，而是屏幕变成空白并且我没有从控制台收到任何响应。

var mcs = [];

function mouseCircle(x,y,s,color){
//constructor: mouseCircle(x,y,s,color)
    this.x=x;
    this.y=y;
    this.s=s;
    this.color = color;
    this.mouseOver = false;
}

mouseCircle.prototype.mouseCollision = function(){
  if(dist(this.x,this.y,mouseX,mouseY)<=this.s/2){

    this.mouseOver=true;
  }else{
    this.mouseOver = false;
  }
};


mouseCircle.prototype.addMCS = function(){

    //THIS HERE IS THE ISSUE!!
    mcs.push({this.x,this.y,this.s,this.color,this.mouseOver});
};

mouseCircle.prototype.Display = function(){
    if(this.mouseOver) {
        fill(this.color);
    } else {
        fill(255,255,255);
    }

    ellipse(this.x,this.y,this.s,this.s);
};

function setup() {
    createCanvas(1000,650);
}

var mc1;
var mc2;
var mc3;

var mc2Color;

function draw() {

    background(200,200,200);

    mc1 = new mouseCircle(275,450,50,'green');//constructs 1st circle
    mc1.mouseCollision();
    mc1.Display();
    mc1.addMCS();
    console.log(mcs[0]);

    /*
    mc2Color = color(0,0,255);
    mc2 = new mouseCircle(375,450,50,mc2Color);//constructs 2nd circle
    mc2.mouseCollision();
    mc2.Display();

    mc3 = new mouseCircle(275,350,50,color(255,0,0));//constructs 3rd circle
    mc3.mouseCollision();
    mc3.Display();

    mc4 = new mouseCircle(375,350,50,'yellow');//constructs 3rd circle
    mc4.mouseCollision();
    mc4.Display();

    */

    //mouseCircle(575,150,50);
    //mouseCircle(475,520,50);
    //mouseCircle(375,150,50);
}

我看不到任何类型的逻辑或语法错误，我相信我记得以前使用过这种方法(制作按钮)。

Answer 1

为什么不直接使用 mcs.push(this); 呢？

工作示例:

var mcs = [];

function mouseCircle(x, y, s, color) {
  //constructor: mouseCircle(x,y,s,color)
  this.x = x;
  this.y = y;
  this.s = s;
  this.color = color;
  this.mouseOver = false;
}

mouseCircle.prototype.mouseCollision = function() {
  if (dist(this.x, this.y, mouseX, mouseY) <= this.s / 2) {

    this.mouseOver = true;
  } else {
    this.mouseOver = false;
  }
};


mouseCircle.prototype.addMCS = function() {


  mcs.push(this);
};

mouseCircle.prototype.Display = function() {
  if (this.mouseOver) {
    fill(this.color);
  } else {
    fill(255, 255, 255);
  }

  ellipse(this.x, this.y, this.s, this.s);
};

function setup() {
  createCanvas(1000, 650);
}

var mc1;
var mc2;
var mc3;

var mc2Color;

function draw() {

  background(200, 200, 200);

  mc1 = new mouseCircle(275, 450, 50, 'green'); //constructs 1st circle
  mc1.mouseCollision();
  mc1.Display();
  mc1.addMCS();
  //console.log(mcs[0]);

  /*
        mc2Color = color(0,0,255);
        mc2 = new mouseCircle(375,450,50,mc2Color);//constructs 2nd circle
        mc2.mouseCollision();
        mc2.Display();
    
        mc3 = new mouseCircle(275,350,50,color(255,0,0));//constructs 3rd circle
        mc3.mouseCollision();
        mc3.Display();
    
        mc4 = new mouseCircle(375,350,50,'yellow');//constructs 3rd circle
        mc4.mouseCollision();
        mc4.Display();
    
        */

  //mouseCircle(575,150,50);
  //mouseCircle(475,520,50);
  //mouseCircle(375,150,50);
}

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