javascript - 创建一个基于 JavaScript 的内存游戏

Question

在创建基于 JavaScript 的内存游戏时遇到了一些困难。

我这样做正确吗？

每当 choiceOne 和 choiceTwo 不匹配时，我想进行重置。

任何帮助将不胜感激。谢谢!

var $item = $('li'),
    numClick = 0,
    choiceOne,
    choiceTwo;

$item.click(function(e) {
    var el = $(this).find('span');

	$(this).find('span').removeClass('none');
    numClick++;
    
    if (numClick === 1) {
     choiceOne = el.data('id');
    } else if (numClick === 2) {
     choiceTwo = el.data('id');
    }
    
    if (choiceOne === choiceTwo) {
     alert('thats a match!')
    }
    
    if (numClick  > 2) {
    	numClick = 0;
    }

});
    

li {
    margin: 10px;
    float: left;
    list-style: none;
    border: 1px solid;
    width: 100px;
    height: 100px;
}

span {
    display: block;
    width: 100%;
    height: 100%;
}

.one {
    background-color: red;
}

.two {
    background-color: blue ;
}

.three {
    background-color: green;
}

.four {
    background-color: yellow;
}

.five {
    background-color: orange;
}

.none {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
   <div class="colors">
    <li>
        <span data-id="red" class="one none"></span>
    </li>
    <li>
        <span data-id="blue" class="two none"></span>
     </li>
    <li>
        <span data-id="green" class="three none"></span>
    </li>
    <li>
        <span data-id="yellow" class="four none"></span>
    </li>
    <li>
        <span data-id="orange" class="five none"></span>
     </li>
   </div>

   <div class="text">
    <li>
        <span data-id="red" class="red none">red</span>
    </li>
    <li>
        <span data-id="blue" class="blue none">blue</span>
     </li>
    <li>
        <span data-id="green" class="green none">green</span>
    </li>
    <li>
        <span data-id="yellow" class="yellow none">yellow</span>
    </li>
    <li>
        <span data-id="orange" class="orange none">orange</span>
     </li>
   </div>
</div>

Answer 1

var $item = $('li'),
  numClick = null,
  choiceOne,
  choiceTwo;

$item.click(function(e) {
  var el = $(this).find('span');

  $(this).find('span').removeClass('none');
  numClick++;

  if (numClick === 1) {
    choiceOne = el.data('id');
  } else if (numClick > 1) {
    choiceTwo = el.data('id');
  }
  // if `numClick` greater than 2
  if (numClick > 2) {
    if (choiceOne === choiceTwo) {
      alert('thats a match!');
    }      
      // reset `choiceOne`, `choiceTwo`, `numClick` to `null` 
      choiceOne = choiceTwo =  numClick = null;
      // set `span` `class` to `"none"`
      $("span[data-id]").addClass("none")        
  }
});

li {
  margin: 10px;
  float: left;
  list-style: none;
  border: 1px solid;
  width: 100px;
  height: 100px;
}
span {
  display: block;
  width: 100%;
  height: 100%;
}
.one {
  background-color: red;
}
.two {
  background-color: blue;
}
.three {
  background-color: green;
}
.four {
  background-color: yellow;
}
.five {
  background-color: orange;
}
.none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<div class="colors">
  <li>
    <span data-id="red" class="one none"></span>
  </li>
  <li>
    <span data-id="blue" class="two none"></span>
  </li>
  <li>
    <span data-id="green" class="three none"></span>
  </li>
  <li>
    <span data-id="yellow" class="four none"></span>
  </li>
  <li>
    <span data-id="orange" class="five none"></span>
  </li>
</div>

<div class="text">
  <li>
    <span data-id="red" class="red none">red</span>
  </li>
  <li>
    <span data-id="blue" class="blue none">blue</span>
  </li>
  <li>
    <span data-id="green" class="green none">green</span>
  </li>
  <li>
    <span data-id="yellow" class="yellow none">yellow</span>
  </li>
  <li>
    <span data-id="orange" class="orange none">orange</span>
  </li>
</div>
</div>