Javascript key listener press any key

Question

I have a problem and I need to find a solution. :D

So here's my code:

var inputEnabled = true
var pressedKey = {}
window.addEventListener('keydown',function(e) {
    pressedKey[e.keyCode || e.which] = true;
}, true);
window.addEventListener('keyup',function(e) {
    pressedKey[e.keyCode || e.which] = false;
}, true);

function keyBinding() {
    if (*my problem*) {
        loadMenu()
    }

    if (inputEnabled == true) {
        setTimeout("keyBinding()", 25)
    }
}

What I want is that when any key is pressed I want to load a menu but I don't what how am I supposed to detect that key press.

Any help would be appreciated.

Possible duplicate of [Detecting arrow key presses in JavaScript](http://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript) — Tymek, Apr 22 '17 at 11:38
What about putting your `keyBinding` method in your `addEventListener` method ? In `addEventListener('keydown')` you call loadMenu(), in `addEventListener('keyup')` you unload your menu — soywod, Apr 22 '17 at 11:46

score 0 · Accepted Answer · answered Apr 22 '17 at 11:48

0

try this where *my problem* is in your code:

if(Objects.keys(pressedKey).length>0){ // checks if the object 'pressedKey' contains atleast one key
    loadMenu()
}

However I recommend checking for the key press directly inside the key listener:

var inputEnabled = true
var menuLoaded = false; // this will indicate if the menu is loaded already
var pressedKey = {}
window.addEventListener('keydown', function (e) {
    if(!menuLoaded){ // check if menu is not open
        loadMenu()
        menuLoaded = true
    }
    pressedKey[e.keyCode || e.which] = true;
}, true);
window.addEventListener('keyup', function (e) {
    pressedKey[e.keyCode || e.which] = false;
}, true);

answered Apr 22 '17 at 11:48

Manuel Otto

6,410
1
18
25

Thank you all and Manuel the thing is that its supposed to load main menu of my js game [http://imgur.com/a/7sMSW](http://imgur.com/a/7sMSW) and then pressing any key again will select the first option "New Game" on the menu screen... But yeah I'm gonna try the solution with checking the length of pressedKey value. Thanks – squishyu Apr 22 '17 at 12:14
Ah ok, your question was more general. To check if a specific key was pressed use "if(pressedKey[13])" inside your keyBinding function. 13 is the keycode, which in this case is the enter key. Use this nifty page to find out other key codes: http://keycode.info/ – Manuel Otto Apr 22 '17 at 18:46
Yeah already figured that out :D Now the pain in the ass is going to be finishing the tile map of my first game map... From what I heard having canvas to render multiple tile maps as layers slows the game down... Here is my semi-working demo if you want to try... [https://drive.google.com/file/d/0Bw1FfakKLvDKZm1ER3hZakR3Q2c/view?usp=sharing](https://drive.google.com/file/d/0Bw1FfakKLvDKZm1ER3hZakR3Q2c/view?usp=sharing) – squishyu Apr 22 '17 at 19:11
I will also need to make the listener to wait before receiving any input because right now when I press enter it skips "save menu" and already renders my first map... – squishyu Apr 22 '17 at 19:14
Looks cool aready! I Like the styling. You should however consider making a game-state variable, which will indicate wether youre in the main menu, a sub-menu or the game itself. (eg. game_state=0 -> menu, game_state=1 -> saveslots, game_state=2 -> ingame) and then divide your key listener function into each state. Lateron this will be very useful, since othwise it will get a mess once you add more stuff. Also you should really checkout some frameworks like PixiJS or CreateJS for making games ;D – Manuel Otto Apr 23 '17 at 21:48
already did that i have a variable called renderedScene for main menu its "mainMenu" for save menu its "saveMenu" and for first map its "introMap" but I don't if it works fine for you but when i just hold enter on the main menu it skips the save menu :/ – squishyu Apr 24 '17 at 18:40
Indeed. thats because you listen for key events every 25ms, which means if you press enter for 250ms, it will count as if you pressed enter 10x in row. As i said, put the menu controlling logic directly inside the keydown listener. – Manuel Otto Apr 25 '17 at 17:53
Welll I've already managed to fix that and the thing was that I had a condition if(pressedKey[arrowUp]) at the save menu but for some reason it still ran the introMapLoad() function... And yes I had the arrowUp variable already defined... But now I'm facing a different problem. – squishyu Apr 25 '17 at 18:14

Javascript key listener press any key

1 Answers1