Как сделать плавное передвижение объекта на JavaScript?

Question

[sayflame]

Возникла такая проблема, при создании передвижения для объекта (персонажа), он, при удерживании кнопки, сначала ничего не делает, и только потом бежит, но очень резко. Нужно чтобы объект двигался плавно, а также при удерживании кнопки бежал сразу, а не с "задержкой"

Вот код, который у меня есть (можете сами посмотреть, как работает и в чем проблема):

document.addEventListener('keydown', handleKeyDown);

    function handleKeyDown(event) {
      var player = document.querySelector('.player');
      var currentLeft = parseInt(player.style.left) || 0;
      var currentTop = parseInt(player.style.top) || 0;
      var move = 10;

      switch (event.code) {
        case 'ArrowLeft':
          player.style.left = currentLeft - move + 'px';
          break;
        case 'ArrowUp':
          player.style.top = currentTop - move + 'px';
          break;
        case 'ArrowRight':
          player.style.left = currentLeft + move + 'px';
          break;
        case 'ArrowDown':
          player.style.top = currentTop + move + 'px';
          break;
        default:
          break;
      }}

Answer 1

[szQocks]

пример

Comments

[sayflame]

Благодарю :)

Answer 2

[VoidVolker]

Откройте для себя requestAnimationFrame и другие туториалы по анимации.