主页 / 问题 / 1236770
Accepted
Мне без сахара
Asked:2022-01-28 01:50:45 +0800 CST2022-01-28 01:50:45 +0800 CST

纸牌游戏中的尝试次数有限

  • 772

怎么做才能使如果翻开两张牌并且它们不匹配，那么它们会转回来？任何想法如何做到这一点？（我的意思是，其中的类或数字或 jquery 中匹配的卡片的索引）该游戏也可以称为（“找一对”）游戏。
当点击相同的卡片时，+1 会添加到它们的公共变量中，例如，如果您单击带有数字 2 和 2 的卡片，则 + 1 和 1 会添加到“y”。因此游戏会理解 if ("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>

javascript

1 个回答

  1. Best Answer

    我认为类似的东西。如果文件可以更好地工作。对不起，如果我正在用手机打字。

    更新了。

    在处理了一些文件之后，我增加了将卡翻转的延迟。

    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>

    • 3

相关问题