JavaScript動畫將無法按預期執行

Question

我正在嘗試開始製作遊戲，並且在爲火柴人的腿編寫動畫時，動畫腿似乎會毛刺出來，並且當我啓動程序時從點a到點b 。 Ind我無法弄清楚什麼是錯的。這是我的代碼。

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()功能在哪裏？

堆棧溢出不是真的爲一般「我不知道爲什麼這100行代碼不工作」類型的問題。它專爲特定的「我認爲這行代碼做了ABC，而是它做了XYZ」類型的問題。

爲了解決這個問題，你需要養成小塊工作的習慣。它看起來像你試圖一次編程這整個動畫，這只是讓你陷入這樣的情況，它不工作，你不知道爲什麼。相反，一次只能做一件小事：你能在屏幕上移動一條線嗎？完美地工作，然後添加另一條隨第一條線移動的線。然後，您可以發佈更具體的問題。推薦閱讀：How to Program

這就是說，接下來你需要做的是調試你的程序。我會開始在每個if聲明中添加console.log()聲明。

這會告訴你，你的代碼總是輸入if(ham1X <= 215){聲明，並且在其中設置所有變量。這就是爲什麼你沒有看到任何動作，因爲你每幀都要設置這些變量。

現在，爲什麼你的代碼確實是你要回答的問題。再次，我會從一個只做一件事的小程序開始。得到這個工作，然後回到這裏，如果你遇到困難，可以帶一個更具體的問題。祝你好運。