JS keycode event

155

27 марта 2018, 02:51

пытаюсь сделать 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')
}

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

<HTML> 
<HEAD> 
    <TITLE>Control Panel</TITLE> 
</HEAD> 
<BODY> 
<H1>Control Panel</H1> 
<br/> 
<br/> 
<script> 
    document.addEventListener('keydown', eventT, false); 
    function eventT(event) { 
        if (event.keyCode == 37 && event.keyCode == 38) { 
            console.log('найскосок NUM7') 
            document.addEventListener('keydown', eventT, false); 
        } else 
        if (event.keyCode == 38 && event.keyCode == 39) { 
            console.log('найскосок NUM9') 
        } 
        console.log(event.keyCode) 
        switch (event.keyCode) { 
            case 38: 
                console.log('вперед'); 
                document.addEventListener('keydown', eventT, false); 
                break; 
            case 40: 
                console.log('назад'); 
                document.addEventListener('keydown', eventT, false); 
                break; 
            case 37: 
                console.log('лево'); 
                document.addEventListener('keydown', eventT, false); 
                break; 
            case 39: 
                console.log('право'); 
 
                break; 
        } 
    } 
</script> 
</BODY> 
</HTML>

Answer 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);

Answer 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('вперед');
        }
    }