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

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

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

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

JavaScript动画无法按预期执行

1 个答案: