黑屏 - Matter.js
Blank Screen - Matter.js
matter.js -
这是 matter.js 的 one of the demo。它 returns 一个空白屏幕。我已经尝试了几种方法并为此花费了数小时,但仍然无法弄清楚这里出了什么问题。
我检查了括号、语法和拼写错误,但它仍然是 returns 空白屏幕。
我检查过 matter.js 是否在后台正确加载。
有好心人指出这里的错误吗?
<script>
window.addEventListener('load', function() {
//Fetch our canvas
var canvas = document.getElementById('world22');
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composites = Matter.Composites,
Events = Matter.Events,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
// create engine
var engine = Engine.create(),
world = engine.world;
// create renderer
var render = Render.create({
// element: document.body,
canvas: canvas,
engine: engine,
options: {
width: 800,
height: 600,
showAngleIndicator: true,
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true }),
rockOptions = { density: 0.004 },
rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
anchor = { x: 170, y: 450 },
elastic = Constraint.create({
pointA: anchor,
bodyB: rock,
stiffness: 0.05
});
var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
var ground2 = Bodies.rectangle(610, 250, 200, 20, { isStatic: true });
var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
World.add(engine.world, [ground, pyramid, ground2, pyramid2, rock, elastic]);
Events.on(engine, 'afterUpdate', function() {
if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190
rock.position.y < 430)) {
rock = Bodies.polygon(170, 450, 7, 20, rockOptions);
World.add(engine.world, rock);
elastic.bodyB = rock;
}
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, {
min: { x: 0, y: 0 },
max: { x: 800, y: 600 }
});
});
</script>
<canvas id="world22"></canvas>
修复:
(1) 将您的 world22
元素从 canvas
更改为 div
或任何其他合适的元素。显然 matter.js 将在容器中创建它自己的 canvas,因此无法在 canvas.
中使用 canvas 做任何事情
(2) 您的条件中缺少 ||
,导致语法错误,介于 rock.position.x > 190 rock.position.y < 430
之间。不知道在粘贴到 SO 时这是否成为错别字。
(3) 在创建渲染时指定容器元素时使用属性 element
。不要使用 canvas: canvas
。使用 element: canvas
。关于这里Render.create({ ... });
这是修改后的源代码。我想您可以安全地忽略我是如何包含 matter.js 脚本的。我不知道版本是否重要,假设您使用的是最新版本。
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.js"></script>
<script>
window.addEventListener('load', function() {
//Fetch our canvas
var canvas = document.getElementById('world22');
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composites = Matter.Composites,
Events = Matter.Events,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
// create engine
var engine = Engine.create(),
world = engine.world;
// create renderer
var render = Render.create({
element: canvas,
engine: engine,
options: {
width: 800,
height: 600,
showAngleIndicator: true,
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true }),
rockOptions = { density: 0.004 },
rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
anchor = { x: 170, y: 450 },
elastic = Constraint.create({
pointA: anchor,
bodyB: rock,
stiffness: 0.05
});
var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
var ground2 = Bodies.rectangle(610, 250, 200, 20, { isStatic: true });
var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
World.add(engine.world, [ground, pyramid, ground2, pyramid2, rock, elastic]);
Events.on(engine, 'afterUpdate', function() {
if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190 ||
rock.position.y < 430)) {
rock = Bodies.polygon(170, 450, 7, 20, rockOptions);
World.add(engine.world, rock);
elastic.bodyB = rock;
}
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, {
min: { x: 0, y: 0 },
max: { x: 800, y: 600 }
});
});
</script>
</head>
<body>
<div id="world22"></div>
</body>
<html>
我根据此处提供的最小示例进行调试 https://github.com/liabru/matter-js/wiki/Getting-started ....
起初我没有注意到 canvas
问题,但后来我使用浏览器开发工具检查了 world22 元素。 另一个 canvas 是嵌套的,所以我就是这样知道的。
matter.js -
这是 matter.js 的 one of the demo。它 returns 一个空白屏幕。我已经尝试了几种方法并为此花费了数小时,但仍然无法弄清楚这里出了什么问题。
我检查了括号、语法和拼写错误,但它仍然是 returns 空白屏幕。
我检查过 matter.js 是否在后台正确加载。
有好心人指出这里的错误吗?
<script>
window.addEventListener('load', function() {
//Fetch our canvas
var canvas = document.getElementById('world22');
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composites = Matter.Composites,
Events = Matter.Events,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
// create engine
var engine = Engine.create(),
world = engine.world;
// create renderer
var render = Render.create({
// element: document.body,
canvas: canvas,
engine: engine,
options: {
width: 800,
height: 600,
showAngleIndicator: true,
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true }),
rockOptions = { density: 0.004 },
rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
anchor = { x: 170, y: 450 },
elastic = Constraint.create({
pointA: anchor,
bodyB: rock,
stiffness: 0.05
});
var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
var ground2 = Bodies.rectangle(610, 250, 200, 20, { isStatic: true });
var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
World.add(engine.world, [ground, pyramid, ground2, pyramid2, rock, elastic]);
Events.on(engine, 'afterUpdate', function() {
if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190
rock.position.y < 430)) {
rock = Bodies.polygon(170, 450, 7, 20, rockOptions);
World.add(engine.world, rock);
elastic.bodyB = rock;
}
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, {
min: { x: 0, y: 0 },
max: { x: 800, y: 600 }
});
});
</script>
<canvas id="world22"></canvas>
修复:
(1) 将您的 world22
元素从 canvas
更改为 div
或任何其他合适的元素。显然 matter.js 将在容器中创建它自己的 canvas,因此无法在 canvas.
(2) 您的条件中缺少 ||
,导致语法错误,介于 rock.position.x > 190 rock.position.y < 430
之间。不知道在粘贴到 SO 时这是否成为错别字。
(3) 在创建渲染时指定容器元素时使用属性 element
。不要使用 canvas: canvas
。使用 element: canvas
。关于这里Render.create({ ... });
这是修改后的源代码。我想您可以安全地忽略我是如何包含 matter.js 脚本的。我不知道版本是否重要,假设您使用的是最新版本。
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.js"></script>
<script>
window.addEventListener('load', function() {
//Fetch our canvas
var canvas = document.getElementById('world22');
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composites = Matter.Composites,
Events = Matter.Events,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
// create engine
var engine = Engine.create(),
world = engine.world;
// create renderer
var render = Render.create({
element: canvas,
engine: engine,
options: {
width: 800,
height: 600,
showAngleIndicator: true,
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true }),
rockOptions = { density: 0.004 },
rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
anchor = { x: 170, y: 450 },
elastic = Constraint.create({
pointA: anchor,
bodyB: rock,
stiffness: 0.05
});
var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
var ground2 = Bodies.rectangle(610, 250, 200, 20, { isStatic: true });
var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
World.add(engine.world, [ground, pyramid, ground2, pyramid2, rock, elastic]);
Events.on(engine, 'afterUpdate', function() {
if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190 ||
rock.position.y < 430)) {
rock = Bodies.polygon(170, 450, 7, 20, rockOptions);
World.add(engine.world, rock);
elastic.bodyB = rock;
}
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, {
min: { x: 0, y: 0 },
max: { x: 800, y: 600 }
});
});
</script>
</head>
<body>
<div id="world22"></div>
</body>
<html>
我根据此处提供的最小示例进行调试 https://github.com/liabru/matter-js/wiki/Getting-started ....
起初我没有注意到 canvas
问题,但后来我使用浏览器开发工具检查了 world22 元素。 另一个 canvas 是嵌套的,所以我就是这样知道的。