logo标签列表

如何制作一个最简单的matter.js示例？

javascripthtmlcanvasphysics-enginematter.js
8
我正在尝试使用 matter.js 物理库。我正在使用他们的 "入门"教程，但它找不到画布。
这是我的 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，但是我在盲目地操作。一个“让您入门的最小示例”应该已经可以工作了。我做错了什么？
确保脚本位于页面底部（或在窗口加载事件之后，或在DOM准备就绪之后调用）。 - liabru
4个回答
6

逐步拆解演示代码后，我发现大部分代码应该放在一个函数中，在页面加载时调用，如下所示:

<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);
}
3

在浏览器控制台中，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);
}

希望这可以帮到你！
谢谢，我之前尝试过使用document.getElementById，但它也没有起作用。使用onload才解决了问题。 - Rodrigo
1
小心！document.getElementById(id)需要一个id，而<body>通常没有id，请使用document.querySelector(selector)（更多关于选择器的内容）代替。另外，window.onload将替换窗口中所有先前的加载事件，我已更新我的答案以使用window.addEventListener()，它不会导致这种行为。最后，如果您认为问题已得到解答，请单击答案旁边的绿色勾号！再见 :) - undefined
在我的解决方案中，我使用了一个 <div id='canvas-container'></div>，就像演示中所做的那样。但是使用 Engine.create(document.body) 也可以工作。无论如何，谢谢。 - Rodrigo
“document.body在浏览器控制台中存在，但在JavaScript中不存在。”这是不正确的。 “浏览器控制台”和“JavaScript”是同一个东西。 - ggorlen
3

这个问题已经存在了很长时间，但我发现该库可能会通过新的 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>
1

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

https://dev59.com/gIfca4cB1Zd3GeqPeiHl#39493132提到了关键步骤，即将<script>标签放在<body>元素的底部。

但为了直接明了起见，这里提供一个完整的单个HTML文件，其中包含来自https://github.com/liabru/matter-js/wiki/Getting-started/1d138998f05766dc4de0e44ae2e35d03121bb7f2的代码，并使用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打包成一个单独的文件。

示例包含两个下落的正方形，并且未启用任何交互：

enter image description here

enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接