SOURCE

window.addEventListener("keyup", (e) => {
  switch (e.key) {
    case "ArrowLeft":
      update();
      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":
      update();
      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":
      update();
      icon.style.top = parseInt(icon.style.top) - moveBy + "px";
      break;
    case "ArrowDown":
      update();
      icon.style.top = parseInt(icon.style.top) + moveBy + "px";
  }
  verifyThePosition();
  verifyThePosition2();
  verifyThePosition3();
  verifyThePosition4();
  // verifyThePosition2(targetButton);
});

function openShop() {
  // shopWindow.classList.add('show');
}
// shopBtn.addEventListener('click', )
function verifyThePosition() {
  // console.log(icon.style.left, icon.style.top)
  if (icon.style.left == "650px" && icon.style.top == "50px") {
    let selectedModal = "modal";
    rn = Math.floor(Math.random() * 45) + 1;
    console.log(rn);
    document.querySelector("#modal" + rn).classList.add("show");
  }
}

function verifyThePosition2() {
  // console.log(icon.style.left, icon.style.top) 
  if (icon.style.left == "375px" && icon.style.top == "325px") {
    let selectedModal = "modal";
    rn = Math.floor(Math.random() * 45) + 1;
    console.log(rn);
    document.querySelector("#modal" + rn).classList.add("show");
  }
}

function verifyThePosition3() {
  // console.log(icon.style.left, icon.style.top)
  if (icon.style.left == "700px" && icon.style.top == "600px") {
    let selectedModal = "modal";
    rn = Math.floor(Math.random() * 45) + 1;
    console.log(rn);
    document.querySelector("#modal" + rn).classList.add("show");
  }
}

function verifyThePosition4() {
  // console.log(icon.style.left, icon.style.top)
  if (icon.style.left == "875px" && icon.style.top == "75px") {
    let selectedModal = "modal";
    rn = Math.floor(Math.random() * 45) + 1;
    console.log(rn);
    document.querySelector("#modal" + rn).classList.add("show");
  }
}

<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>

.stickman {
  transition: 300ms ease-in;
  height: 5em;
  width: 5em;
  position: absolute;
  /* top: 50%;
  left: 50%; */
  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);
  }
}