按下 Enter 键时如何更改重力

问题描述 投票:0回答:1

所以我用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这样的东西,一切都会正常。我似乎找不到问题。

谢谢。

javascript html physics matter.js
1个回答
0
投票

所以,我个人认为您不需要为事件侦听器调用函数。

所以对于我的解决方案,我替换了这个:

        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)
      }

})

这样,它应该可以工作。

© www.soinside.com 2019 - 2024. All rights reserved.