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
}

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

Answer 1

检查这个小提琴。

https://jsfiddle.net/0tr0zjn3/

我构建它的方式

将随机选择所有16个方格＆amp;模式将被存储在Array中，
显示模式后，显示一条消息＆＃34;准备测试＆＃34; 谈到。
然后用户开始猜测。如果它是正确的气体那么它会变成绿色，否则会变红。
有无限的机会:)即我可以不止一次点击红色框。
当所有16个盒子变绿时即我记得所有16个盒子，然后你赢得的消息将会来＃34;你赢了＆＃34;。

我写的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;
}

精神游戏js：创建模式并检查用户输入

1 个答案: