需要帮助才能使只有两张卡可以点击直到它们匹配

Question

我是 javascript/jquery 的新手。我正在尝试创建纸牌比赛游戏。需要帮助才能使当时只能点击两张卡片。防止在检查两张卡片是否匹配时点击。

尝试在总共有两个带有 .open 的 div 时为元素提供解除绑定方法 class，但它完全删除了点击事件，并通过 (.bind('click' function())) 不起作用，因为我没有函数作为参数。有没有办法做到这一点，或者我可以做不同的事情？谢谢

$('.card').click(function() {
    $(this).addClass('open flip');
      var numToMatch = $(this).find('.face').text();
      
   if($('.open').length === 2) {
      if($('.open').first().find('.face').text() == $('.open').last().find('.face').text()){
        $('.open').each(function() {
          $(this).removeClass('open').unbind('click');
        });
      } else {
          setTimeout (function(){
          $('.open').each(function() {
              $(this).removeClass('open flip');
            });
          }, 1000);
      };
    };
});

* {
  maring: 0;
  padding: 0;
}

.div-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  perspective: 500px;
}

.card {
  width: 90px;
  height: 140px;
  margin: 5px;
  display: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

.card.flip {
   transform: rotateY(180deg);
}

.face {
  width: 100%;
  height: 100%;
  background-color: lightblue;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  transition: transform 500ms ease-in-out;
  display: flex;
  font-size: 5em;
  justify-content: center;
  align-items: center;
}

.back {
  width: 100%;
  height: 100%;
  background-color: green;
  transition: transform 500ms ease-in-out;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='div-container'>
<div class='card'>
  <div class='back'></div>
  <div class='face three'>3</div>
</div>
<div class='card'>
  <div class='back'></div>
  <div class='face one'>1</div>
</div><div class='card'>
  <div class='back'></div>
  <div class='face one'>1</div>
</div><div class='card'>
  <div class='back'></div>
  <div class='face two'>2</div>
</div><div class='card'>
  <div class='back'></div>
  <div class='face two'>2</div>
</div><div class='card'>
  <div class='back'></div>
  <div class='face three'>3</div>
</div>
</div>

Answer 1

问题是您在 click 事件发生后立即添加 open flip class。这就是为什么可能会出现“垃圾点击”并同时打开 2 张以上的卡片。为防止这种情况，只需将点击处理程序的前几行更改为：

$('.card').click(function() {
    if($('.open').length >= 2)
        return;

    //... more code ...
});

如果打开的卡片数量大于等于2，则直接return，完全不处理点击事件

需要帮助才能使只有两张卡可以点击直到它们匹配

Need help to make that only two cards would be possible to click until they are matched

javascript

jquery

if-statement

click