3D转换：奇怪的无限旋转重复的Img
我一直在学习Java脚本，我试图制作一个Memory（查找配对）游戏。当此错误发生时。我知道这可能不是编写项目的最佳方法，但是我无法连续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次不同的尝试中拍摄的。
编辑：在此之前，我要做的一件事是在动画过程中禁用了鼠标单击，从而修复了Flip函数，但在实现控件后仍然发生了
编辑：我刚刚注意到，无论时间长短，称为aniFlip的函数的setTimeout函数中的减速似乎都与该函数的开始同时执行
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？