JS keycode event

#javascript #html #события

                    
пытаюсь сделать html страницу с 


  event.keyCode


написал такой скрипт :

document.addEventListener('keydown', eventT, false);

    function eventT(event) {

        switch (event.keyCode) {
            case 38:
                console.log('вперед');
                break;
            case 40:
                console.log('назад');
                break;
            case 37:
                console.log('лево');
                break;
            case 39:
                console.log('право');
                break;
        }
    }


здесь все работает но как можно сделать движение нискосоком добавил такой скрипт
но не сработало 

if (event.keyCode == 37 && event.keyCode == 38) {
      console.log('найскосок NUM7')
} else
if (event.keyCode == 38 && event.keyCode == 39) {
      console.log('найскосок NUM9')
}


и столкнулся с еще одной проблемой когда нажимаешь стрелку верх и на стрелку налево
стрелка верх прерывается можно ли этого избежать?





    


Control Panel










    

Ответы

Ответ 1

Чтобы обрабатывать одновременное нажатие клавиш, надо нажатия записывать отдельно,
а обрабатывать - отдельно. Попробуйте:



const keys = [];
document.onkeydown = e => {
    if(keys.indexOf(e.which)<0) keys.push(e.which);
};
document.onkeyup = e => {
    keys.splice(keys.indexOf(e.which),1);
};

setInterval(() => {
  keys.forEach(item => {
      switch(item){
          case 87:case 38://W
            console.log('вперед');
          break;
          case 68:case 39://D
            console.log('вправо');
          break;
          case 65:case 37://A
            console.log('влево');
          break;
          case 83:case 40://S
            console.log('назад');
          break;
          default:
          //console.log(item);
      }
  });
  // Наискосоки:

    if (keys.includes(37) && keys.includes(38)) {
        console.log('найскосок NUM7')
    } 
    if (keys.includes(38) && keys.includes(39)) {
        console.log('найскосок NUM9')
    }
    if (keys.includes(39) && keys.includes(40)) {
        console.log('найскосок NUM3')
    }
    if (keys.includes(37) && keys.includes(40)) {
        console.log('найскосок NUM1')
    }
}, 111);


Ответ 2

Что-то вы заморочились... Вот что-то похожее на более правильную реализацию:

document.addEventListener('keydown', eventT, false);
document.addEventListener('keyup', eventT, false);
var arrowLeft=false;
var arrowRigth = false;
var arrowForward = false;
var arrowBack = false;
    function eventT(event) {
        switch (event.keyCode) {
            case 38:
                arrowForward = !arrowForward;
                break;
            case 40:
                arrowBack = !arrowBack;
                break;
            case 37:
                arrowLeft = !arrowLeft;
                break;
            case 39:
                arrowRigth = !arrowRigth;
                break;
        }

        if(arrowRigth === true)
        {
            if(arrowForward === true)
                console.log('диагональ направо');
            else
                console.log('право');
        }
        else if(arrowLeft === true)
        {
            if(arrowForward === true)
                console.log('диагональ налево');
            else
                console.log('лево');
        }
        else if (arrowBack === true)
        {
          console.log('назад');
        }
        else if(arrowForward === true)
        {
          console.log('вперед');
        }
    }