Problem with comparing two cards in a memory game - JS/Jquery

Asked

Viewed 99 times

0

Hello, this is an exercise for college and I’m not able to think of a solution to compare when two cards are equal, which would be done in the function isMatchPattern(). Could someone suggest a solution? Thanks in advance.

HTML code:

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

JS Code:

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

}
javascript jquery games

1 answer

1


Out of the question of comparison, I noticed 1 error and 2 warnings in your code:

The error here is you should call the function with (), who will return true or false:

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

Without the parentheses will always return true, because without them you are not checking the function return, but yes if she exists.

The other 2 warnings is the .size() in two lines:

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

If you are using a version of jQuery earlier than 1.8 it will work, but since jQuery is already in version 3.4.0, jQuery .size() is considered obsolete since version 1.8 and removed from version 3.0, as you can check on documentation.

So instead of using .size(), I would recommend using .length:

$(".card-flipped").length

Regarding the comparison of the cards, just use if(pattern == anotherPattern), and need not use else, why return true, the rest of the lines below will be ignored. Then your function will look like this:

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

Example based on your code:

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>

  • I had suspected since it was only comparing Pattern with anotherPattern, but it never worked, the problem was the lack of parentheses. Thank you very much for the help and also for the explanation on the .size() and .length.

Browser other questions tagged javascript jquery games

You are not signed in. Login or sign up in order to post.