在其他代码执行后无法工作的代码

Question

我正在为 class 开发一款游戏，如果我执行另一部分代码，有些代码将无法执行，抱歉，这个问题很难解释，但我想得到一些帮助。我将 link 和 fiddle 放在这里，这样您就可以看到实际的代码 https://jsfiddle.net/Gamebit/96mLcfxw/

这是行不通的代码

//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(){}); 
     }
  })

这里是css如果你需要它

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

Answer 1

“a”的代码正在执行，只是“marginLeft”属性没有移动图形。

如果您像使用“d”一样使用“右”属性替换它，但使用不同的偏移量，例如您在“w”中使用“顶部”属性和"s" 那么它将按照您的预期工作。

可能有更好的方法来处理移动图形，但这就是您遇到的问题。

在其他代码执行后无法工作的代码

code that wont work after other code executes

javascript

css

jquery

game-development