Javascript - Увеличение значения нажатием клавиши, только один раз - PullRequest
Новая
       42

Javascript - Увеличение значения нажатием клавиши, только один раз

0 голосов
/ 24 октября 2018

я пытаюсь получить значение переменной, которое мне нужно увеличивать на 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);
        };

Эта функция используется для нажатия клавиш и т. Д. Внутри функции рендеринга.Также запускает анимационные кадры и игровую физику.

Эта функция вызывается непосредственно после объявления

Спасибо

1 Ответ

0 голосов
/ 24 октября 2018

Вам необходимо установить флаг, который сообщит вам, удерживается ли клавиша или нет.Чтобы сделать это в простой форме, вы можете использовать событие 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(), чтобы не отображать буквы в поле ввода.Я хотел только, чтобы это было легче увидеть.

...