p5.js 無法識別其他文件中的代碼

Question

在 VSCode 中處理 p5.js 項目。 在一個文件中，我創建了一個blob class 並給它一個createVector function，然后在sketch.js中我創建了一個blob實例並在ZC1C425268E68385D1AB5074C1中調用blob.createVector() function setup() 出於某種原因，它完全崩潰了，控制台日志：

Uncaught (in promise) ReferenceError: createVector is not defined
    at new Blob (blob.js:2)
    at p5.sound.min.js:2
    at Array.map

文件結構：

|-- blob.js
|-- index.html
|-- jsconfig.json
|-- libraries
|   |-- p5.min.js
|   |-- p5.sound.min.js
|-- sketch.js
|-- style.css

草圖.js：

var blob;

function setup() {
  blob = new Blob();
  createCanvas(600, 600);
}

function draw() {
  background(0);
  blob.show();
}

blob.js：

function Blob() {
  this.pos = createVector(width/2, height/2);
  this.r = 64;

  this.show = function() {
    fill(255);
    ellipse(this.pos.x, this.pos.y, this.r*2, this.r*2);
  }
}

索引.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="libraries/p5.min.js"></script>
    <script src="libraries/p5.sound.min.js"></script>
  </head>

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

Answer 1

問題是您在創建 blob 之后創建了 canvas，並且在構造函數中，您使用的是在創建 canvas 時初始化的 widht 和 height 屬性。 這意味着您唯一需要做的就是按以下方式更改順序：

var blob;

function setup() {
  createCanvas(600, 600);
  blob = new Blob();
  
}

function draw() {
  
  background(0);
  blob.show();
}

class Blob{
  
  constructor(){
    this.pos = createVector(width/2, height/2);
    this.r = 64;
  }

  show(){
    fill(255);
    ellipse(this.pos.x, this.pos.y, this.r*2, this.r*2);
  }
}

如果您查看此站點，您會發現您的 class 構造方法有點過時了。 我會嘗試在這里完成它。

p5.js 無法識別其他文件中的代碼

問題描述

1 個解決方案

解決方案1
2 2021-03-29 21:01:55

p5.js 無法識別其他文件中的代碼

問題描述

1 個解決方案

解決方案1 2 2021-03-29 21:01:55

解決方案1
2 2021-03-29 21:01:55