Javascript - 通过按键增加值，仅一次

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()。我觉得这可能是导致它继续计数的问题，但是我尝试将它移到此函数之外，但没有任何反应。

Javascript 与 THREE.js 和 Physi.js

一起使用

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

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>

注意在 sn-p 中我使用e.preventDefault() 来阻止字母出现在输入框中。我的目的只是为了让它更容易看到。