При изменении движения происходят большие скачки — как можно исправить?

Question

[Alexander9292]

Написал обработчик события для keydown, который будет принимать callback-функцию.
Данная функция будет отлавливать нажатие на стрелки клавиатуры. В зависимости от нажатой кнопки(Вверх - стрелка вверх, Влево - стрелка влево, Вправо - стрелка вправо, Вниз - стрелка вниз) квадрат будет перемещаться на 10 пикселей.

НО При изменении движения происходят большие скачки куба.
Как можно это исправить?
Песочница

Answer 1

[0xD34F]

Количество переменных, хранящих координаты, следует привести в соответствие с количеством осей, по которым осуществляется перемещение. А то переменная одна, а осей две. Как вы собираетесь два независимых значения хранить в одной переменной? Это абсурд - два (сейчас внимание, будет сногсшибательный факт) больше одного.

Или сделайте объект/массив, который будет содержать обе координаты:

const coord = [ 0, 0 ];
const step = 10;

const moveFunc = e => {
  const shift = ({
    ArrowUp: [ 0, -1 ],
    ArrowDown: [ 0, 1 ],
    ArrowLeft: [ -1, 0 ],
    ArrowRight: [ 1, 0 ],
  })[e.code];

  if (shift) {
    div.style.left = `${coord[0] += shift[0] * step}px`;
    div.style.top = `${coord[1] += shift[1] * step}px`;
  }
};