I have a system in place for capturing and registering arrow key input. It works up until a point. It correctly registers if a number of keys are pressed at the same time as long as two or less are pressed. If a third or forth are pressed together it stops firing keydown events. Please see this jsFiddle and view the console's output.
Is it a limitation set in place by the browser or is my code wrong? Any help would be much appreciated.
Here is the code:
var keysPressed = { 37: false, 38: false, 39: false, 40: false }; var LEFT = 'left'; var RIGHT = 'right'; var UP = 'up'; var DOWN = 'down'; var ON = '_on'; var OFF = '_off' document.addEventListener('keydown', function(evt){ var keycode = evt.keyCode; if(!checkKeyPressed(keycode)){ keysPressed[keycode] = true; switch(keycode){ case 37: registerInput(LEFT+ON); break; case 38: registerInput(UP+ON); break; case 39: registerInput(RIGHT+ON); break; case 40: registerInput(DOWN+ON); break; default: break; } } }); document.addEventListener('keyup', function(evt){ var keycode = evt.keyCode; if(checkKeyPressed(keycode)){ keysPressed[keycode] = false; switch(keycode){ case 37: registerInput(LEFT+OFF); break; case 38: registerInput(UP+OFF); break; case 39: registerInput(RIGHT+OFF); break; case 40: registerInput(DOWN+OFF); break; default: break; } } }); function checkKeyPressed(keycode){ if (keysPressed === null) { return false; } else return keysPressed[keycode]; } function registerInput(inputType){ console.log(keysPressed); //Game.Engine.playerInput(inputType); }