我正在try 在IIFE中使用p5.js.到目前为止,当我try 使用print()方法时,它按预期工作,并将我传递给它的任何内容记录在控制台日志(log)中.下面是我的代码.

(function () {
    function setup() {
        print("Hello World");
    }

    $(document).ready(function () {
        new p5();
        setup();
    });
})();
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"
            integrity="sha512-uaz5GpnQoE6t5echKlX8P52czvsIGgLPcvlzfvRubLZ1Hp8JemUDnbUiAahbVtPb+jUVrNETuXvAhDDF/N3M4w=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        ></script>
        <title>Game</title>
    </head>
    <body>
        <main>
            <div id="puzzle-container">
                <canvas id="puzzle"></canvas>
            </div>
        </main>

        <script src="main.js"></script>
    </body>
</html>

我甚至可以使用select()方法来定位DOM中的元素并将其打印出来,而且它也可以工作.但是,当我try 使用createCanvas()函数时,它似乎不起作用.将生成一个默认画布,但它不会具有指定的大小,也不会使用Parent()方法放置在指定的父容器中.我也没有收到任何错误,只是收到一条警告消息:"p5.js似乎已经导入了多次.请删除重复的导入."

我想要做的事有可能实现吗?

我的最终目标是创建一个名称空间,并创建以该名称空间为前缀但仍然能够使用p5API方法的函数.以下面的代码为例:

var game = game || {};

(function(ns) {
    var canvasWidth = 480;
    var canvasHeight = 480;

    ns.initGame = function() {
        createCanvas(canvasWidth, canvasHeight);
        background(153);
    }

    $(document).ready(function() {
        ns.initGame();
    })
})(game);

与代码相关的HTML与前面提供的HTML完全相同.上面的代码将记录一条消息:"createCanvas"未在当前作用域中定义.所以我的最终问题是,有没有办法在不使用实例模式下使用P5的情况下实现我想要的生活结果?我希望避免在P5功能前面加上sketch.p.等前缀.

推荐答案

如果要使用无实例模式的LIFE,请使用window.作为p5全局函数的前缀,以便库可以看到它们:

(() => {
  window.setup = () => {
    createCanvas(200, 200);
  };

  window.draw = () => {
    background(`hsl(${frameCount % 360}, 50%, 50%)`);
  };
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

P5首先判断窗口上是否定义了setupdraw,然后切换到全局模式并在窗口上填充其API的其余部分.因此,如果您想要使用全局模式,您至少需要定义window.setup,如所述的here.

想想setup()的回调(相当于$(document).ready),它不会等待P5在窗口上检测并填充其API,或者预加载assets资源 (如果适用).

适用于您的更新代码:

var game = game || {};

(function(ns) {
    var canvasWidth = 480;
    var canvasHeight = 480;

    ns.initGame = function() {
        createCanvas(canvasWidth, canvasHeight);
        background(153);
    }

    window.setup = function() { // rather than $(document).ready
        ns.initGame();
    }
})(game);
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

如果要使用实例模式,请紧跟guidelines.new p5()被给予一个回调,这就是素描.不要调用setup()或使用任何无前缀的全局P5函数或变量.

const p5Sketch = p => {
  // always use p. before any p5 calls

  p.setup = () => {
    p.createCanvas(200, 200);
  };

  p.draw = () => {
    p.background(`hsl(${p.frameCount % 360}, 50%, 50%)`);
  };
};
const p5Instance = new p5(p5Sketch);
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

我看到你的素描里有<canvas>分.这通常不是必需的--P5为您处理画布管理.

Javascript相关问答推荐

Chart.js V4切换图表中的每个条,同时每个条下有不同的标签.怎么做?

如何用显示网格平滑地将元素从一个地方移动到另一个地方?

如何修复我的js构建表每当我添加一个额外的列作为它的第一列?

PrivateRoute不是路由组件错误

使用useEffect,axios和useParams进行react测试

Google maps API通过API返回ZERO_RESULTS,以获得方向请求,但适用于Google maps

在react JS中映射数组对象的嵌套数据

400 bad request error posting through node-fetch

Nextjs 13.4 Next-Auth 4.2登录(&Quot;凭据&,{});不工作

如何在Java脚本中对列表中的特定元素进行排序?

按什么顺序接收`storage`事件?

是否可以将异步调用与useState(UnctionName)一起使用

使用API调用的VUE 3键盘输入同步问题

MongoDB通过数字或字符串过滤列表

使用可配置项目创建网格

表单数据中未定义的数组键

React数组查找不读取变量

如何在Java脚本中添加一个可以在另一个面板中垂直调整大小的面板?

使用JavaScript或PHP从div ID值创建锚标记和链接

我如何让我的弹力球在JavaScript和HTML画布中相互碰撞后改变 colored颜色 ?