Issue
I am working on a game for a class and there is some code that won't execute if I execute another part of the code sorry this problem is hard to explain but I would like to get some help. I will link the fiddle here so you can see the code in action https://jsfiddle.net/Gamebit/96mLcfxw/
this is the code that won't work
//this is the code that wont work
if(moveKey.key === 'a'){
$("#bidenHead").animate({marginLeft: "+250px"}, 500, function(){});
$("#body").animate({marginLeft: "+295px"}, 565, function(){});
$("#leftArm").animate({marginLeft: "+268px"}, 645, function(){});
$("#rightArm").animate({marginLeft: "+323px"}, 450, function(){});
$("#rightLeg").animate({marginLeft: "+328px"}, 625, function(){});
$("#leftLeg").animate({marginLeft: "+260px"}, 450, function(){});
}
//if I execute this code the above wont execute
if(moveKey.key === 'd') {
$("#bidenHead").animate({right: "250px"}, 500, function(){});
$("#body").animate({right: "295px"}, 565, function(){});
$("#leftArm").animate({right: "322px"}, 645, function(){});
$("#rightArm").animate({right: "267px"}, 450, function(){});
$("#rightLeg").animate({right: "260px"}, 625, function(){});
$("#leftLeg").animate({right: "330px"}, 450, function(){});
}
})
heres the css if you need it
img {
position: absolute;
border-radius: 100px;
height: 100px;
width: 100px;
margin-left: 510px;
margin-top: 200px;
}
.stickBody {
position: absolute;
background-color: black;
width: 5px;
height: 100px;
margin-left: 556px;
margin-top: 300px;
}
.stickArmLeft {
position: absolute;
transform: rotate(45deg);
background-color: black;
width: 5px;
height: 80px;
margin-left: 528px;
margin-top: 300px;
}
.stickArmRight {
position: absolute;
transform: rotate(135deg);
background-color: black;
width: 5px;
height: 80px;
margin-left: 585px;
margin-top: 300px;
}
.stickLegLeft {
position: absolute;
transform: rotate(45deg);
background-color: black;
width: 5px;
height: 100px;
margin-left: 522px;
margin-top: 385px;
}
.stickLegRight {
position: absolute;
transform: rotate(135deg);
background-color: black;
width: 5px;
height: 100px;
margin-left: 590px;
margin-top: 385px;
}
p1 {
position: absolute;
top: 100px;
}
p2 {
position: absolute;
top: 70px;
}
p3 {
position: absolute;
top: 400px;
left: 1056px;
}
p4 {
position: absolute;
top: 370px;
left: 1045px;
}
Solution
The code for "a" is executing it's just that the "marginLeft" property doesn't move the figure.
If you replaced it with using the "right" property like you do with "d", but with different offsets like how you use the "top" property in "w" and "s" then it will work like you intended.
There are probably better ways to handle moving the figure, but that is the issue you are seeing.
Answered By - Kyle Shindledecker
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.