I have been working on a card matching game using jQuery, and I've encountered an issue. Even though I have written the code to compare two sets of cards, it always goes to the "card match" condition, even when the cards do not actually match.
If you could please help me identify what might be causing this problem in the pair_Cards function:
// compare two class selected
if ($('.selected').length == 2) {
// first and last data is same data value = match
if ($('.selected').first().data('card-id') == $('.selected').last().data('card-id')) {
alert("Card Match");
} else {
alert("Card not match");
}
}
Below is my complete code:
$(document).ready(function() {
var app = {
cards: ["ace_of_clubs.png", "ace_of_clubs.png",
"2_of_clubs.png", "2_of_clubs.png",
"3_of_clubs.png", "3_of_clubs.png",
"4_of_clubs.png", "4_of_clubs.png",
"5_of_clubs.png", "5_of_clubs.png",
"6_of_clubs.png", "6_of_clubs.png"
],
init: function() {
app.shuffle_cards();
},
shuffle_cards: function() {
var random, temp;
for (i = 1; i < app.cards.length; i++) {
random = Math.round(Math.random() * i);
temp = app.cards[i];
app.cards[i] = app.cards[random];
app.cards[random] = temp;
}
console.log(app.cards);
app.assign_Cards();
},
assign_Cards: function() {
$('#distribute').click(function() {
$('.card_ img').css({
"opacity": "0"
});
$('.card_').addClass('removebg');
$('.card_ img').each(function(index) {
$(this).attr("src", "img/" + app.cards[index]);
$(this).attr("data-card-id", app.cards[index].length);
});
alert("Cards have been assigned randomly.");
app.click_Handlers();
})
},
click_Handlers: function() {
$('.card_ img').click(function() {
$(this).data('card-id');
$(this).addClass('selected');
$(this).css({
"opacity": "1"
});
app.pair_Cards();
});
},
pair_Cards: function() {
if ($('.selected').length == 2) {
if ($('.selected').first().data('card-id') == $('.selected').last().data('card-id')) {
alert("Card Match");
} else {
alert("Card not match");
}
}
}
};
app.init();
});.wrapper {
margin: 0 auto;
padding: 0;
position: relative;
max-width: 100%;
width: 1080px;
}
[class^="card_"] {
background: url(img/back.png) no-repeat center top;
display: inline-block;
vertical-align: top;
position: relative;
width: 159px;
height: 238px;
border: 2px solid #000;
margin: 0 auto 6px;
}
[class^="card_"] img {
width: 157px;
height: 238px;
}
.main_con {
text-align: center;
position: relative;
}
.removebg {
background: none;
}
#distribute {
display: block;
margin: 30px auto 10px;
border: 2px solid #000;
background: #f00;
color: #fff;
text-transform: uppercase;
padding: 0;
border-radius: 5px;
width: 200px;
height: 45px;
line-height: 45px;
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_con">
<div class="wrapper">
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<div class="card_"><img src="" alt="" class="unmatched"></div>
<a href="#" id="distribute">Distribute Cards</a>
</div>
</div>