Question

我试图获取每次按下向上键时必须增加5的变量的值。

当前，我在按键等时变量增加，但是我遇到的主要问题是从一次按键开始，该值将继续上升。例如，值将从5开始，每次一次按键将继续增加5，并在600之后停止。而我希望它从开始于5，然后每次按键一次到10,15,20 ....

这是我拥有的代码，我将感谢我在哪里出错等方面的帮助

var projectoryHeight = 5;

function setHeight()
{
    projectoryHeight = projectoryHeight + 5;
};

if (keyCode == 38)
{
    setHeight();
    console.log(projectoryHeight);
};

与要放置的向上键的键控代码相关的代码位于渲染函数内部，供requestAnimationFrame（）使用。我觉得这可能是导致它继续计数的问题的原因，但是我尝试将其移出此功能，但没有任何反应。

与 THREE.js和Physi.js

一起使用的Javascript

更多代码可帮助解决问题：

var render = function() {
            requestAnimationFrame(render);
            scene.simulate();

            let keyFlag = false;

            // Update the title page shape rotations
            sphere.rotation.y += 0.06;
            sphere.rotation.x += 0.10;
            sphere.rotation.z += 0.06;



            document.addEventListener("keydown", (e) => {
                if(e.code == 'KeyW'){
                $(title).hide();
                    $(keyTitle).hide();
                    scene.remove(sphere);
                    sphere.geometry.dispose();
                    sphere.material.dispose();

                    //add all the game functions here
                    scene.add(cube);
                    scene.add(firingBall);
                    scene.add(struct1);
                    scene.add(struct2);
                    scene.add(struct3);
                    scene.add(struct4);
                    scene.add(struct5);
                    scene.add(struct6);
                    scene.simulate();
                }
            });   

            document.addEventListener("keydown", (e) => {
                if(e.code == 'Space'){
                firingBall.setLinearVelocity(new THREE.Vector3(speedOfBall, projectoryHeight, 0));
                }                
            });

            document.addEventListener("keydown", (e) => {
                if(e.code == 'ArrowUp'){
                if (!keyFlag) {
                        keyFlag = true;
                        projectoryHeight = projectoryHeight + 5;
                        console.log(projectoryHeight);
                    }
                }                
            });

             document.addEventListener("keydown", (e) => {
                if(e.code == 'ArrowDown'){
                if (!keyFlag) {
                        keyFlag = true;
                        projectoryHeight = projectoryHeight - 5;
                        console.log(projectoryHeight);
                    }
                }                
            });

               document.addEventListener("keyup", (e) => {
                if(e.code == 'ArrowUp'){
                if (keyFlag){
                    console.log("stopped");
                    keyFlag = false;
                }
                }
            });

            document.addEventListener("keyup", (e) => {
                if(e.code == 'ArrowDown'){
                if (keyFlag){
                    console.log("stopped");
                    keyFlag = false;
                }
                }
            });


            renderer.autoClear = false;
            renderer.clear();
            renderer.render(backgroundScene, backgroundCamera);
            renderer.render(scene, camera);
        };

这是在渲染功能内部使用按键等功能的功能。同时开始动画帧和游戏物理。

此函数在声明后立即被调用

谢谢

Answer 1

您需要设置一个标志，告诉您是否按住了某个键。要以简单的形式执行此操作，可以将keydown事件与keyup事件结合使用。在下面的代码中，可以按住该键，但是仅根据标志执行一次操作。

i.addEventListener("keydown", (e) => {
  if (!keyflag) console.log(e.key);
  keyflag = true;
});

i.addEventListener("keyup", (e) => {
  if (keyflag) console.log("released!");
  keyflag = false;
});

let i = document.querySelector("input"),
  keyflag = false;

i.addEventListener("keydown", (e) => {
  if (!keyflag) console.log(e.key);
  else e.preventDefault();
  keyflag = true;
});

i.addEventListener("keyup", (e) => {
  if (keyflag) console.log("released!");
  else e.preventDefault();
  keyflag = false;
});

<input>

注意，在代码段内，我使用e.preventDefault()来阻止输入框中出现的字母。我的目的只是为了使它更易于查看。

Javascript-仅通过一次按键即可增加价值

1 个答案: