JavaScript 动画不会按预期执行

Question

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

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

};

Answer 1

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

Stack Overflow 并不是真正为一般 "I have no idea why these 100 lines of code don't work" 类型的问题设计的。它专为特定 "I thought this line of code did ABC, but instead it did XYZ" 类型的问题而设计。

为此，您需要养成小块工作的习惯。看起来您已经尝试一次编写整个动画，这只会让您陷入这样的境地，它无法正常工作，您也不知道为什么。相反，一次处理一小块：你能让一条线在屏幕上移动吗？使其完美运行，然后添加与第一行一起移动的另一行。然后你可以 post 一个更具体的问题。推荐阅读：How to Program

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

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

现在，为什么 您的代码会这样做，这是您必须回答的问题。同样，我会从一个只做一件事的小程序开始。开始工作，如果您遇到困难，然后回到这里提出更具体的问题。祝你好运。

JavaScript 动画不会按预期执行

JavaScript Animation will not perform as intended

javascript

variables

processing.js