캐릭터가 점프하면서 앞으로 나아가게 만들고있습니다

점프하면 앞으로 나가게는 만들었는데 방향이 left인 상태에서 점프를 up하면 right을 향한채로 뒤로 점프하게 됩니다.

계속 생각해보다가 도무지 모르겠어서 질문드립니다..!

up에서 기본으로 방향이 right으로 향하는거 같은데 어떻게 해결해야할까요

   if (key.keyDown["right"] && key.keyDown["up"]) {
      this.el.classList.add("jump_run");
      this.el.classList.remove("run");
      this.el.classList.remove("jump");
      this.el.classList.remove("flip");
      this.direction = "right";

      this.moveY = this.moveY - this.jump;
      this.moveX = this.moveX + this.speed;
      setTimeout(() => {
        this.el.classList.remove("jump_run");
        this.el.classList.add("run");
      }, 300);
    } else if (key.keyDown["left"] && key.keyDown["up"]) {
      this.el.classList.add("jump_run_back");
      this.el.classList.add("flip");

      this.el.classList.remove("run");
      this.el.classList.remove("jump");
      this.direction = "left";

      this.moveY = this.moveY - this.jump;
      this.moveX = this.moveX - this.speed;
      setTimeout(() => {
        this.el.classList.remove("jump_run_back");
      }, 300);
 
////// 이하 CSS
.hero_box .hero.flip {
  transform: rotateY(180deg);
}

.hero_box .hero.jump {
  animation: hero_jump 0.5s 1;
}

.hero_box .hero.jump_run {
  animation: hero_jump_run 0.5s 1;
}

.hero_box .hero.jump_run_back {
  background-size: 1498px 182px;
  animation: hero_jump_run_back 0.5s 1;
}
 
@keyframes hero_jump_run_back {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-25px, -150px);
  }
  100% {
    transform: translate(-40px, 0);
  }
}

@keyframes hero_jump_run_back_flip {
  0% {
    transform: rotateY(180deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

인프런 커뮤니티 질문&답변