javascript - 心理游戏js : create pattern and check user input

Question

我的小智力游戏有些问题。 我在 html 和 css 方面有一定的能力，但我仍然在 js 部分苦苦挣扎。

我想运行几个 Action (加载时)，以便向玩家显示一个模式(方框 1 个变成蓝色 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
}

注意:我是法国人，所以请原谅我的英语。

Answer 1

检查这个 fiddle 。

https://jsfiddle.net/0tr0zjn3/

我构建它的方式

1. 将随机选择所有 16 个方 block 并存储图案 在数组中，
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;
}