我怎样才能 link 多个 p5 JS 项目到同一个 index.html？

Question

我有一个 p5 JavaScript 项目文件夹，其中包含许多 JavaScript documents/projects。为了在浏览器中查看我的代码，显然我只是运行 linked HTML 文档。

我的问题是，如果我在 index.html 中 link 多个 p5 JavaScript 项目，我只会得到最后一个 linked JavaScript 项目.

我可以简单地为每个项目创建一个单独的 HTML 文档，但这会使我的项目文件夹中的文档数量翻倍，并可能为我自己创建很多不必要的工作。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JS learnings</title>
  </head>
  <body>
    <script language="javascript" type="text/javascript" src="node_modules/p5/lib/p5.js"></script>
    <script language="javascript" type="text/javascript" src="node_modules/p5/lib/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="node_modules/p5/lib/addons/p5.sound.js"></script>
    <script src="./classes.js"></script>;
    <script src="./function-picture.js"></script>;
    <script src="./ifs-within-ifs.js"></script>;
    <script src="./while-and-for-loops.js"></script>;
    <script src="./Boolean.js"></script>;
    <script src="./object-var.js"></script>;
    <script src="./move.js"></script>;
  </body>
</html>

此代码仅在浏览器中显示 ./move.js。

Answer 1

如果你想在一个window中支持多个草图，你将需要使用实例模式。

默认情况下，P5.js 对其变量和函数使用全局命名空间。因此，每次定义 setup() 或 draw() 函数时，您都会覆盖之前的任何值。这就是为什么你只能看到你加载的最后一个草图。

要解决这个问题，您可以使用实例模式 将每个草图封装在非全局范围内。您可以阅读有关实例模式的更多信息 here，但这里有一个示例：

var s = function( sketch ) {

  var x = 100; 
  var y = 100;

  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
};

var myp5 = new p5(s);

您可能希望为每个草图创建一个新的 p5 实例。

我怎样才能 link 多个 p5 JS 项目到同一个 index.html？

How can I link multiple p5 JS projects to the same index.html?

html

javascript

object

libraries

p5.js