JS keycode event

Question

trying to make html page with

event.keyCode

wrote the following script:

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; } }

Everything works here, but how can you make a move with a low-key added such a script but it did not work

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

and ran into another problem when you press the up arrow and the arrow on the left arrow up is interrupted, can this be avoided?

 <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>

Darth darth 12k 2 sixteen 45 · Accepted Answer · 2018-03-26T12:29:03

To process a simultaneous keystroke, it is necessary to record the presses separately, and process them separately. Try:

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

Michael Vaysman Michael Vaysman 1,300 four sixteen · Answer 2 · 2018-03-26T12:17:36

Something you are confused ... Here is something similar to a more correct implementation:

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

Everything works fine: jsfiddle.net/bt4ga1tm/16 Another thing is that you need to enter a delay to check, to filter not simultaneous pressing of buttons and add more states ...
Push - right, then forward, then left, then release to the right, then release forward - and in the console we have a diagonal to the right, and the button is held to the left ... This is NOT normal)

JS keycode event

2 answers 2

More articles: