记忆游戏鼠标点击限制和计数器jQuery

Question

我试图将每回合允许的点击次数限制为两次，因为一旦我足够快地按下 3 张牌，游戏就可以翻开匹配的牌。

- HTML

 <div class ="container col-md-12">

        <section class="cardsContainer">
            <div class="card" data-card-type="1" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/cookie.JPG"></div>
            </div>
        </section>
        <section class="cardsContainer">
            <div class="card" data-card-type="1" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/cookie.JPG"></div>
            </div>
        </section>
        <section class="cardsContainer">
            <div class="card" data-card-type="2" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/baronIlanYahav.jpg"></div>
            </div>
        </section>
        <section class="cardsContainer">
            <div class="card" data-card-type="2" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/baronIlanYahav.jpg"></div>
            </div>
        </section>
        <section class="cardsContainer">
            <div class="card" data-card-type="3" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/beverlyHills.jpg"></div>
            </div>
        </section>
    <section class="cardsContainer">
        <div class="card" data-card-type="3" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/beverlyHills.jpg"></div>
            </div>
        </section>
    <section class="cardsContainer">
        <div class="card" data-card-type="4" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/bulgaria.jpg"></div>
            </div>
        </section>
    <section class="cardsContainer">
        <div class="card" data-card-type="4" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/bulgaria.jpg"></div>
            </div>
        </section>
    <section class="cardsContainer">
        <div class="card" data-card-type="5" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/mrMustache.jpg"></div>
            </div>
        </section>
    <section class="cardsContainer">
        <div class="card" data-card-type="5" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/mrMustache.jpg"></div>
            </div>
        </section>
    </div>

- JS

 function flip(card) {
     if (!selectedCards[card.data("card-type")]) {


     }
     if (!$(card).hasClass("flipped")) {

         $(card).toggleClass('flipped');

         previous = $(card);


         if (!card1) {
             card1 = $(card);
         } else {
             card2 = $(card);
             var cardType1 = card1.data("card-type");
             var cardType2 = card2.data("card-type");
             if (checkMatch(cardType1, cardType2)) {
                 addPoint();
                 addSelectedCards(cardType2);
                 disableCards();
             } else {
                 setTimeout(function () {
                         flipBack();
                         //clean cards vars
                         resetCards();
                     },
                     1000);//set timer 1 sec to flip back
             }
         }

     }

请帮忙！奖金我非常感谢关于如何计算点击次数的想法，以便稍后将其与最终得分结合起来。

Answer 1

您可以简单地通过计算翻转的卡片数来阻止第三次点击：

function flip() { 
  if ( $('.flipped').length > 2 ) {
    return false;
  }

  // do your thing [...]
}

通过全局变量计算点击次数或

http://api.jquery.com/jQuery.data/

记忆游戏鼠标点击限制和计数器jQuery

Memory Game Mouse click limit and counter jQuery

javascript

memory

jquery

mouseevent