智力遊戲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; 
}