Проблема с анимацией персонажа в игре
Делаю обучающую настольную игру в браузере с простым человечком как главным героем. Управление происходит через стрелки на клавиатуре для движения по игровому полю.
Хочу сделать так чтобы персонаж смотрел в сторону движения, но получается только повернуть глаза и рот в нужную сторону. Руки движутся неправильно и каждый раз при нажатии стрелки анимация выглядит странно.
Перепробовал много вариантов из интернета, переписывал код по разному, но проблема остается. Может кто то увидит где ошибка?
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); }
}