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()はどこにありますか？

スタックオーバーフローは実際には一般的には設計されていません "なぜこれらの100行のコードが機能しないのかわかりません"タイプの質問。これは具体的に設計されています。「このコード行はABCでしたが、代わりにXYZを実行しました」という質問がありました。

これを助けるには、小さな塊で作業する習慣に入る必要があります。一度にこのアニメーション全体をプログラムしようとしたようです。このような状況に陥ることはありません。なぜなら、それがうまくいかず、理由が分かりません。代わりに、一度に1つの小さな部品で作業してください：画面上を1行移動できますか？その作業を完璧にしてから、その最初の行に移動する別の行を追加します。その後、より具体的な質問を投稿することができます。お勧めの読書：How to Program

あなたがしなければならないことは、あなたのプログラムをデバッグすることです。まず、ifステートメント内にconsole.log()ステートメントを追加することから始めます。

これは、コードが常にif(ham1X <= 215){ステートメントを入力し、その中にすべての変数を設定していることを示します。そのため、フレームごとにこれらの変数を設定しているため、何も動いていないことがわかります。

今、なぜあなたのコードはあなたが答えなければならないものです。繰り返しますが、私はちょうど1つのことをする小さなプログラムから始めます。それを稼働させ、つづればより具体的な質問でここに戻ってください。がんばろう。