我的 javascript + p5.js 代码无故无效

Question

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

索引.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>

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

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

我不知道发生了什么，如果有人能提供帮助就太好了。 请记住使用 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 } }

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

我的 javascript + p5.js 代码无故无效

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-12 22:33:20

我的 javascript + p5.js 代码无故无效

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-12 22:33:20

解决方案1
1 已采纳 2020-11-12 22:33:20