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

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

angular.forEach($scope.usersDetails, function(value, key) {
    if (value.hasOwnProperty('checked')) {

    }
});

通过全局变量或

计算点击次数

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

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

1 个答案: