javascript - 如何在不点击图片的情况下将图片翻转回来？

Question

我编写了一段 Javascript 代码来匹配 4x4 网格中的图像。我希望当用户单击图像时图像翻转，并在两个图像不相同时翻转回来。第一次单击图像时我可以翻转图像。然后对图像进行比较。当相等时，我设置了 display: none 但当它们不相等时，就会出现问题。我尝试了所有排列和组合，但图像没有翻转。请帮我把图像翻转回来。

这是我的代码:

HTML:

<div class="container">
        <div class="f1_container" onclick="choose(0)">
            <div class="shadow f1_card">

                <div class="back face center"><img src="A.png" onclick="Click()"></div>
            </div>
        </div>
    <div class="f1_container" onclick="choose(1)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="B.png"></div>
        </div>
    </div>
    <div class="f1_container" onclick="choose(2)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="C.png"></div>
        </div>
    </div>

    <div class="f1_container" onclick="choose(3)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="D.png"></div>
        </div>
    </div>
    <br>
    <div class="f1_container" onclick="choose(4)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="E.png"></div>
        </div>
    </div>
    <div class="f1_container" onclick="choose(5)"> 
        <div class="shadow f1_card">

            <div class="back face center"><img src="F.png"></div>
        </div>
    </div>
    <div class="f1_container" onclick="choose(6)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="G.png"></div>
        </div>
    </div>
    <div class="f1_container" onclick="choose(7)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="H.png"></div>
        </div>
    </div>
    <div class="f1_container" onclick="choose(8)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="A.png"></div>
        </div>
    </div>
    <div class="f1_container" onclick="choose(9)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="B.png"></div>
        </div>
    </div>
    <div class="f1_container" onclick="choose(10)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="C.png"></div>
        </div>
    </div>

    <div class="f1_container" onclick="choose(11)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="D.png"></div>
        </div>
    </div>
    <br>
    <div class="f1_container" onclick="choose(12)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="E.png"></div>
        </div>
    </div>
    <div class="f1_container" onclick="choose(13)"> 
        <div class="shadow f1_card">

            <div class="back face center"><img src="F.png"></div>
        </div>
    </div>
    <div class="f1_container" onclick="choose(14)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="G.png"></div>
        </div>
    </div>
    <div class="f1_container" onclick="choose(15)">
        <div class="shadow f1_card">

            <div class="back face center"><img src="H.png"></div>
        </div>
    </div>
    <br>
</div>

Javascript:

<script>
    var clicks = 0; //counts how may picks have been made in each turn
    var firstchoice; //stores index of first card selected
    var secondchoice; //stores index of second card selected
    var match = 0; //counts matches made
    var backcard = "images/card.png"; //shows back of card when turned over
    var tiles_flipped = 0;
    var faces = ['A.png', 'B.png', 'C.png', 'D.png', 'E.png', 'F.png','G.png', 'H.png', 'A.png', 'B.png', 'C.png', 'D.png', 'E.png', 'F.png','G.png', 'H.png'  
                 /*'canada.png', 'germany.png', 'india.png', 'spain.png', 'uk.png', 'usa.png'*/]; //array to store card images
    /*function shuffle(a) 
    {
        for (let i = a.length; i; i--) {
            let j = Math.floor(Math.random() * i);
            [a[i - 1], a[j]] = [a[j], a[i - 1]];
        }
    }
    shuffle(faces);*/
    var count_clicks = 0;
    function choose(card) 
    {
        count_clicks += 1;
        if (clicks == 2) 
        {
            return;
        }
        if (clicks == 0) 
        {
            firstchoice = card;
            document.images[card].src = faces[card];
            clicks = 1;
        }else 
        {
            clicks = 2;
            secondchoice = card;
            document.images[card].src = faces[card];
            timer = setInterval("check()", 500);
        }
    }
    /* Check to see if a match is made */
    function check() 
    {
        clearInterval(timer); //stop timer
        clicks = 0;
        if (faces[secondchoice] == faces[firstchoice]) 
        {
            match++;
            document.images[firstchoice].style.display = 'none';
            document.images[secondchoice].style.display = 'none';
            document.getElementById("matches").innerHTML = match;
        } else 
        {  // This is the part I have doubt in.
           // I'v set it to an image but it should flip back.
            document.images[firstchoice].src = backcard;
            document.images[secondchoice].src = backcard;
            return;
        }
    }
    var clicks = 0;
    var previous_scores = localStorage.getItem("old-score");
    console.log(previous_scores);
    function Click() 
    {
        if(tiles_flipped == faces.length)
        {
            document.getElementById("clicks").innerHTML = "New Score: "+clicks+"<br>"+"Old Score: "+previous_scores;
            localStorage.setItem("old-score", clicks);

        }
        else
        {
            clicks += 1;
            document.getElementById("clicks").innerHTML = "Clicks: "+clicks;
            return clicks;
        }
    }
    console.log(count_clicks);
</script>

CSS:

body::after 
{
    content: "";
    background: url(bg2.jpg);
    background-size: cover;
    opacity: 0.05;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;  
}
.container
{
    width: 685px;
    margin: 0 auto;
}
.f1_container {
    position: relative;
    margin:10px;
    width: 150px;
    height: 150px;
    z-index : 1;
    float:left;
}
.f1_container {
    -webkit-perspective: 1000;
    perspective: 1000;

}
.f1_card {
    width: 150px;
    height: 150px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.3s linear;
    transform-style: preserve-3d;
    transition: all 0.3s linear;
    background: url('card.png');
    background-size: 150px 150px;

}
.f1_container.active .f1_card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    /* box-shadow: -5px 5px 5px #aaa; */

}
.face {
    position: absolute;
    width: 150px;
    height: 150px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

}
.face.back {
    display: block;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-sizing: border-box;
    text-align: center;
    background-color: white;
}
.face.back img
{
    width: 150px;
}

Answer 1

我建议做的是通过类更改来控制翻转动画。在 CSS 中为卡片设置正常样式，然后在添加额外类时应用 transform:rotateY(180deg)。

这样，您可以在单击卡片时添加该类，并在一定的超时后再次删除该类。只要您在卡上包含变换过渡(例如，transition:transform 500ms)，它就会双向过渡:当它在添加类时翻转时，以及当它像添加类一样翻转时该类已被删除。

您可以使用已有的点击功能和超时来添加和删除此类。

下面是使用带有超时功能的普通 JavaScript 添加和删除类的示例。了解如何使用 JavaScript 将 flipped 类添加到 #wrapper，我们的样式为 #wrapper.flipped .card { transform:rotateY(180deg); } 用于动画。

请注意，此解决方案使用 element.classList，它在 Internet Explorer 10+ 中受支持。如果您需要支持 Internet Explorer 9 或更低版本，请参阅Code with classList does not work in IE?一些选项。

document.getElementById('wrapper').addEventListener('click', function() {
  var wrapper = this;

  wrapper.classList.add('flipped');

  setTimeout(function() {
    wrapper.classList.remove('flipped');
  }, 1500);
});

#wrapper {
  perspective: 1000px;
  width: 100px;
  height: 150px;
}
#wrapper.flipped .card {
  transform: rotateY(180deg);
}
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 500ms;
  transform-style: preserve-3d;
}
.card .front,
.card .back {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}
.card .front {
  background-color: midnightblue;
  z-index: 1;
}
.card .back {
  background-color: firebrick;
  transform: rotateY(180deg);
}

<div id="wrapper" style="float: left;">
  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
<p style="float: left; margin: 65px 0 0 10px;">&larr; click me</p>