0

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

}
0

1 Resposta 1

1

Fora a questão de comparação, notei 1 erro e 2 avisos no seu código:

O erro aqui é você deve chamar a função com (), que vai retornar true ou false:

function checkPattern()
{
if(isMatchPattern()){
                 ↑↑

Sem os parênteses vai sempre retornar true, porque sem eles você não está verificando o retorno da função, mas sim se ela existe.

Os outros 2 avisos é o .size() em duas linhas:

$(".card-flipped").size()

Se você estiver usando uma versão do jQuery anterior a 1.8 irá funcionar, mas como o jQuery já está na versão 3.4.0, o .size() é considerado obsoleto desde a versão 1.8 e removido a partir da versão 3.0, conforme você pode conferir na documentação.

Então, em vez de usar .size(), eu recomendaria usar .length:

$(".card-flipped").length

Em relação a comparação das cartas, basta usar if(pattern == anotherPattern), e não precisa usar else, porque se retornar true, o resto das linhas abaixo será ignorado. Então sua função ficará assim:

function isMatchPattern()
{
   var cards = $(".card-flipped");
   var pattern = $(cards[0]).data("pattern");
   var anotherPattern = $(cards[1]).data("pattern");       

   if(pattern == anotherPattern) return true;
   return false;
}

Exemplo baseado no seu código:

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

      // para exmplo
      $(this).text(pattern);

    $(this).click(selectCard);  
    });     
    }

function selectCard() {
if ($(".card-flipped").length > 1)
{
    return;
}

$(this).addClass("card-flipped");

//** Reproduzir o som de clique


if( $("#cards").click ){

    document.getElementById("click").play();
}


if ($(".card-flipped").length == 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(pattern == anotherPattern) return true;
   return false;
}
.card{
   width: 60px;
   height: 80px;
   background: red;
   display: inline-block;
   margin: 3px;
   color: red;
}

.card-flipped{
   color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="game">
   CLIQUE EM 2 CARTAS QUALQUER:
    <div id="cards">            
        <div class="card">
            <div class="face front"></div>
            <div class="face back"></div>
        </div> <!-- .card -->                       
    </div> <!-- #cards -->
</section> <!-- #game -->


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

1
  • Eu tinha suspeitado já que era só comparar pattern com anotherPattern, mas nunca dava certo, o problema mesmo era a falta dos parenteses. Muito obrigado pela ajuda e também pela explicação sobre o .size() e .length.
    – Henrique
    Commented 22/04/2019 às 1:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .