Javascript 如何让matter.js的最小示例工作？_Javascript_Html_Canvas_Physics Engine

Javascript 如何让matter.js的最小示例工作？

javascript html canvas

Javascript 如何让matter.js的最小示例工作？,javascript,html,canvas,physics-engine,Javascript,Html,Canvas,Physics Engine,我在试着用这个。我在用他们的，但找不到画布这是我的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/javasc

我在试着用这个。我在用他们的，但找不到画布

这是我的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>

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

一部分接一部分地演示，我发现大部分代码应该在一个函数中，在页面加载中调用，如：

<body onload='Start()'>

当然，

document.body

存在于浏览器控制台中，但不存在于JavaScript中

您可以改用

document.querySelector（“正文”）

该错误可能是因为您将

未定义的传递给引擎.create（）
，作为文档.body
返回未定义的
另外，确保在window.onload
事件之后执行代码，以便加载所有HTMLElement。像这样：
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);
}

希望这有帮助
 这个问题已经讨论了很长时间了，但是我看到库可能会通过新的渲染对象得到改进，因此新的基本示例代码如下所示
在
标记中包括以下内容
<script src="matter.js" type="text/javascript"></script>



JS代码可以放在
标记的底部
<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>


//模块别名
var发动机=物质发动机，
Render=物质，Render，
世界=物质。世界，
物体=物质。物体；
//创建引擎
var engine=engine.create（）；
//创建渲染器
var render=render.create({
元素：document.body，
引擎：引擎
});
//创建两个盒子和一个地面
var ball=物体。圆（420,15,20）；
var boxA=实体。矩形（400、200、80、80）；
var boxB=实体。矩形（450,50,80,80）；
var ground=Bodies.矩形（400610810,60，{isStatic:true}）；
//将所有实体添加到世界
添加（engine.World，[ball，boxA，boxB，ground]）；
//发动引擎
引擎。运行（引擎）；
//运行渲染器
Render.run（Render）；
谢谢，我以前试过document.getElementById，但也没用。超负荷完成了任务。小心document.getElementById（id）
需要一个id，而
通常没有id，请改用document.querySelector（selector）
（详细信息），另外，window.onload
将替换窗口
中所有以前的加载事件，我更新了答案，改用窗口.addEventListener（）
，这不会导致这种行为。最后，如果您觉得您的问题已得到回答，请单击答案旁边的绿色勾号！拜拜：）在我的解决方案中，我使用了一个，就像在演示中一样。但是使用Engine.create（document.body）也可以工作。无论如何，谢谢。“嗯document.body存在于浏览器控制台中，但不存在于JavaScript中。”不是真的。“浏览器控制台”和“JavaScript”是相同的。请确保脚本位于页面底部（或在窗口加载事件中调用，或在DOM就绪后调用）。
<script src="matter.js" type="text/javascript"></script>

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