JavaScript Animation wird nicht wie vorgesehen funktionieren

Question

Ich versuche, ein Spiel zu machen und während der Animation für die Beine des Stickman die Animation die Beine scheinen zu glitch und gehen Sie einfach von Punkt A nach Punkt b, wenn ich das Programm starte . Ind Ich kann nicht herausfinden, was falsch ist. Hier ist mein 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; 
    } 

}; 

Answer 1

Ist dies Processing.js oder P5.js? Wie auch immer, bitte versuchen Sie, eine MCVE bereitzustellen, die wir ausführen können. Wo ist deine setup() Funktion?

Stack Overflow ist nicht wirklich für allgemeine "Ich habe keine Ahnung, warum diese 100 Zeilen Code nicht funktionieren" Typ Fragen. Es ist speziell für "Ich dachte, diese Codezeile hat ABC, aber stattdessen hat es XYZ" Fragen geben.

Um damit zu helfen, müssen Sie sich angewöhnen, in kleineren Brocken zu arbeiten. Es sieht so aus, als hättest du versucht, die gesamte Animation auf einmal zu programmieren, was dich in Situationen wie diese bringen wird, in denen es nicht funktioniert und du keine Ahnung hast warum. Arbeiten Sie stattdessen an einem kleinen Stück nach dem anderen: Können Sie eine einzelne Linie über den Bildschirm bewegen? Lassen Sie das perfekt funktionieren und fügen Sie eine weitere Zeile hinzu, die sich mit dieser ersten Zeile bewegt. Dann können Sie eine spezifischere Frage stellen. Empfohlener Wert: How to Program

Das Gesagte, das nächste, was Sie tun müssen, ist Ihr Programm zu debuggen. Ich würde damit beginnen, console.log() Anweisungen in jeder einzelnen if Anweisung hinzuzufügen.

Das wird Ihnen sagen, dass Ihr Code immer die if(ham1X <= 215){ Anweisung eingibt, und darin setzen Sie alle Variablen. Das ist der Grund, warum Sie nichts bewegen sehen, weil Sie diese Variablen in jedem Frame setzen.

Jetzt, Warum Ihr Code ist etwas, was Sie beantworten müssen. Wieder würde ich mit einem kleineren Programm beginnen, das nur eine Sache macht. Lassen Sie das funktionieren, und kommen Sie dann mit einer spezifischeren Frage zurück, wenn Sie nicht weiterkommen. Viel Glück.