Olá, isso é um exercício para a faculdade e não estou conseguindo pensar em uma solução para comparar quando duas cartas são iguais, que seria feita na função isMatchPattern(). Alguém poderia sugerir uma solução? Desde já agradeço.
Código HTML:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="css/matchgame.css" />
</head>
<body>
<section id="game">
<div id="cards">
<div class="card">
<div class="face front"></div>
<div class="face back"></div>
</div> <!-- .card -->
</div> <!-- #cards -->
</section> <!-- #game -->
<script src="js/jquery.js"></script>
<script src="js/matchgame.js"></script>
<audio id="acerto">
<source src="sons/acerto.mp3">
</audio>
<audio id="click">
<source src="sons/click.mp3" type="audio/mpeg">
</audio>
<audio id="erro">
<source src="sons/erro.mp3">
</audio>
</body>
</html>
Código JS:
var matchingGame = {};
matchingGame.deck = [
'cardAK', 'cardAK',
'cardAQ', 'cardAQ',
'cardAJ', 'cardAJ',
'cardBK', 'cardBK',
'cardBQ', 'cardBQ',
'cardBJ', 'cardBJ',
];
$(function(){
init();
});
function init(){
matchingGame.deck.sort(shuffle);
for(var i=0;i<11;i++){
$(".card:first-child").clone().appendTo("#cards");
}
$("#cards").children().each(function(index) {
$(this).css({
"left" : ($(this).width() + 20) * (index % 4),
"top" : ($(this).height() + 20) * Math.floor(index / 4)
});
var pattern = matchingGame.deck.pop();
$(this).find(".back").addClass(pattern);
$(this).attr("data-pattern",pattern);
$(this).click(selectCard);
});
}
function selectCard() {
if ($(".card-flipped").size() > 1)
{
return;
}
$(this).addClass("card-flipped");
//** Reproduzir o som de clique
if( $("#cards").click ){
document.getElementById("click").play();
}
if ($(".card-flipped").size() == 2)
{
//** Chamar a função checkPattern a cada 700ms
var t = setInterval(checkPattern,700);
setTimeout(function(){
clearInterval(t);
},700);
}
console.log($(".card-flipped").data("pattern"));
}
function shuffle()
{
var r = Math.floor(Math.random()*10);
if(r >= 5){
return 0.5;
} else {
return -0.5;
}
}
function checkPattern()
{
if(isMatchPattern){
console.log("acerto");
$(".card-flipped").removeClass("card-flipped").addClass("card-removed");
$(".card-removed").bind("webkitTransitionEnd", removeTookCards);
} else {
console.log("erro");
$(".card-flipped").removeClass("card-flipped");
document.getElementById("erro").play();
}
}
function removeTookCards()
{
$(".card-removed").remove();
if ($("#cards").children().length==0)
{
location.reload();
}
}
function isMatchPattern()
{
var cards = $(".card-flipped");
var pattern = $(cards[0]).data("pattern");
var anotherPattern = $(cards[1]).data("pattern");
if(){
return true;
} else {
return false;
}
}