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() 来阻止字母出现在输入框中。我的意图只是这样更容易看到。

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

Javascript - Increasing value by keypress, only once

keypress

onkeypress

game-physics

three.js