SImon说Javascript

Question

所以我想制作一个西蒙说用功能like this的游戏。

我有以下代码：

HTML     

<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>

<div id="count"></div>
<div id="buttons">
   <button id="1" type="button" class="btn btn-default"onclick="add_sequence()">Simple </button>
   <button id="2" type="button" class="btn btn-default">Strict </button>
   <button id="3" type="button" class="btn btn-default">Restart</button>
</div>

JAVASCRIPT

var sequence = ["#red", "#blue", "#yellow", "#green","#red"];  //etc.
var human = []; 
var i = 0;

function add_sequence() {
   human.push(sequence[i])
   animate(human);

   $("" + human[i] + "").click(function() {
      human.push(sequence[i])
      animate(human);
      i++;     
   }

   function animate(s) {
      var i = 0;
      var interval = setInterval(function() {

      anim(s[i]);
      i++;
      if (i >= s[i].length) {
         clearInterval(interval);
      }
   }, 500);
}

function anim(id) {

  $("" + id + "").delay(500)
     .animate({
       opacity: 1
     }, 300)
     .animate({
       opacity: 0.5
     }, 300)
}

我的想法是每次点击一个按钮或一系列按钮（等等......），就会从序列数组中向人类数组中添加一个元素。通过这种方式，下一轮将增加一个照明按钮。

但我无法使用此代码执行此操作，因为仅当我单击第一个按钮（#red）时才会完成照明按钮的增量，而不是在我单击正确的按钮序列时。