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

Question

我有一些问题与我的小智力游戏。 我有一些HTML和CSS的能力，但我仍然与js部分斗争。

我想运行几个动作（加载），以便向玩家展示图案（箱子变成蓝色1）。然后，他需要记住它并通过点击写框来证明它。 欢迎任何想法。

现在我只是有一点点功能来切换点击类：

$('.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> 

而CSS：

.container { 
    height: 480px; 
    width: 470px; 
    background: white; 
    border: 2px solid #1C1F1F; 
    border-radius: 8px; 
    margin: auto; 
    text-align: center; 
    margin-top: 50px; 
} 

.box { 
    width: 100px; 
    height: 100px; 
    border-radius: 5px; 
    background: grey; 
    display: inline-block; 
    margin: 10px 5px 5px 5px; 
    transition: background 600ms, opacity 600ms; 
    cursor: pointer; 
    opacity: 0.3; 
} 

.boxactive { 
    width: 100px; 
    height: 100px; 
    border-radius: 5px; 
    display: inline-block; 
    margin: 10px 5px 5px 5px; 
    cursor: pointer; 
    background: #81E0FF; 
    opacity: 1 
} 

.box:hover { 
    background: #81E0FF; 
    opacity: 1 
} 

NB：我是法国人，所以请原谅我的英语。

Answer 1

检查这个小提琴。

https://jsfiddle.net/0tr0zjn3/

我构建它的方式

1. 所有16个正方形将在随机&图案来选择将被存储在阵列 ，
2. 图案之后被显示时，一个消息“准备测试“ 来。
3. 然后用户开始猜测。如果它的气体正确，那么它将变为绿色，否则它将变成红色。
4. 有无限的机会:)即 我可以多次点击红色框。
5. 当所有16个盒子变成绿色 即我记得所有的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; 
}