我的javascript+；p5.js代码无法正常工作，原因不明_Javascript_Rendering_P5.js

我的javascript+；p5.js代码无法正常工作，原因不明

javascript

我的javascript+；p5.js代码无法正常工作，原因不明,javascript,rendering,p5.js,Javascript,Rendering,P5.js,毫无理由，我的p5.js代码不起作用。这似乎都是正确的，我在控制台没有错误。我在p5jsweb编辑器（）中运行它，我有四个文件 index.html： <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script&g

毫无理由，我的p5.js代码不起作用。这似乎都是正确的，我在控制台没有错误。我在p5jsweb编辑器（）中运行它，我有四个文件

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="animal.js"></script>
  </body>
</html>

而style.css只有一些基本的代码，它们什么都不做

到目前为止所发生的一切是它创建了400400画布并渲染了背景，但没有一个“动物”正在渲染。我希望它在屏幕上呈现6个圆圈，随机、静态、点，随机颜色不变

我不知道发生了什么事，如果有人能帮忙就好了。在使用p5.js库时请记住

谢谢

有几个问题：

当您应该使用

for（…of…）

循环时，您正在使用

for（…in…）

循环

此.size

在您的动物类中从未定义过

for循环的另一个问题，您将在下面看到

另外，p5.js不喜欢在堆栈溢出中运行，所以不要单击“RunSnippet”，它不会做任何事情

//animal.js
类动物{
构造函数（xTemp、yTemp、sizeTemp、speedTemp、reproTemp、hungrattemp）{//添加sizeTemp参数
这个.x=xTemp；
y=yTemp；
this.size=sizeTemp；//添加大小
此参数。速度=速度温度；
this.reprodcution=reproTemp；
this.hungRate=hungrattemp；
这就是饥饿=8；
这个年龄=0；
this.clr=颜色（随机（150255）、随机（150255）、随机（150255）；
}
显示（）{
填充（this.clr）；
椭圆（this.x，this.y，（this.size+1）*20，（this.size+1）*20）；
}
}
//sketch.js
让动物=[]；
函数设置（）{
createCanvas（400400）；
for（设i=0；i<6；i++）{
推（新动物（圆形（随机（10，宽度-10）），圆形（随机（10，高度-10）），圆形（随机（10，宽度/90）），圆形（随机（3，4）），圆形（随机（6，9）），圆形（随机（40100））；//在第三位添加一个参数
}
}
函数绘图（）{
背景（220）；
为了（让动物中的动物）{//
animal.display（）；//此处
}
}

好的，非常感谢！我还想知道这个年龄的尺码，但我忘了，哈哈，谢谢！是的，我只是想让尺寸成为一个论据，但这也行。

let animals = [];

function setup() {
  createCanvas(400, 400);
  
  for (let i = 0; i < 6; i ++) {
    animals.push(new Animal(round(random(10, width - 10)), round(random(10, height - 10)), round(random(3, 4)), round(random(6, 9)), round(random(40, 100))));
  }
}

function draw() {
  background(220);
  
  for (let i in animals) {
    animals[i].display();
  }
}

class Animal {
  constructor(xTemp, yTemp, speedTemp, reproTemp, hungRateTemp) {
    this.x = xTemp;
    this.y = yTemp;
    this.speed = speedTemp;
    this.reprodcution = reproTemp;
    this.hungRate = hungRateTemp;
    
    this.hunger = 8;
    this.age = 0;
    this.clr = color(random(150, 255), random(150, 255), random(150, 255));
  }
  
  display() {
    fill(this.clr);
    ellipse(this.x, this.y, (this.size + 1) * 20, (this.size + 1) * 20);
  }
}