JavaScript Animation will not perform as intended

问题

I'm trying to start making a game and while coding the animation for the stickman's legs the animation the legs seem to glitch out and just go from point a to point b when I start the program. Ind I can't figure out what is wrong. Here is my code.

var grassY = 370;
var bodyX = 200;
var ham1X = 220;
var ham1Y = 350;
var ham2X = 185;
var ham2Y = 350;
var foot1X = 230;
var foot1Y = 365;
var foot2X = 165;
var foot2Y = 340;
var bodyhigh = 315;
var bodylow = 340;

fill(4, 255, 0);
rect(-1,grassY,401,31);



draw = function() {
    var cn = 2;
    var bcn = 0;
    background(255, 255, 255);
    fill(4, 255, 0);
    rect(-1,grassY,401,31);
    line(bodyX,bodylow,bodyX,bodyhigh);
    line(bodyX,bodylow,ham1X,ham1Y);
    line(ham1X,ham1Y,foot1X,foot1Y);
    line(bodyX,bodylow,ham2X,ham2Y);
    line(ham2X,ham2Y,foot2X,foot2Y);

    if(bcn === 0){
        if(cn===2){
            ham1X -= 0.5;//-5
            ham1Y += 0.5;//+5
            ham2X += 1;//+10
            ham2Y += 0.5;//+5
            foot1X -= 2.5;//-25
            foot1Y = 365;//0
            foot2X -= 1.5;//-15
            foot2Y += 0.5;//+5
        }
        if(ham1X <= 215){
            ham1X = 215;//-5
            ham1Y = 355;//+5
            ham2X = 195;//10
            ham2Y = 355;//+5
            foot1X = 205;//-25
            foot1Y = 365;//0
            foot2X = 180;//-15
            foot2Y = 350;//+5
            cn = 11;
        }
        if(cn === 11){
            ham1X -= 3;//-30
            ham1Y -= 0.5;//-5
            ham2X += 2.5;//+25
            ham2Y -= 0.5;//-5
            foot1X -= 4;//-40
            foot1Y -= 2.5;//-25
            foot2X += 5;//+50
            foot2Y += 1.5;//+15
        }
    }
    if(ham1X <= 185){

        cn = 3;
        bcn = 1;
    }
    if(cn === 3){
        ham1X += 3;//-30
        ham1Y += 0.5;//-5
        ham2X -= 2.5;//+25
        ham2Y += 0.5;//-5
        foot1X += 4;//-40
        foot1Y += 2.5;//-25
        foot2X -= 5;//+50
        foot2Y -= 1.5;//+15
        cn = 4;
    }
    if(ham1X >= 215){
        ham1X = 215;//-5
        ham1Y = 355;//+5
        ham2X = 195;//10
        ham2Y = 355;//+5
        foot1X = 205;//-25
        foot1Y = 365;//0
        foot2X = 180;//-15
        foot2Y = 350;//+5
        cn = 5;
    }
    if(cn === 5){
        ham1X += 0.5;//-5
        ham1Y -= 0.5;//+5
        ham2X -= 1;//+10
        ham2Y -= 0.5;//+5
        foot1X += 2.5;//-25
        foot1Y = 365;//0
        foot2X += 1.5;//-15
        foot2Y -= 0.5;//+5
    }
    if(ham1X >= 220){
        cn = 2;
        bcn = 0;
    }

};

回答1:

Is this Processing.js or P5.js? Either way, please try to provide an MCVE that we can run. Where's your setup() function?

Stack Overflow isn't really designed for general "I have no idea why these 100 lines of code don't work" type questions. It's designed for specific "I thought this line of code did ABC, but instead it did XYZ" type questions.

To help with that, you need to get into the habit of working in smaller chunks. It looks like you've tried to program this entire animation at one time, which is just going to get you into situations like this, where it's not working and you have no idea why. Instead, work on one small piece at a time: can you get a single line moving across the screen? Get that working perfectly, then add another line that moves with that first line. Then you can post a more specific question. Recommended reading: How to Program

That being said, the next thing you need to do is debug your program. I'd start by adding console.log() statements inside every single if statement.

That will tell you that your code always enters the if(ham1X <= 215){ statement, and inside that you're setting all of the variables. That's why you aren't seeing anything move, because you're setting those variables every frame.

Now, why your code does that is something you're going to have to answer. Again, I'd start with a smaller program that just does one thing. Get that working, and then come back here with a more specific question if you get stuck. Good luck.

来源：https://stackoverflow.com/questions/42494313/javascript-animation-will-not-perform-as-intended