JavaScript 动画不会按预期执行 [英] JavaScript Animation will not perform as intended

问题描述

我正在尝试开始制作游戏，在为火柴人的腿编写动画时，腿的动画似乎出现故障，并且在我启动程序时从 a 点移动到 b 点.Ind我不知道出了什么问题.这是我的代码.

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

};

推荐答案

这是 Processing.js 还是 P5.js?无论哪种方式，请尝试提供我们可以运行的 MCVE.你的 setup() 函数在哪里?

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 并不是为一般的我不知道为什么这 100 行代码不起作用"类型的问题而设计的.它是为特定的我认为这行代码做了 ABC，但它做了 XYZ"类型的问题而设计的.

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

话虽如此，接下来您需要做的就是调试程序.我首先在每个 if 语句中添加 console.log() 语句.

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.

这会告诉您您的代码总是进入 if(ham1X <= 215){ 语句，并且在其中设置所有变量.这就是为什么您没有看到任何移动的原因，因为您每帧都在设置这些变量.

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.

这篇关于JavaScript 动画不会按预期执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！