Question

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

我的问题是，如果要在index.html中链接多个p5 JavaScript项目，我只会得到最后一个链接的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

如果要在一个窗口中支持多个草图，则需要使用实例模式。

默认情况下，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实例。

如何将多个p5 JS项目链接到相同的index.html？

1 个答案: