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