javascript 如何使matter.js的最小示例工作？

gopyfrb3 于 2023-05-27 发布在 Java

关注(0)|答案(4)|浏览(123)

我想用matter.js physics library。我正在使用他们的"getting started" tutorial，但它找不到画布。
下面是我的HTML：

<html>
<head>
<meta charset="UTF-8">
<title>Physics test</title>
</head>
<script type="text/javascript" src="./lib/matter-0.8.0.js"></script>
<script type="text/javascript">
// Matter.js module aliases
var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

// create a Matter.js engine
var engine = Engine.create(document.body);

// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

// add all of the bodies to the world
World.add(engine.world, [boxA, boxB, ground]);

// run the engine
Engine.run(engine);
</script>
<body>
</body>
</html>

控制台显示以下错误：

" [Matter] warn: No "render.element" passed, "render.canvas" was not inserted into document."

我尝试创建render.element和render.canvas，但我的操作是盲目的。一个“让你开始的最小例子”应该已经起作用了。我做错了什么？

JavaScript

来源：https://stackoverflow.com/questions/28079138/how-to-make-minimal-example-of-matter-js-work

4条答案

按热度按时间

ar5n3qh51#

从演示的一部分开始，我发现大部分代码应该在一个函数中，在页面加载中调用，比如：

<body onload='Start()'>

和

function Start() {
    // create a Matter.js engine
    var engine = Engine.create(document.getElementById('canvas-container'));

    // create two boxes and a ground
    var boxA = Bodies.rectangle(400, 200, 80, 80);
    var boxB = Bodies.rectangle(450, 50, 80, 80);
    var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

    // add all of the bodies to the world
    World.add(engine.world, [boxA, boxB, ground]);

    // run the engine
    Engine.run(engine);
}

赞(0）回复(0）举报 2023-05-27

kyxcudwk2#

document.body存在于浏览器控制台中，但不在JavaScript中。
您可以使用document.querySelector("body")。
这个错误可能是因为您将undefined传递给了Engine.create()，因为document.body返回undefined。
此外，确保在window.onload事件之后执行代码，以便加载所有 HTMLElements。像这样：

window.addEventListener("load",init);
function init(){
    var body = document.querySelector("body");
    // Matter.js module aliases
    var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

    // create a Matter.js engine
    var engine = Engine.create(body);

    // create two boxes and a ground
    var boxA = Bodies.rectangle(400, 200, 80, 80);
    var boxB = Bodies.rectangle(450, 50, 80, 80);
    var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

    // add all of the bodies to the world
    World.add(engine.world, [boxA, boxB, ground]);

    // run the engine
    Engine.run(engine);
}

希望这有帮助！

赞(0）回复(0）举报 2023-05-27

cgvd09ve3#

这个问题已经存在很长时间了，但是我看到这个库可能会随着新的Render对象得到改进，所以新的基本示例代码如下所示
在<head>标记中包含以下内容

<script src="matter.js" type="text/javascript"></script>

JS代码可以放在<body>标签的底部

<script>

    // module aliases
    var Engine = Matter.Engine,
        Render = Matter.Render,
        World = Matter.World,
        Bodies = Matter.Bodies;

    // create an engine
    var engine = Engine.create();

    // create a renderer
    var render = Render.create({
        element: document.body,
        engine: engine
    });

    // create two boxes and a ground
    var ball = Bodies.circle(420, 15, 20);

    var boxA = Bodies.rectangle(400, 200, 80, 80);
    var boxB = Bodies.rectangle(450, 50, 80, 80);
    var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

    // add all of the bodies to the world
    World.add(engine.world, [ball, boxA, boxB, ground]);

    // run the engine
    Engine.run(engine);

    // run the renderer
    Render.run(render);

</script>

赞(0）回复(0）举报 2023-05-27

inb24sb24#

最小单HTML文件可运行示例（0.19.0）

https://stackoverflow.com/a/39493132/895245提到了关键步骤，即将<script>标记放在<body>元素的底部。
但为了直接起见，这里完全使用来自https://github.com/liabru/matter-js/wiki/Getting-started/1d138998f05766dc4de0e44ae2e35d03121bb7f2的代码处理一个完整的HTML文件，并使用CDNJS https://cdnjs.com/libraries/matter-js托管的库进行演示：
hello.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js" integrity="sha512-0z8URjGET6GWnS1xcgiLBZBzoaS8BNlKayfZyQNKz4IRp+s7CKXx0yz7Eco2+TcwoeMBa5KMwmTX7Kus7Fa5Uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<script>
// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

// create an engine
var engine = Engine.create();

// create a renderer
var render = Render.create({
    element: document.body,
    engine: engine
});

// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);

// run the renderer
Render.run(render);

// create runner
var runner = Runner.create();

// run the engine
Runner.run(runner, engine);
</script>
</body>
</html>

或者，对于本地开发，您可能希望使用以下命令在本地安装：

npm install matter-js@0.19.0

并改为使用以下内容加载库：

<script src="node_modules/matter-js/build/matter.min.js"></script>

因为这将使您从在线开发中解放出来。
真实的的部署可能会像往常一样使用NPM和webpack将所有Js捆绑到一个文件中。
该示例包含两个落下的方块，并且未启用交互性：

赞(0）回复(0）举报 2023-05-27

我来回答

javascript 如何使matter.js的最小示例工作？

4条答案

相关问题

热门标签

最新问答