Facing my stickman in the correct way

I’m making an educational online board game and I have made I
stickman as the main character. I use arrow keys for the user to
guide him along the board.

I am trying to make him face the way he’s going but I’ve only
managed to make his eyes and mouth face the opposite way. His arms
keep swaying forward in odd manners that change every time I hit
the arrow key.

I was wonder If anybody could spot my error. I have surfed the
internet and rewritten the code in many ways to no avail.

To control the stickman, use the arrow keys.

Here is the important code:

var icon = document.querySelector(".stickman");
var eye = document.querySelector(".eye");
var mouth = document.querySelector(".mouth");
var arm1 = document.querySelector(".arm");
let moveBy = 25;
icon.style.position = "absolute";
icon.style.left = 0;
icon.style.top = 0;
var arm_after1 = document.querySelector(".arm::after");
window.addEventListener("keyup", (e) => {
  switch (e.key) {
    case "ArrowLeft":
      icon.style.left = parseInt(icon.style.left) - moveBy + "px";
      eye.style.right = 65 + "%";
      mouth.style.right = 40 + "%";
      arm1.style.animation = "walk-arm2 1s infinite";
      arm_after1.style.animation = " walk-arm-after2 1s infinite";
      break;
    case "ArrowRight":
      icon.style.left = parseInt(icon.style.left) + moveBy + "px";
      eye.style.right = 25 + "%";
      mouth.style.right = 0 + "%";
      arm1.style.animation = " walk-arm 1s infinite";
      arm_after1.style.animation = "walk-arm-after 1s infinite";
      break;
    case "ArrowUp":
      
      icon.style.top = parseInt(icon.style.top) - moveBy + "px";
      break;
    case "ArrowDown":
      
      icon.style.top = parseInt(icon.style.top) + moveBy + "px";
  }
});
  .stickman {
  transition: 300ms ease-in;
  height: 5em;
  width: 5em;
  position: absolute;
  /* top: 50%;
  left: 50%; */
  margin-top: -10em;
  margin-left: -5em;
  border-bottom: 0.1em solid;
  animation: 0.5s walk-body ease-in infinite;
  z-index: 10;
}

.stickman .head {
  height: 2em;
  width: 2em;
  position: absolute;
  top: 48px;
  left: 25%;
  background-color: #111;
  border-radius: 100%;
}

.stickman .head .eye {
  height: 0.225em;
  width: 0.225em;
  position: absolute;
  top: 32.5%;
  right: 25%;
  background: #fff;
  border-radius: 100%;
}

.stickman .head .mouth {
  height: 0.1125em;
  width: 1.2285714286em;
  position: absolute;
  bottom: 25%;
  right: 0;
  transform: rotate(11.25deg);
  background-color: #fff;
}

.stickman .body {
  height: 3.6666666667em;
  width: 0.325em;
  position: absolute;
  top: 5em;
  left: 50%;
  margin-left: -0.3125em;
  background-color: #111;
}

.stickman .body .arm {
  height: 2em;
  width: 0.325em;
  position: absolute;
  top: 0;
  transform: rotate(-45deg);
  transform-origin: top;
  background: #111;
  animation: 1s walk-arm infinite;
}

.stickman .body .arm#left {
  animation-delay: 0.5s;
  background: #222;
}

.stickman .body .arm#left::after {
  animation-delay: 0.5s;
  background: #222;
}

.stickman .body .arm::after {
  content: "";
  height: 1.3333333333em;
  width: 0.325em;
  position: absolute;
  bottom: 0;
  transform: rotate(90deg);
  transform-origin: right bottom;
  background: #111;
  animation: 1s walk-arm-after infinite;
}

.stickman .body .leg {
  height: 4.1666666667em;
  width: 0.325em;
  position: absolute;
  bottom: -4.1666666667em;
  transform: rotate(-90deg);
  transform-origin: top;
  background: #222;
  animation: 1s walk-leg infinite;
}

.stickman .body .leg#right {
  background: #111;
  animation-delay: 0.5s;
}

@keyframes walk-body {
  0% {
    margin-top: -11.25em;
    padding-bottom: 1.25em;
  }
  50% {
    margin-top: -10em;
    padding-bottom: 0;
  }
  100% {
    margin-top: -11.25em;
    padding-bottom: 1.25em;
  }
}

@keyframes walk-arm {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

@keyframes walk-arm-after {
  0% {
    transform: rotate(67.5deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(67.5deg);
  }
}

@keyframes walk-arm2 {
  0% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

@keyframes walk-arm-after2 {
  0% {
    transform: rotate(-67.5deg);
  }
  50% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(-67.5deg);
  }
}

@keyframes walk-leg {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(-45deg);
  }
<div class='stickman'>
  <div class='head'>
    <div class='eye'></div>
    <div class='mouth'></div>
  </div>
  <div class='body'>
    <div class='arm' id='left'></div>
    <div class='arm' id='right'></div>
    <div class='leg' id='left'></div>
    <div class='leg' id='right'></div>
  </div>
</div>

Thank you before ward,
Dimitri

If you setup a codepen you’re more likely to get help with this.

Without actually trying anything and just reading the documentation for a few CSS properties I think you need to try transform: rotateY(3.142rad);.

rotateY()
Rotates an element around the vertical axis.

rotate()
Rotates an element around a fixed point on the 2D plane.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.