文章/答案/技术大牛

发布

社区首页 >问答首页 >无法启动matter.js

问无法启动matter.js
EN

Stack Overflow用户

提问于 2020-05-24 02:10:47

回答 2查看 249关注 0票数 0

我正在接近matter.js库，但我甚至无法启动它。我完全按照“入门”指南，我看不到渲染器出现。你能看到我做错了什么吗？

谢谢!

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

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>frist sketch matter js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <script language="javascript" type="text/javascript" src="libraries/matter.js"></script>
    <style> body {padding: 0; margin: 0;} </style>
  </head>
  <body>
    <h1>First sketch</h1>
  </body>
</html>

javascript

html

css

matter.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-24 18:53:46

我发现这个问题很可能是因为javascript代码在页面加载之前就已经运行了。因此，我找到的方法是将以下代码添加到我的js文件中：window.addEventListener("load",init);，然后将我编写的所有代码放入以下函数：function init(){...}

它似乎是以这种方式工作的，但我想知道是否有其他更好的方法来做到这一点

票数 0

Stack Overflow用户

发布于 2020-05-24 02:21:30

我不知道style.css指的是什么，但是对Javascript文件使用cdn引用可以解决这个问题。

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

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>frist sketch matter js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.0/sketch.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.js"></script>
    <style>
    body {
      padding: 0;
      margin: 0;
    }
    </style>
  </head>
  <body>
    <h1>First sketch</h1>
  </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61976521

复制

相似问题

问无法启动matter.js
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法启动matter.jsEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法启动matter.js
EN