我的 javascript + p5.js 代码无缘无故无法正常工作答案

【问题标题】：My javascript + p5.js code is not working for no apperent reason我的 javascript + p5.js 代码无缘无故无法正常工作
【发布时间】：2020-11-12 22:16:33
【问题描述】：

我的 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 画布并渲染了背景，但没有一个“动物”正在渲染。我希望它在屏幕上随机呈现 6 个圆圈，静态点，随机颜色不会改变

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

谢谢！

【问题讨论】：

标签： javascript rendering p5.js

【解决方案1】：

有几个问题：

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

还有一点，p5.js 不喜欢在堆栈溢出中运行，所以不要点击“run sn -p”，它不会做任何事情。

// 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
  }
}

这是一个在编辑器上查看的链接：https://editor.p5js.org/Samathingamajig/sketches/qpZRzeaVk

【讨论】：

好的，非常感谢！我也打算用 this.age 获得尺寸，但我忘记了，哈哈。谢谢！
是的，我只是假设您希望将大小作为参数，但这也有效。