P5.JS .show() 不是函数，为什么？

Question

不确定我的范围是否错误，但我尝试稍微移动该函数，但它只是告诉我这不是函数错误。

 let bubbles = []; function setup() { createCanvas(400, 400); for (let i = 0; i < 10; i++){ bubbles[i] = new Bubble(200, 200, 40) } } function draw() { background(0); for (i = 0; i < bubbles.length; i++){ bubbles[i].show(); }} function show() { stroke(20); strokeWeight(2); fill(random(255), 0, random(255)) ellipse(this.x, this.y, this.r * 2) } class Bubble { constuctor(x, y, r){ this.x = x; this.y = y; this.r = r; }}

Answer 1

正如 Rabbid76 的评论中所说，您的主要问题是您正在调用不存在的Bubble对象中的函数。 所以你应该把它放到Bubble类中：

class Bubble {
    constructor(x, y, r){
    this.x = x;
    this.y = y;
    this.r = r;
  }
    
  show() {
    stroke(20);
    strokeWeight(2);
    fill(random(255), 0, random(255))
    ellipse(this.x, this.y, this.r * 2)
  }
}

此外，只是为了让您知道您拼错了constructor并且如果您使用的是 p5 在线编辑器，它不会将其标记为错误，它认为您已经定义了一个名为constuctor的新函数，它是完全有效的语法。

还有一件事，您将每个气泡的x和y位置传递为200, 200 ，这基本上意味着每个气泡都将在彼此之上，我假设您希望它们散布在周围屏幕：

bubbles[i] = new Bubble(random(width), random(height), 20);

哦，还有，您可能希望将 r,g,b 颜色存储在Bubble对象中，这样它就不会每帧选择一种新颜色！