如何使 matter.js 的最小示例起作用？

Question

我正在尝试使用 matter.js physics library. I'm using their "getting started" tutorial，但找不到 canvas。

这是我的 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，但我在盲目行动。 "minimal example to get you started" 应该已经在工作了。我做错了什么？

Answer 1

一段一段的demo，我发现大部分代码应该在一个函数里，在页面加载时调用，比如：

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

Answer 2

好吧 document.body 存在于浏览器控制台中，但不存在于 JavaScript 中。

您可以使用 document.querySelector("body")。

错误可能是因为您将 undefined 传递给 Engine.create()，如 document.body returns 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);
}

希望对您有所帮助！

Answer 3

这个问题已经很久了，但我看到库可能会通过新的渲染对象得到改进，所以新的基本示例代码如下

在 <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>

如何使 matter.js 的最小示例起作用？

How to make minimal example of matter.js work?

javascript

html

canvas

physics-engine

matter.js