推測変数

Question

私はカードゲームを作っています。最初のカードを2番目のカードの推測とは別のものにする方法はわかりません。私はさまざまなコードペンでいくつかの例を見てきましたが、コードは理解しにくいものです。

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ページのほとんどが似たが、カードの異なる名前で見えるものです：これは

UPDATE ..私はこれまで持っているものです。完全なものはかなり長いです。ここで

<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>