Question

我对P5JS和P5JS编辑器比较陌生。我也是Stack Overflow的新手。我试图通过在编辑器中打开新标签将我的代码拆分成多个草图（.js文件），如“编码培训”视频中所述：https://www.youtube.com/watch?v=Yk18ZKvXBj4

我相信我会准确地按照视频中的步骤操作。我的'index.html'文件如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Untitled</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>
    <script src="mybutton.js" type="text/javascript"></script>
    <script src="p5.collide2d.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>
  <body>
  </body>
</html>

我的目标是在我的程序中为一个名为“MyButton”的对象使用此函数：

function MyButton(xLoc, yLoc) {
  this.on = false;
  this.startXLoc = xLoc;
  this.startYLoc = yLoc;
  this.xLoc = xLoc;
  this.yLoc = yLoc;
  this.display = function() {
    if (this.on) {
      fill(255);
    } else {
      fill(100, 0, 0);
    }
    rect(this.xLoc, this.yLoc, 30, 30);
  }
}

并给它自己的文件，名为'mybutton.js'，以使普通的'sketch.js'文件不那么杂乱。目前，'sketch.js'文件如下所示：

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  noStroke();
}

var testButton = new MyButton(50, 50);  //This line produces the error
console.log(testButton);

function draw() {
  background(40);
  testButton.display();
}

然而，当我以这种方式运行代码时，我在第7行得到了这个错误：

7: Uncaught TypeError: Illegal constructor

然而，如果我在'sketch.js'文件中使用'MyButton'函数运行代码（并且我没有给它自己的文件），它运行正确，我根本没有错误。我不确定问题是什么。如何在没有任何错误的情况下为“MyButton”函数提供自己的文件？如果它有任何区别，我在Linux Mint上运行P5JS。任何帮助表示赞赏。谢谢！

Answer 1

如果从testButton之前删除var，则错误会缓解（如此）：

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  noStroke();

  testButton = new MyButton(50, 50);  //This line produces the error
  console.log(testButton);

}

最初的问题是p5js需要在setup中声明的变量才能在draw循环中访问它。从全局声明中删除var使得testButton非常类似于全局变量（但不完全），允许绘制循环到＆＃34;参见＆＃34;变量。有关详细信息，请参阅this答案。

P5JS编辑器中的多个Javascript草图？

1 个答案: