Question

我正在制作一个记忆游戏，如果两张牌匹配它会阻止他们，但如果没有，他们应该翻转。问题是你可以点击其他卡，即使有两张卡已经翻转，如果你点击更多卡，游戏就会疯狂并停止工作有什么想法吗？

这是代码 https://codepen.io/stivennpe/pen/KRxvxR?editors=1010

    restart ();
    bindcards();


    // to restart the game and shuffle the cards
    function restart() {
    $('.restart').on('click', function () {
    cards = shuffle($('.card'));
    $(".card").each(function() {
          $( this ).removeClass( "open match show" );
      });
      $('.deck').html(cards);
      bindcards();
    });
    }



    //to open/show the card
    function bindcards(){

      $('.card').click(function () {
     $(this).addClass('open show');
         let openCards = $('.open');
         let list = jQuery.makeArray(openCards);



         if (list.length === 2 && list[0].innerHTML ===
     list[1].innerHTML){
         $(openCards).addClass('match');
         }
         if (list.length === 2) {
           setTimeout(hola, 1000)
          function hola() {$(openCards).removeClass('open show');
         }
         }


     });
    }

感谢

Answer 1

似乎你可以设置一个全局变量的简单解决方案，比如 blockClicks

如果 blockClicks 为true，则在用户点击时不执行任何操作。超时后将其值重置为false

Answer 2

将.open类应用于div元素，刷新页面，查询该元素以及用户加快游戏速度之间存在竞争条件。希望页面快速刷新，而不是将.open类添加到div中，然后立即查询以查找您拥有的打开卡的数量，并保持局部变量计数。以下是对代码的轻微修改

    function bindcards() {
  let numOfOpenCards = 0;
  $(".card").click(function(e) {
    ++numOfOpenCards;

    if(numOfOpenCards > 2)
      return;

    $(this).addClass("open show");

    let openCards = $(".open");
    let list = jQuery.makeArray(openCards);

    if (numOfOpenCards >= 2 && list && list.length >= 2 && list[0].innerHTML === list[1].innerHTML) {
      $(openCards).addClass("match");       
    }

    if (numOfOpenCards >= 2) {
      setTimeout(hola, 1000);
      function hola() {
        numOfOpenCards = 0;

        let openCards = $(".open"); 
        let list = jQuery.makeArray(openCards);
        if(list) {
          for(let i = 0; i < list.length; ++i)
            $(list[i]).removeClass("open show");
        }
      }
    }
  });
}

如果两张卡已经打开，最近的卡片检查。之前的卡片检查仍应完成并根据需要进行刷新。

https://codepen.io/anon/pen/NzPBrB?editors=1010

其他修改 如果您不想使用numOfOpenCards，则可以使用以下内容。找出已经开放的数量。如果已经超过2个，就退出。如果已经少于已翻转，则添加该类，然后再次查询DOM。使用Anywhere numOfCards可以替换为list.length;

let openCards = $(".open");
let list = jQuery.makeArray(openCards);

if(list && list.length > 2)
  return;

$(this).addClass("open show");

openCards = $(".open");
list = jQuery.makeArray(openCards);
if (list.length >= 2) {
      setTimeout(hola, 1000);
      function hola() {
        $(list).removeClass('open show');
      }
}

在setTimeout（）结束之前阻止操作

2 个答案: