gpt4 book ai didi

javascript - 如何将多个 p5 JS 项目链接到同一个 index.html?

转载 作者:行者123 更新时间:2023-12-03 00:11:23 24 4
gpt4 key购买 nike

我有一个 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。

最佳答案

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

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

关于javascript - 如何将多个 p5 JS 项目链接到同一个 index.html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54713011/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com