javascript - 猜测变量

Question

我正在制作纸牌游戏，但我不知道如何将第一张牌猜测与第二张牌猜测分开。我看过不同 codepen 上的一些示例，但代码有点难以理解。这就是我到目前为止所拥有的..

更新:

var cards = [
"flower", "happy", "moon",
"rocket", "taco", "tree"
];

var card1 = "";
var card2 = ""

$('div.inner').each(function() {
 $(this).find('button').click(function(event) {
    event.preventDefault();
    card1 = $(this).val();
    card2 = $(this).val();
 console.log(card1);
    console.log(card2);
  console.log("click = " + $(this).val());
 });
});

这是我的大部分 html 页面的样子，但卡片的名称不同。全文相当长。

<div class="col-md-3">
        <div class="flip">
            <div class="cards"> 
                <div class="face front">
                    <div class="inner">
                        <button class="btn flower" value="flower"><img src="imgs/card-front.jpg"></button>
                    </div>
                </div>
                <div class="face back">
                    <img src="imgs/flower.png">
                </div>
            </div>
        </div>
    </div>

Answer 1

这里是最后一个例子，如何使用数字添加规则汽车从洗牌奇数卡匹配，但您添加自己的打印规则，在选择好赔率后做了一点最终结束卡淡出......等等

$(document).ready(function(){
  
  var MYAPP = MYAPP || {
   cards: [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6],
   init: function(){
      MYAPP.shuffleCards();
   },
   shuffleCards: function(){
     var random = 0;
     var temp = 0;
     for(i=0; i< MYAPP.cards.length; i++) {
        random = Math.round(Math.random()*i);               
        temp = MYAPP.cards[i]; 
        MYAPP.cards[i] = MYAPP.cards[random];
        MYAPP.cards[random] = temp;
        
     }     
     MYAPP.assignCards();
   },
    assignCards: function(){
      $('.card').each(function(index){
        $(this).attr('data-card-value', MYAPP.cards[index] );
      });
      MYAPP.clickHandlers();
    },
    clickHandlers: function(){
      $('.card').on('click', function(){
        $(this).html('<p>' + $(this).data('cardValue') + '</p>').addClass('selected');
        MYAPP.checkMatch();
      });
      
      $('.playAgain').on('click', function(){
        location.reload(true);
      });
    },
    checkMatch: function(){
      if($('.selected').length === 2) {
        if($('.selected').first().data('cardValue') === $('.selected').last().data('cardValue')) {
          $('.selected').each(function(){
            $(this).animate({opacity: 0}).removeClass('unmatched').removeClass('selected');
          });
          MYAPP.checkWin();
        } else {
          setTimeout(function(){
               $('.selected').each(function(){            
               $(this).html('').removeClass('selected');
             }); 
            },600);   
        }
      } 
    },
    checkWin: function(){
      if($('.unmatched').length === 0) {
        $('.container').html('<h1>YOU WON!</h1><button class="playAgain">PLAY AGAIN<?button>');
        MYAPP.clickHandlers();
      }
    }
  }
  
  MYAPP.init();
  
});

html, body {
  font-family: 'Oswald', sans-serif;  
  overflow:hidden;
  width: 100 %;
  height:auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cards {
  width: 100%;
  height:auto;
  margin: 50px auto;  
}
.card {
  width: 100px;
  height: 200px;  
  float: left;
  margin: 10px;
  background-color: #ccc;
  border: 1px solid #3b3420;
  border-radius: 8px;
  box-shadow: 2px 2px 0px 2px rgba(0, 0, 0, 0.3), 
    inset 4px 4px 8px 2px rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.card p{
  font-size: 70px;
  color: white;
}
.container h1{
  color: white;
  font-size: 200px;
}
.container button{
  background-color: #f2c791;
  border-radius: 5px;
  color: #a67841;
  outline: none;
  font-size: 20px;
  font-family: 'Oswald', sans-serif;  
  cursor: pointer;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="cards">
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
  </div>

</div>