Javascript 心智游戏js：创建模式并检查用户输入

我的小脑力游戏有些问题。 我在html和css方面有一定的能力，但我仍然在与js部分斗争

我想运行两个动作（加载）来向玩家显示一个模式（一个接一个的方框变成蓝色）。然后，他需要记住它，并通过点击书写框来证明它。 欢迎提出任何意见

现在，我只有一个小函数可以在单击时切换类：

$('.box').click(function() {
  $(this).toggleClass('box');
  $(this).toggleClass('boxactive');
});

这是我的html：

<p>Try to remember the pattern and reproduce it.</p>

<div class="container">
    <div class="box" id="A"></div>
    <div class="box" id="B"></div>
    <div class="box" id="C"></div>
    <div class="box" id="D"></div>

    <div class="box" id="E"></div>
    <div class="box" id="F"></div>
    <div class="box" id="G"></div>
    <div class="box" id="H"></div>

    <div class="box" id="I"></div>
    <div class="box" id="J"></div>
    <div class="box" id="K"></div>
    <div class="box" id="L"></div>

    <div class="box" id="M"></div>
    <div class="box" id="N"></div>
    <div class="box" id="O"></div>
    <div class="box" id="P"></div>
</div>

注意：我是法国人，请原谅我的英语。

检查一下这把小提琴

我建造它的方式

所有16个方块将随机选择，图案将被存储 列队

显示模式后，将显示一条消息“准备测试” 来了

然后用户开始猜测。如果它是正确的气体，那么它会 变成绿色，否则它会变成红色

有无限的机会：）即 我可以多次单击红色框

当所有16个盒子都变成绿色时 i、 我记得所有的16个盒子，然后你赢的信息会出现“你赢了”

我写的Javascript

$(document).ready(function(){
        var readyToTest=false;
    var elemCntr=0;
    $('.box').click(function(e) {
      console.log("cleicked");
            if(readyToTest==true){
        debugger
                if($(e.currentTarget).attr('id')==computerFormedArray[elemCntr]){
            $(e.currentTarget).css('background','green');
          $(e.currentTarget).unbind('click');
          computerFormedArray.splice(elemCntr,1);
          if(computerFormedArray.length==0){
            $(".parth").html("<h1>YOuuu Won</h1>")
          }
        }else{
            $(e.currentTarget).css('background','red');
        }
            }else{
      $(this).toggleClass('box');
      $(this).toggleClass('boxactive');
     } 
    });

    function reinitializeCounter(){
      elemCntr=0;
    }


        var allBoxes=$('.box');
        var shuffledArr=shuffle(allBoxes);
    console.log(shuffledArr);
    var cntr=1000;
    var computerFormedArray=[];
    for(var i=0;i < shuffledArr.length;i++){
                console.log($(shuffledArr[i]).attr('id'));
                computerFormedArray.push($(shuffledArr[i]).attr('id'));
                doSetTimeOut($(shuffledArr[i]),cntr);
          doSetTimeOut($(shuffledArr[i]),cntr+1000);
            cntr+=1000;
     }

     setTimeout(function(){
        $('.readyToTest').html("Ready To Test");
            readyToTest=true;
     },1000+1000*shuffledArr.length+2);

     function doSetTimeOut(i,interval){
        setTimeout(function(){
        i.click();
      },interval);
     }
});


function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

$（文档）.ready（函数（）{
var readyToTest=false；
var elemCntr=0；
$（'.box'）。单击（函数（e）{
控制台日志（“cleicked”）；
如果（readyToTest==true）{
调试器
if（$（e.currentTarget）.attr（'id'）==computerFormedArray[elemCntr]）{
$（e.currentTarget）.css（'background'，'green'）；
$（e.currentTarget）.unbind（'click'）；
计算机格式阵列拼接（elemCntr，1）；
if（computerFormedArray.length==0）{
$（“.parth”）.html（“友元”）
}
}否则{
$（e.currentTarget）.css（'background'，'red'）；
}
}否则{
$（this.toggleClass（'box'）；
$（this.toggleClass（'boxactive'）；
} 
});
函数重新初始化计数器（）{
elemCntr=0；
}
var allbox=$（'.box'）；
var shuffledArr=随机（所有框）；
console.log（shuffledArr）；
var-cntr=1000；
var computerFormedArray=[]；
对于（变量i=0；i

检查这把小提琴

我建造它的方式

所有16个方块将随机选择，图案将被存储 列队

显示模式后，将显示一条消息“准备测试” 来了

然后用户开始猜测。如果它是正确的气体，那么它会 变成绿色，否则它会变成红色

有无限的机会：）即 我可以多次单击红色框

当所有16个盒子都变成绿色时 i、 我记得所有的16个盒子，然后你赢的信息会出现“你赢了”

我写的Javascript

$(document).ready(function(){
        var readyToTest=false;
    var elemCntr=0;
    $('.box').click(function(e) {
      console.log("cleicked");
            if(readyToTest==true){
        debugger
                if($(e.currentTarget).attr('id')==computerFormedArray[elemCntr]){
            $(e.currentTarget).css('background','green');
          $(e.currentTarget).unbind('click');
          computerFormedArray.splice(elemCntr,1);
          if(computerFormedArray.length==0){
            $(".parth").html("<h1>YOuuu Won</h1>")
          }
        }else{
            $(e.currentTarget).css('background','red');
        }
            }else{
      $(this).toggleClass('box');
      $(this).toggleClass('boxactive');
     } 
    });

    function reinitializeCounter(){
      elemCntr=0;
    }


        var allBoxes=$('.box');
        var shuffledArr=shuffle(allBoxes);
    console.log(shuffledArr);
    var cntr=1000;
    var computerFormedArray=[];
    for(var i=0;i < shuffledArr.length;i++){
                console.log($(shuffledArr[i]).attr('id'));
                computerFormedArray.push($(shuffledArr[i]).attr('id'));
                doSetTimeOut($(shuffledArr[i]),cntr);
          doSetTimeOut($(shuffledArr[i]),cntr+1000);
            cntr+=1000;
     }

     setTimeout(function(){
        $('.readyToTest').html("Ready To Test");
            readyToTest=true;
     },1000+1000*shuffledArr.length+2);

     function doSetTimeOut(i,interval){
        setTimeout(function(){
        i.click();
      },interval);
     }
});


function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

$（文档）.ready（函数（）{
var readyToTest=false；
var elemCntr=0；
$（'.box'）。单击（函数（e）{
控制台日志（“cleicked”）；
如果（readyToTest==true）{
调试器
if（$（e.currentTarget）.attr（'id'）==computerFormedArray[elemCntr]）{
$（e.currentTarget）.css（'background'，'green'）；
$（e.currentTarget）.unbind（'click'）；
计算机格式阵列拼接（elemCntr，1）；
if（computerFormedArray.length==0）{
$（“.parth”）.html（“友元”）
}
}否则{
$（e.currentTarget）.css（'background'，'red'）；
}
}否则{
$（this.toggleClass（'box'）；
$（this.toggleClass（'boxactive'）；
} 
});
函数重新初始化计数器（）{
elemCntr=0；
}
var allbox=$（'.box'）；
var shuffledArr=随机（所有框）；
console.log（shuffledArr）；
var-cntr=1000；
var computerFormedArray=[]；
对于（变量i=0；i

我不完全理解，但这确实是我非常希望得到的结果。我会花时间去理解一切。@ParthGhiya你应该为此收费。。）干杯@达瓦尔马特哈克：当然，我不明白所有的事情，但这确实是我想要的结果