Question

我正在做一个记忆游戏，如果两张纸牌相同，那么它们就是一场比赛，否则将保持打开状态，否则它们会向后翻转，一切正常，除非在没有比赛的情况下，我点击第二张纸牌将不会打开，它将保持关闭状态，并且第一张卡片会向后翻转，因此知道没有匹配项，并且不会从第一位打开第二张卡片

am使用JavaScript操纵效果。

HTML：

我有两个代表卡片两面的div

<div class="card-holder">
    <div class="closed-card"></div>
   <div class="opened-card"></div>
</div>

。。。每张卡重复输入密码

CSS：

.closed-card {

transition: 1s;

position:absolute;

transform: rotateY(0deg);

backface-visibility: hidden;

cursor: pointer;

}

.opened-card {

transition: 1s;

transform: rotateY(180deg);

backface-visibility: hidden;

position:absolute;

}

javaScript：

var a=document.querySelectorAll('.opened-card');

var b=document.querySelectorAll('.closed-card');

var count=0; //a variable that will track how many cards are opened

单击卡片时，将第一张面孔'b'旋转180度并添加一个类别'test'。第二个面'a'的相同内容旋转了0并添加了一个类'open'

添加事件侦听器的循环，该事件侦听器具有单击卡时旋转卡并测试是否存在匹配的功能

for (let x=0;x<16;x++)
{
b[x].addEventListener('click',function()
{
b[x].style.transform="rotateY(180deg)";

b[x].classList.add('test');

a[x].style.transform="rotateY(0deg)";

a[x].classList.add('open');
count++;

if (count===2)
  {
    test();
    count=0;
  }

}); }

当单击两张卡时，有一个比较是否匹配的功能，如果没有匹配，它将保持打开状态，如果没有匹配，则将它们翻转回来

function test()
{
  var v=document.querySelectorAll('.open');
  var d=document.querySelectorAll('.test');
  if (v[0].style.backgroundImage===v[1].style.backgroundImage)
  {
    console.log("yes");
    v[0].classList.remove('open');
    v[1].classList.remove('open');
    d[0].classList.remove('test');
    d[1].classList.remove('test');
  }
  else
  {
    console.log("no");
    d[0].style.transform="rotateY(0deg)";
    v[0].style.transform="rotateY(180deg)";
    d[1].style.transform="rotateY(0deg)";
    v[1].style.transform="rotateY(180deg)";
    v[0].classList.remove('open');
    v[1].classList.remove('open');
    d[0].classList.remove('test');
    d[1].classList.remove('test');
  }
}

在没有条件的情况下，我的牌会很好地翻转，问题是添加条件后是否匹配。如果存在匹配，则两张纸牌将翻转并保持打开状态，这没问题，但是当单击两张不相同的纸牌时，会发生以下情况：我单击第一张纸牌，它会翻转并保持不变，并且单击第二张牌则保持关闭状态，根本不会转动，相反，第一张牌会向后翻转，并显示没有匹配项的消息。如果有人能注意到是什么原因导致我会很感激。

我还试图为测试功能设置一个超时时间，但这不会改变任何东西

setTimeout(test(),2000);

如果比赛不成功则如何翻转卡片如果不翻转则保持打开状态

0 个答案: