Tell the library which in js can manage keystrokes

I am looking for a library that would normally handle keystrokes. For example, I press the A key and then I press the W key and the character must move to the left and up. Maybe I initially did not correctly try to move the character. The script works like this, I press it to the left, it moves to the left, I press up and it stops, then if there is an A + W script, then it moves up with a delay. And it turns out if on the contrary I run up and then press to the left, then there should be a W + A script. When I press W + D there is no movement at all. Here is a sample code:

var renderer = PIXI.autoDetectRenderer(800, 600); $(document).ready(function() { $('body').append(renderer.view); $('body').click(function(e) { player.target.x = e.clientX; player.target.y = e.clientY; player.distance(); player.active_move = 1; }); $('body').mousemove(function(e) { player.target.x = e.clientX; player.target.y = e.clientY; player.loock(); }); $(document).keyboard( 'a', function(e, bind) { // player.body.position.x -= 1; player.left = 1; } ); $(document).keyboard( 's', function(e, bind) { player.down = 1; } ); $(document).keyboard( 'w', function(e, bind) { player.top = 1; } ); $(document).keyboard( 'd', function(e, bind) { player.right = 1; } ); $(document).keyboard( 'a+s', function(e, bind) { player.down = 1; player.left = 1; } ); $(document).keyboard( 's+d', function(e, bind) { player.right = 1; player.down = 1; } ); $(document).keyboard( 'w+a', function(e, bind) { player.top = 1; player.left = 1; } ); $(document).keyboard( 'w+d', function(e, bind) { player.top = 1; player.down = 1; } ); }); // create the root of the scene graph var stage = new PIXI.Container(); PIXI.loader .add('frames/walck.json') .load(onAssetsLoaded); var player; function onAssetsLoaded() { // create an array to store the textures player = new player(); // start animating requestAnimationFrame(animate); } function player() { this.hp = 100; this.level = 1; this.vector_to_target = { x: 100, y: 100 }; this.target = { x: 100, y: 100 }; this.speed = 1; this.body = null; this.texture = null; this.textures = []; this.active_move = 0; this.distance = function() { return Math.sqrt(Math.pow(this.target.x - this.body.position.x, 2) + Math.pow(this.target.y - this.body.position.y, 2)); } this.loock = function() { //Поворот this.vector_to_target.x = this.target.x - this.body.position.x; this.vector_to_target.y = this.target.y - this.body.position.y; this.body.rotation = Math.atan2(this.vector_to_target.y, this.vector_to_target.x); } this.move = function() { //Поворот this.vector_to_target.x = this.target.x - this.body.position.x; this.vector_to_target.y = this.target.y - this.body.position.y; this.body.rotation = Math.atan2(this.vector_to_target.y, this.vector_to_target.x); //Движение this.modul_target = Math.sqrt(this.vector_to_target.x * this.vector_to_target.x + this.vector_to_target.y * this.vector_to_target.y); this.body.position.x += this.speed * this.vector_to_target.x / this.modul_target; this.body.position.y += this.speed * this.vector_to_target.y / this.modul_target; } this.test_move = function(nav) { switch (nav) { case 'left': this.body.position.x -= 10; this.left = 0; break; case 'right': this.body.position.x += 10; this.right = 0; break; case 'top': this.body.position.y -= 10; this.top = 0; break; case 'down': this.body.position.y += 10; this.down = 0; break; } } var i; for (i = 0; i < 12; i++) { this.texture = PIXI.Texture.fromFrame('walck' + i + '.png'); this.textures.push(this.texture); } this.body = new PIXI.extras.MovieClip(this.textures); this.body.anchor = { x: 0.5, y: 0.5 }; this.body.position = { x: 200, y: 200 }; this.body.animationSpeed = 0.4; this.body.play(); stage.addChild(this.body); setInterval(this.animate.bind(this), 10); } player.prototype.animate = function() { console.log(this.target); console.log(this.distance()); if (this.distance() < 10) this.active_move = 0; if (this.right) { this.test_move('right'); } if (this.left) { this.test_move('left'); } if (this.top) { this.test_move('top'); } if (this.down) { this.test_move('down'); } } function animate() { renderer.render(stage); requestAnimationFrame(animate); }