javascript - 3D 变换：奇怪的无限旋转重复的 Img

Question

我一直在学习 Java 脚本，我正在尝试制作一个记忆（查找配对）游戏。当这个错误发生时。我知道这可能不是编写项目的最佳方式，但我连续 5 个小时都无法解决这个问题。

我尝试在使用数组翻转元素的两个语句之间设置一个超时时间，这可以说减少了它的发生。我真的不知道为什么 JS 会这样。

 var arr = [];
     var flipped = [];
     function aniFlip(elem){
         elem.style.pointerEvents = 'none';
         var i = 0;
         var id = setInterval(frame, 3);
         function frame(){
             if(elem.style.transform  == 'rotateY(90deg)'){
                 elem.style.display = 'none';
                 clearInterval(id);
             }else{
                 i++;
                 elem.style.transform  = 'rotateY('+ i.toString()+ 'deg)';
             }
         }
         var elem2 = (elem == elem.parentElement.lastElementChild) ? (elem.previousElementSibling) : (elem.nextElementSibling);
         setTimeout(function(){  elem2.style.display = 'block';
        elem2.style.pointerEvents = 'none';
         var t = 90;
         var ic = setInterval(frame2, 3);
         function frame2(){
             if(elem2.style.transform  == 'rotateY(0deg)'){
                 elem2.style.pointerEvents = "auto";
                 clearInterval(ic);
             }else{
                 t--;
                 elem2.style.transform  = 'rotateY('+ t.toString()+ 'deg)';
             }
         } }, 450);
     }
     function control(elem){
         switch(flipped.length){
             case 0:
                 flipped.push(elem.parentElement.lastElementChild);
                 aniFlip(elem);
                 break;
             case 1:
                 if(flipped[0] != undefined && elem.parentElement.lastElementChild != flipped[0]){
                flipped.push(elem.parentElement.lastElementChild);
                 aniFlip(elem);
                     setTimeout(function(){if(flipped[0].src != flipped[1].src){
                         aniFlip(flipped[0]);
                         aniFlip(flipped[1]);
                     }setTimeout(function(){flipped = [];}, 540)}, 540);
                     
                 }
                 
                 break;
             default:
                 break;
         }
     }
    function setImages(){
        arr = [];
        var e = document.getElementById("select");
       var nImg= e.options[e.selectedIndex].value;
        var myNode = document.getElementById("Game");
        myNode.innerHTML ='';
        for(var i = 0; i < nImg; i++){
            arr.push(i);
            arr.push(i);
        }
        arr.sort(function(a,b){return 0.5 - Math.random()});
        var text = "";
        for(var i = 0; i < nImg*2; i++){
            text += '<div class="memcontainer"><img src="images/back.png" class="memcardsf">\n<img src="images/cards/'+ arr[i].toString() +'.jpg"  class="memcardsb"></div>\n';
        }
        nCols = Math.ceil(Math.sqrt(nImg*2));
        while((nImg*2)%nCols != 0){
            nCols++;
        }
        nRows = (nImg*2)/nCols;
        myNode.innerHTML = text;
        var con = document.getElementsByClassName('memcontainer');
        for(i = 0; i < con.length; i++) {
            con[i].style.width= (100/nCols).toString() + "%" ;
            con[i].style.height = (100/nRows).toString() + "%" ;
            con[i].firstChild.addEventListener("click",function(){ control(this);});
            con[i].lastChild.addEventListener("click", function(){ control(this);});
        }
        
    }

