无法让 matter.js 开始
can't make matter.js start
我正在接近 matter.js 图书馆,但我什至无法启动它。我完全遵循了 "getting started" 指南,我看不到渲染器出现。你能看出我做错了什么吗?
谢谢!
// 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>
我不知道 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>
我发现问题可能是由于页面加载前javascript代码是运行引起的。所以我找到的方法是将这段代码添加到我的js文件中:window.addEventListener("load",init);
然后把我写的所有代码都放到这个函数中:function init(){...}
它似乎是这样工作的,但我想知道是否还有其他更好的方法来做到这一点
我正在接近 matter.js 图书馆,但我什至无法启动它。我完全遵循了 "getting started" 指南,我看不到渲染器出现。你能看出我做错了什么吗?
谢谢!
// 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>
我不知道 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>
我发现问题可能是由于页面加载前javascript代码是运行引起的。所以我找到的方法是将这段代码添加到我的js文件中:window.addEventListener("load",init);
然后把我写的所有代码都放到这个函数中:function init(){...}
它似乎是这样工作的,但我想知道是否还有其他更好的方法来做到这一点