アイテムは、私はいくつかのjQueryを持っている

Question

を必要以上に押しました。

次に、配列の長さが別の配列の長さと一致すると、配列は空になり、同じプロセスが再び開始されます。

しかし、最初のものの後に新しいラウンドが追加されるたびに、console.logに配列の値が必要以上にプッシュされます。これは、コンソールログは、ユーザシーケンスがコンピュータのシーケンスと一致することになって、どのように見えるかです：

究極の目標は、両方の配列を比較することで、それらが一致した場合、ゲームに別のステップを追加します。ここにはfiddleがあります。小さい緑色の円をクリックしてゲームを開始するか、ラウンドを追加してください。

全体JSここ、最後の部分（function check()）私はまだ使用していない：

/*************** 
* Presets 
***************/ 
var round = 0; 
var user_count = 0; //how many times the player has pressed a button 
var strict = false; //strict mode on/off 
var user_seq = []; //the order the player has pressed the buttons 
var right_seq = []; //the right sequence of presses 

/************* 
* Start Game 
*************/ 
$("#start").click(function() { 
    //strict mode on 
    $("#strict").click(function() { 
     $(this).addClass("disabled"); 
     strict = true; 
    }); 

    gen_sequence(); 
}) 

/**************************** 
* Generate a random sequence 
****************************/ 
function gen_sequence() { 
    round++; 
    $("#round-text").text(round); //display round number 

    var n = Math.floor(Math.random() * 4) + 1; //generate a random number from 1-4 
    right_seq.push(n); //push the number to the sequence array 
    show_sequence(); 
}; 

/*********************** 
* Display the sequence 
***********************/ 
function show_sequence() { 
    var k = right_seq.length; 

    //assign each button a number 
    //when the loop goes over it that button's animation plays 
    (function animation(i) { 
    if (i >= right_seq.length) { 
     return; 
    } 
    setTimeout(function() { 
     if (right_seq[i] == 1) { 
     setTimeout(function() { 
      TweenMax.from("#pink", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut}); 
      one.play(); 
     }, 1000); 
     } else if (right_seq[i] == 2) { 
     setTimeout(function() { 
      TweenMax.from("#blue", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut}); 
      two.play(); 
     }, 1000); 
     } else if (right_seq[i] == 3) { 
     setTimeout(function() { 
      TweenMax.from("#yellow", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut}); 
      three.play(); 
     }, 1000); 
     } else { 
     setTimeout(function() { 
      TweenMax.from("#green", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut}); 
      four.play(); 
     }, 1000); 
     }; //end for loop 
     animation(++i); 
    }, 500); 
    })(0); 

    user_input(); 
} 


/******************** 
* User sequence 
********************/ 
//what the user inputs after seeing the sequence play out 
//on each click the count goes up 
//the number of the button is pushed to the user's array to be compared with the correct sequence 
function user_input() { 
    $("#pink").click(function() { 
     user_seq.push(1); 
    }); 
    $("#blue").click(function() { 
     user_seq.push(2); 
    }); 
    $("#yellow").click(function() { 
     user_seq.push(3); 
    }); 
    $("#green").click(function() { 
     user_seq.push(4); 
    }); 

    console.log("computer: " + right_seq); 
    console.log("user: " + user_seq); 

}; 

/************************************************** 
* Check if user's sequence matches the correct one 
**************************************************/ 
function check() { 

    if (right_seq.length === user_seq.length && user_seq === right_seq) { 
     if (round <= 20) { 
      //display message 
      user_seq = []; 
      right_seq = []; 
      gen_sequence(); 
      $(".circle").removeClass("disabled"); 
     } else { 
      //display message 
      //instructions to restart game 
     } 
    } else if (strict = true) { 
     round = 0; 
     user_seq = []; 
     real_seq = []; 
     //display message 
    } else { 
     show_sequence(); 
    } 

} 

Answer 1

あなたは、あなたがたの中show_sequenceを実行するの内側にgen_sequenceを実行check内部を機能を持っていますuser_inputの中に要素のクリックイベントを割り当てます

「チェック」が実行されるたびに、4つのボタンに新しいクリックイベントが設定されます。古いクリックイベントと新しいイベントが実行されています。

Answer 2

あなたのshow_sequence関数は、呼び出されるたびに新しいクリックハンドラを各ボタンに追加しているようです。 show_sequenceはパターンを表示するたびに実行されるため、新しいラウンドが追加されると、追加のクリックハンドラと、ボタンが押されたときに追加のプッシュが追加されます。

これを確認するには（Chromeの場合）、いずれかのボタンを確認し、[要素]タブの右側の[イベントリスナー]をクリックします。 「クリックドロップダウン」を開くと、現在割り当てられているすべてのクリックリスナーを表示できるはずです。あなたが新しいラウンドを開始すると、あなたの問題の原因となるリスナーがますます追加されます。

これを避けるために、ページが読み込まれるときにのみuser_inputを呼び出すことをお勧めします。