html{
        background: url(images/dark_background_2-wallpaper-1920x1080.jpg) no-repeat center fixed;
        background-size: cover;
    }
    html, body{
        margin: 0;
        padding: 0;
       height : 100%;
    }
    #titleContainer{
        position: relative;
        width : 100%;
        height: 140px;
        white-space: nowrap;
    }
    #titleContainer span{
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100%;
        width:830px;
        padding:2%;
        margin: auto;
        box-sizing: border-box;
        font-size: 70px;
        color: white;
        font-family: Courier New;
        text-shadow: 2px 2px 8px white, -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    }
    #brain{
        float: left;
        width: 150px;
        height:150px;
    }
    #Game{
        float: left;
        width:800px;
        height: 800px;
        border: 10px inset white;
        box-shadow: 5px 5px 10px black, -5px -5px 10px black;
    }
    #controls{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        float: left;
        position: relative;
        top: 200px;
        left: 40px;
        height: 400px;
        width: 400px;
        background-color: #73AD21;
        border-radius: 100px 30px 100px 30px;
        padding: 40px;
        transition: width 1s;
        box-sizing: border-box;
        box-shadow: 2px 2px 10px black, -2px -2px 10px black;
    }
    #container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        justify-content: space-around;
    }
    #select{
        display: block;
        position: relative;
        top: 20%;
        width: 100%;
        background-color: #f1f1f1;
        border-radius: 10px;
        border: none;
        padding: 16px 20px;
    }
    #button{
        position: relative;
        top: 40%;
        width: 100%;
        display: block;
        background-color: white;
        border: none;
        border-radius:10px;
        color: black;
        padding: 16px 32px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
    }
.memcontainer{
    position: relative;
    width: 0%;
    height: 0%;
    padding: 4px;
    float: left;
    box-sizing: border-box;
    
}

.memcardsf{
    box-sizing: border-box;
    width: 100%;
    transform: rotateY(0);
    height: 100%;
    box-shadow: 2px 2px white, -2px -2px white, -2px 2px white, 2px -2px white;

    
}
.memcardsb{
    display: none;
    transform: rotateY(90deg);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    box-shadow: 2px 2px white, -2px -2px white, -2px 2px white, 2px -2px white;
    
}
.memcardsf:hover{
    box-shadow: 4px 4px 4px rgba(240, 255, 0, 0.8), -4px -4px 4px rgba(240, 255, 0, 0.8), -4px 4px 4px rgba(240, 255, 0, 0.8), 4px -4px 4px rgba(240, 255, 0, 0.8) ;
}
    #container::after{
        content : '';
        clear: both;
        display:block;
    }
    #titleContainer span{
        animation-name: title;
        animation-duration: 2s;
        animation-fill-mode: forwards
    }
    #brain{
        animation-name: brain;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }
    #Game, #controls{
        animation-name: game;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }
    @keyframes game{
        from{transform: scale(0);}
        to{transform: scale(1);}
    }
    @keyframes brain{
        from{transform: translate(0 ,-45px) scale(0);}
        to{transform: translate(0 ,-45px) scale(1);}
    }
    @keyframes title{
        from{transform: translate(-50%, -50%) scale(0);}
        to{ transform: translate(-50%, -50%) scale(1);}
    }
    @media screen and (max-width:1388px){
        #controls{
            left:20px;
        }
    }
    @media screen and (max-width:1317px){
        #controls{
            width:300px;
        }
    }
    @media screen and (max-width:1152px){
        #controls{
            width:200px;
        }
    }
   @media screen and (max-width:1036px){
        #container{
            flex-direction: column;
            align-items: center;
        }
        #controls{
            position: relative;
            top: 10px;
            width: 400px;
        }
        
    }

<body onload="setImages()">
<div id="titleContainer">*
    <span><img id="brain" src='images/brain.png'>The Memory Game</span>
</div>
<div id="container">
<div id="Game">
    
</div>
<div id="controls">
<select id="select" name="pairs" onchange="setImages()">
  <option value="18">18 pair</option>
  <option value="21">21 pair</option>
  <option value="24">24 pair</option>
   <option value="28">28 pair</option>
    <option value="32">32 pair</option>
</select>
 <button id="button" type="button" >Reset</button>
</div>
</div>
</body>

我希望它不会这样做。翻转功能完美运行，但一旦我实施控制，这种情况就发生了。

第一张图片：

复制的图像是卡片的背面

第二张图片：

可以在这里看到旋转，这是相同的图像，但我从 2 次不同的尝试中拍摄了照片。

编辑：在此之前我做的一件事是我在动画期间禁用了鼠标点击，这修复了我的翻转功能，但是一旦我实现了控制，这种情况仍然发生

编辑：我刚刚注意到，无论时间段如何，名为 aniFlip 的函数的 setTimeout 函数中的减速似乎与函数的开始同时执行

标签： javascripthtmlcss