Ограниченное количество попыток в карточной игре

Question

Как сделать так чтобы если перевернули 2 карты и они не совпали тогда они перевенулись обратно? Есть идеи как это сделать? (всмысле совпали классы либо цифры внутри них либо индекс карт внутри jquery)игру можно назвать и ("найди пару") игрой при клиле на одинаковых карт добавляется +1 к их обьшему переменную, например если нажали на карту с номером 2 и 2 к "y" добавляется + 1 и 1. и так игра понимает если ("y"==2) то тогда делает "fadeOut"

let x = 0
let y = 0
let z = 0
    $(".card").eq(0).click(()=>{
        $(".card").eq(0).toggleClass("card-rotate")
        x+=1
        if(x==2){
            $(".card").eq(0).fadeOut()
            $(".card").eq(5).fadeOut()
        }
    })
    $(".card").eq(1).click(()=>{
        $(".card").eq(1).toggleClass("card-rotate-two")
        y+=1
        if(y==2){
            $(".card").eq(4).fadeOut()
            $(".card").eq(1).fadeOut()
        }
    })
    $(".card").eq(2).click(()=>{
        $(".card").eq(2).toggleClass("card-rotate-three")
        z+=1
        if(z==2){
            $(".card").eq(2).fadeOut()
            $(".card").eq(3).fadeOut()
        }
    })
    $(".card").eq(3).click(()=>{
        $(".card").eq(3).toggleClass("card-rotate-three")
        z+=1
        if(z==2){
            $(".card").eq(2).fadeOut()
            $(".card").eq(3).fadeOut()
        }
    })
    $(".card").eq(4).click(()=>{
        $(".card").eq(4).toggleClass("card-rotate-two")
        y+=1
        if(y==2){
            $(".card").eq(4).fadeOut()
            $(".card").eq(1).fadeOut()
        }
    })
    $(".card").eq(5).click(()=>{
        $(".card").eq(5).toggleClass("card-rotate")
        x+=1
        if(x==2){
            $(".card").eq(5).fadeOut()
            $(".card").eq(0).fadeOut()
        }
    })

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 500px;
    grid-gap: 10px;
}
.card{
    background-image: url(1.jpg);
    background-color: red;
    width: 138px;
    height: 50px;
    background-size: contain;
    transition: 0.5s;
    border-radius: 10px;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-rotate{
    background-image: url(2.jpg);
    width: 138px;
    height: 50px;
    background-size: cover;
    border:1px solid black;
    border-radius: 10px;
    background-color: #DCEEEE;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotateY(180deg);
    transition: 0.5s;
}
.card-rotate-two{
    background-image: url(3.jpg);
    width: 138px;
    height: 50px;
    background-size: cover;
    border:1px solid black;
    border-radius: 10px;
    background-color: #DCEEEE;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotateY(180deg);
    transition: 0.5s;
}
.card-rotate-three{
    background-image: url(4.jpg);
    width: 138px;
    height: 50px;
    background-size: cover;
    border:1px solid black;
    border-radius: 10px;
    background-color: #DCEEEE;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotateY(180deg);
    transition: 0.5s;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel = "stylesheet" href = "style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
            <div class="container">
                <div class="card">0</div>
                <div class="card">1</div>
                <div class="card">2</div>
                <div class="card">2</div>
                <div class="card">1</div>
                <div class="card">0</div>
            </div>
            <script src="script.js"></script>
</body>
</html>

Answer 1

Думаю что то подобное. Если напильником поработать можно и получше. Извините если что с телефона набираю.

Updated.

поработав немного с напильником, добавил задержку переворачивание карты.

let prev = null;

$(".card").click(function() {
  
  $(this).toggleClass("card-rotate"); //переворячиваем карту
  if (prev != null) {
    if (prev != this && prev.innerText === this.innerText) {
      // удаляем карты
      let card1 = prev;
      let card2 = this;
      setTimeout(()=>{
        $(card1).fadeOut();
        $(card2).fadeOut();
       }, 0);
    } else if (this != prev){        
      // переворячиваем карты
      let card1 = prev;
      let card2 = this;
      setTimeout(()=>{
        $(card1).toggleClass("card-rotate");
        $(card2).toggleClass("card-rotate");
       }, 500);
    }
    prev = null;
  } else {
    prev = this;
  }
})

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 500px;
    grid-gap: 10px;
}
.card{
    background-image: url(1.jpg);
    background-color: red;
    width: 138px;
    height: 50px;
    background-size: contain;
    transition: 0.5s;
    border-radius: 10px;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-rotate{
    background-image: url(2.jpg);
    width: 138px;
    height: 50px;
    background-size: cover;
    border:1px solid black;
    border-radius: 10px;
    background-color: #DCEEEE;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotateY(180deg);
    transition: 0.5s;
}
.card-rotate-two{
    background-image: url(3.jpg);
    width: 138px;
    height: 50px;
    background-size: cover;
    border:1px solid black;
    border-radius: 10px;
    background-color: #DCEEEE;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotateY(180deg);
    transition: 0.5s;
}
.card-rotate-three{
    background-image: url(4.jpg);
    width: 138px;
    height: 50px;
    background-size: cover;
    border:1px solid black;
    border-radius: 10px;
    background-color: #DCEEEE;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotateY(180deg);
    transition: 0.5s;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel = "stylesheet" href = "style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
            <div class="container">
                <div class="card">0</div>
                <div class="card">1</div>
                <div class="card">2</div>
                <div class="card">2</div>
                <div class="card">1</div>
                <div class="card">0</div>
            </div>
            <script src="script.js"></script>
</body>
</html>

БЛОГ НА HUSL

Ограниченное количество попыток в карточной игре

Ответы (1 шт):