Поворот человечка в правильном направлении на JavaScript

Проблема с анимацией персонажа в игре

Делаю обучающую настольную игру в браузере с простым человечком как главным героем. Управление происходит через стрелки на клавиатуре для движения по игровому полю.

Хочу сделать так чтобы персонаж смотрел в сторону движения, но получается только повернуть глаза и рот в нужную сторону. Руки движутся неправильно и каждый раз при нажатии стрелки анимация выглядит странно.

Перепробовал много вариантов из интернета, переписывал код по разному, но проблема остается. Может кто то увидит где ошибка?

document.addEventListener("keydown", (event) => {
  switch (event.code) {
    case "ArrowLeft":
      updateGameState();
      character.style.left = parseInt(character.style.left) - stepSize + "px";
      eyeball.style.right = 70 + "%";
      smile.style.right = 45 + "%";
      leftHand.style.animation = "move-hand-reverse 1s infinite";
      handExtension.style.animation = "move-hand-part-reverse 1s infinite";
      break;
    case "ArrowRight":
      updateGameState();
      character.style.left = parseInt(character.style.left) + stepSize + "px";
      eyeball.style.right = 30 + "%";
      smile.style.right = 5 + "%";
      leftHand.style.animation = "move-hand-normal 1s infinite";
      handExtension.style.animation = "move-hand-part-normal 1s infinite";
      break;
    case "ArrowUp":
      updateGameState();
      character.style.top = parseInt(character.style.top) - stepSize + "px";
      break;
    case "ArrowDown":
      updateGameState();
      character.style.top = parseInt(character.style.top) + stepSize + "px";
  }
  checkPosition1();
  checkPosition2();
});

function checkPosition1() {
  if (character.style.left == "600px" && character.style.top == "100px") {
    randomNum = Math.floor(Math.random() * 40) + 1;
    document.querySelector("#popup" + randomNum).classList.add("visible");
  }
}
.figure {
  transition: 250ms ease-out;
  height: 4.5em;
  width: 4.5em;
  position: absolute;
  margin-top: -9em;
  margin-left: -4em;
  border-bottom: 0.15em solid;
  animation: 0.4s body-bounce ease-in infinite;
}

.figure .skull {
  height: 1.8em;
  width: 1.8em;
  position: absolute;
  top: 40px;
  left: 30%;
  background-color: #000;
  border-radius: 50%;
}

@keyframes move-hand-normal {
  0% { transform: rotate(-40deg); }
  50% { transform: rotate(40deg); }
  100% { transform: rotate(-40deg); }
}

@keyframes move-hand-reverse {
  0% { transform: rotate(40deg); }
  50% { transform: rotate(-40deg); }
  100% { transform: rotate(40deg); }
}

Добавь transform: scaleX(-1) ко всему персонажу при движении влево - он отзеркалится целиком, не придется каждый элемент позиционировать вручную. Только помни, что координаты инвертируются, логику движения нужно будет поправить. У меня в похожем проекте так получилось - руки сразу стали двигаться как надо.

Может дело в том, что анимация рук запускается каждый раз при нажатии? Попробуй создать переменную для направления и запускать анимацию только при смене направления. И еще - для движения вверх-вниз анимации вообще нет, персонаж просто прыгает. Как твой человечек выглядит сейчас?