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

为了解决这个问题，您需要养成分小块工作的习惯。看起来你试图一次对整个动画进行编程，这只会让你陷入这样的情况，它不起作用而且你不知道为什么。相反，一次只做一小块：你能在屏幕上移动一条线吗？让它完美地工作，然后添加与第一行一起移动的另一行。然后你可以发布一个更具体的问题。推荐阅读：How to Program

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

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

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