Question

我有一些jQuery：

    $("#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);
    });

我想要，例如，如果用户点击#blue，#yellow和#green，则推送到数组[2, 3, 4]。

然后，如果数组长度与另一个数组的长度匹配，则数组将清空并再次开始相同的过程。

然而，当我在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函数正在运行user_input，它每次调用时都会为每个按钮添加一个新的click处理程序。由于每次显示模式时都会运行show_sequence，因此每个新轮次都意味着额外的点击处理程序和按下按钮时的额外推送。

要查看此操作（在Chrome中），请检查其中一个按钮，然后在“元素”标签中单击“＆＃34;事件监听器＆＃34;在右侧面板上。如果您打开＆＃34;点击下拉菜单＆＃34;您应该能够看到当前分配的所有点击侦听器。当你开始新的回合时，会增加越来越多的听众，这就是问题的原因。

我建议只在加载页面时调用user_input以避免这种情况。

Answer 2

您有一个函数check，其中运行gen_sequence，其中运行show_sequence，其中运行user_input，其中您分配了点击事件为你的元素

每次＆＃39;检查＆＃39;运行，您在4个按钮上设置了一个新的点击事件。它运行旧的点击事件和新点击事件。

数组中的项目推送超过需要

2 个答案: