メンタルゲームjs：パターンの作成とユーザー入力の確認

Question

私は私の小さな精神的なゲームにいくつか問題があります。 私はhtmlとcssでいくつかの能力を持っていますが、私はまだjsの部分と戦っています。

プレイヤーにパターンを表示するために、複数のアクション（読み込み中）を実行したいです（ボックスが青色で1になります）。それから、彼はそれを覚えて、書き込みボックスをクリックすることでそれを証明しなければなりません。 アイデアは大歓迎です。私はクリックするだけでクラスを切り替えるために少し機能を持っている今の

は：

<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

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

は、これは私のhtmlです。私はフランス語ですので、私の英語を許してください。

Answer 1

このフィドルを確認してください。

https://jsfiddle.net/0tr0zjn3/

パターンは、」準備完了メッセージを表示した後、私はすべての16個の正方形がランダム&パターンで選択されるであろうことを

1. を構築した方法は、アレイ内の 、
2. に記憶されますテスト " が来ます。
3. その後、ユーザーは推測を開始します。正しいガスならば は緑色に変わり、赤色に変わります。
4. 機会は無制限です。すなわち 1回以上赤いボックスをクリックできます。
5. すべてのボックスが緑色に変わると、つまり16個のボックスすべてが覚えている場合、あなたが勝ったメッセージは「あなたが勝った」と表示されます。

Javascriptを私はすべてを理解していないが、これは本当に私がそう多くのTHX取得したい結果の一種である

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