我的 javascript + p5.js 代码无缘无故不起作用

Question

我的 p5.js 代码无缘无故不起作用。似乎一切都是正确的，我在控制台中没有错误。我在 p5js 网络编辑器 (https://editor.p5js.org) 中运行它并且我有四个文件

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>

sketch.js:

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();
  }
}

animal.js:

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);
  }
}

和 style.css 只是有基本的代码，什么都不喜欢。

到目前为止，所发生的一切都是它创建了 400、400 canvas 和渲染背景，但正在渲染“动物”的 none。我希望它能在屏幕上呈现 6 个圆圈，随机、静态、点，随机颜色不会改变

我不知道发生了什么，如果有人能提供帮助就太好了。请记住使用 p5.js 库

谢谢！

Answer 1

有几个问题：

当您应该使用 for (.. of ..) 循环时，您正在使用 for (.. in ..) 循环
this.size 从未在您的 Animal 中定义 class
for 循环的另一个问题，您将在下面看到...

另一件事，p5.js 不喜欢运行在堆栈溢出中，所以不要单击“运行片段”，它不会执行任何操作。

// animal.js
class Animal {
  constructor(xTemp, yTemp, sizeTemp, speedTemp, reproTemp, hungRateTemp) { // add sizeTemp argument
    this.x = xTemp;
    this.y = yTemp;
    this.size = sizeTemp; // add size
    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);
  }
}

// sketch.js
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(10, width/90)), round(random(3, 4)), round(random(6, 9)), round(random(40, 100)))); // Add an argument at the 3rd place
  }
}

function draw() {
  background(220);
  
  for (let animal of animals) { // Here
    animal.display(); // Here
  }
}

这里有一个 link 可以在编辑器上查看：https://editor.p5js.org/Samathingamajig/sketches/qpZRzeaVk

我的 javascript + p5.js 代码无缘无故不起作用

My javascript + p5.js code is not working for no apperent reason

javascript

rendering

p5.js