matter.js 空白屏幕,没有任何加载
matter.js blank screen, nothing loads
我得到一个包含以下代码的空白屏幕。我不知道为什么。我也尝试过使用 document.addEventListener()
但仍然没有加载。
我已经检查 matter.js 是否正确 运行。我正在尝试在页面的一部分内呈现 canvas。
<script>
window.addEventListener('load', function() {
//Fetch our canvas
var canvas = document.getElementById('world');
// 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({
canvas: canvas,
engine: engine,
options: {
width: 500,
height: 500,
background: '#000',
wireframes: false,
showAngleIndicator: false
});
// 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);
});
</script>
<canvas id="world"></canvas>
看起来像是一个简单的问题,您的选项对象缺少关闭 }
。
这个:
// create a renderer
var render = Render.create({
canvas: canvas,
engine: engine,
options: {
width: 500,
height: 500,
background: '#000',
wireframes: false,
showAngleIndicator: false
});
应该是:
// create a renderer
var render = Render.create({
canvas: canvas,
engine: engine,
options: {
width: 500,
height: 500,
background: '#000',
wireframes: false,
showAngleIndicator: false}
});
供参考
我得到一个包含以下代码的空白屏幕。我不知道为什么。我也尝试过使用 document.addEventListener()
但仍然没有加载。
我已经检查 matter.js 是否正确 运行。我正在尝试在页面的一部分内呈现 canvas。
<script>
window.addEventListener('load', function() {
//Fetch our canvas
var canvas = document.getElementById('world');
// 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({
canvas: canvas,
engine: engine,
options: {
width: 500,
height: 500,
background: '#000',
wireframes: false,
showAngleIndicator: false
});
// 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);
});
</script>
<canvas id="world"></canvas>
看起来像是一个简单的问题,您的选项对象缺少关闭 }
。
这个:
// create a renderer
var render = Render.create({
canvas: canvas,
engine: engine,
options: {
width: 500,
height: 500,
background: '#000',
wireframes: false,
showAngleIndicator: false
});
应该是:
// create a renderer
var render = Render.create({
canvas: canvas,
engine: engine,
options: {
width: 500,
height: 500,
background: '#000',
wireframes: false,
showAngleIndicator: false}
});
供参考