如何翻转图像而不点击它？

我已经写了一个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; 
}

来源

2017-08-01 Del Monte

你可以添加一个类时，他们被翻转，那么，如果他们不匹配，它需要运行一些转型设定的时间后再次删除类。所以卡片会从正常状态转换到增加的状态;那么如果不匹配，则在删除类时从添加的类状态转换回正常状态。 – cjl750

感谢您的回复。它可以做到没有jQuery？此外，我得到了addClass和removeClass逻辑，但没有得到过渡部分.. –

@ cjl750是的请张贴它作为答案，因为它正在工作:) –

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

这样，您可以在单击卡时添加该类，并在特定超时后再次移除该类。只要在卡上包含转换转换（例如，transition: transform 500ms），它就会双向转换：在添加类时翻转并在类删除时翻转。

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

下面是使用超时功能添加和删除带有香草JavaScript的类的示例。看看我们如何在JavaScript中添加一个flipped类到#wrapper，我们的动画样式为#wrapper.flipped .card { transform: rotateY(180deg); }。

请注意，此解决方案使用Internet Explorer 10+支持的element.classList。如果您需要支持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>

来源

2017-08-02 16:29:39 cjl750

如何翻转图像而不点击它？

回答

相关问题