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> 

請注意 ，在代碼段內部，我使用e.preventDefault()來阻止字母出現在輸入框中。 我的意圖僅僅是使它更容易看到。