Question

Diagonal move not working and issue on left-longPress/right simultaneous

But on double keypress the ship goes crazy!

$(document).bind('keydown', function(e) {
    var box = $("#plane"),
        left = 37,
        up = 38,
        right = 39,
        down = 40

    if (e.keyCode == left) {
        box.animate({left: "-=5000"},3000);
    }
    if (e.keyCode == up) {
        box.animate({top: "-=5000"},3000);
    }
    if (e.keyCode == right) {
        box.animate({left:"+=5000"},3000);
    }
    if (e.keyCode == down) {
        box.animate({top: "+=5000"},3000);
    }
});
$(document).bind('keyup', function() {
    $('#plane').stop();
});

Answer 1

Relying on keyboard events to move an element will make it dependent on the OS key-interval delay. Instead, use the game interval and check the pressed keys stored inside an Object

On keydown keyup events, if the keyCode returned by event.which is >=37 && <=40 means arrow keys were used. Store inside a K (keys) Object a boolean value for key-number property.

Interval:

Inside a window.requestAnimationFrame increase or decrease the x, y position of your element if a key-number property (inside our K object) is true (if(K[37])).

Diagonal movement:

Moving an element diagonally using simultaneously i.e. the ↑ and → needs a compensation for the diagonal distance: 1 / Math.sqrt(2) (0.7071..)

const Player = {
  el: document.getElementById('player'),
  x: 200,
  y: 100,
  speed: 2,
  move() {
    this.el.style.transform = `translate(${this.x}px, ${this.y}px)`;
  }
};

const K = {
  fn(ev) {
    const k = ev.which;
    if (k >= 37 && k <= 40) {
      ev.preventDefault();
      K[k] = ev.type === "keydown"; // If is arrow
    }
  }
};

const update = () => {
  let dist = K[38] && (K[37] || K[39]) || K[40] && (K[37] || K[39]) ? 0.707 : 1;
  dist *= Player.speed;
  if (K[37]) Player.x -= dist;
  if (K[38]) Player.y -= dist;
  if (K[39]) Player.x += dist;
  if (K[40]) Player.y += dist;
  Player.move();
}

document.addEventListener('keydown', K.fn);
document.addEventListener('keyup', K.fn);

(function engine() {
  update();
  window.requestAnimationFrame(engine);
}());

#player{
  position: absolute;
  left: 0;  top: 0;
  width: 20px;  height: 20px;
  background: #000;  border-radius: 50%;
}

Click here to focus, and use arrows
<div id="player"></div>

or here’s a slight remake using new Set() to keep record of the currently pressed keyboard keys, and new Map() to register functions for every pressed key:

const Player = {
  el: document.querySelector("#player"),
  x: 200,
  y: 100,
  speed: 2,
  move() {
    this.el.style.translate = `${this.x}px ${this.y}px`;
  }
};

const getDistance = () => Player.speed * ((kbd.has("ArrowUp") || kbd.has("ArrowDown")) && (kbd.has("ArrowLeft") || kbd.has("ArrowRight")) ? 0.707 : 1);

// Watch pressed keyboard keys:
const kbd = new Set();
const handleArrowKeys = (evt) => {
  if (!keyActions.has(evt.key)) return; // Do nothing. Not a registered key
  evt.preventDefault(); // Prevent browser default action
  kbd[evt.type === "keydown" ? "add" : "delete"](evt.key); // Add or delete a key
};
addEventListener("keydown", handleArrowKeys);
addEventListener("keyup", handleArrowKeys);

// Register keyboard keys actions
// Set a desired function for every desired key:
const keyActions = new Map();
keyActions.set("ArrowRight", () => {
  Player.x += getDistance();
});
keyActions.set("ArrowLeft", () => {
  Player.x -= getDistance();
});
keyActions.set("ArrowUp", () => {
  Player.y -= getDistance();
});
keyActions.set("ArrowDown", () => {
  Player.y += getDistance();
});

const engine = () => {
  // Trigger a keyAction for pressed keys
  kbd.forEach((key) => keyActions.get(key)());
  Player.move();
  requestAnimationFrame(engine);
};

engine();

#player { position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: #000; border-radius: 50%; }

Click here to focus, and use arrow keys
<div id="player"></div>