所以我用javascript和html做了一个matter.js的东西,它只是创建了一个黑色的地板,上面有一个矩形,梯形,正方形和圆形:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- Include the local Matter.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.js" integrity="sha512-rsntMCBgWYEWKl4HtqWmQ3vdHgvSq8CTtJd19YL7lCtKokLPWt7UEoHVabK1uiNfUdaLit8O090no5BZjcz+bw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
// module aliases
let Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
let engine = Engine.create();
engine.world.gravity.y = 1;
function changeGravity()
{
engine.world.gravity.y = 0;
}
// create a renderer
let render = Render.create({
element: document.body,
engine: engine,
options: {
wireframes: false,
background: ''
}
});
let RenderOption = {
isStatic: false,
render:{
fillStyle: 'black',
strokeStyle: 'red',
lineWidth: 5
}
}
// create two boxes and a ground
let boxA = Bodies.rectangle(400, 10, 100, 200, RenderOption);
let boxB = Bodies.rectangle(450, 50, 80, 80, RenderOption);
let circle2 = Bodies.circle(500, 40, 50, RenderOption);
let ground = Bodies.rectangle(400, 610, 900, 90, {
isStatic: true,
render:{
fillStyle: 'black'
}
});
let trapezoid = Bodies.trapezoid(400, 60, 100, 100, 0.9, RenderOption);
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground, circle2, trapezoid]);
// Event listener for keydown event
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
changeGravity();
}
})
// run the renderer
Render.run(render);
// create runner
let runner = Runner.create();
// run the engine
Runner.run(runner, engine);
console.log("Engine created:", engine);
console.log("Render started:", render);
console.log("Bodies added:", boxA, boxB, ground);
</script>
</body>
</html>
按回车键时应该使重力为0。
无论我如何尝试,这都不起作用。奇怪的是,如果我输入像alert()或console.log这样的东西,一切都会正常。我似乎找不到问题。
谢谢。
所以,我个人认为您不需要为事件侦听器调用函数。
所以对于我的解决方案,我替换了这个:
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
changeGravity();
}
})
有了这个:
document.addEventListener("keydown", function(event) {
if (event.key == "Enter") {
engine.world.gravity.y = 0
console.log(engine.world.gravity.y)
}
})
这样,它应该可以工作。