西蒙游戏：连续两种颜色不会褪色

我试图建立一个JavaScript'西蒙说'的游戏。到目前为止，我用按钮做了一些基本的测试。第一个按钮'开始'生成一个序列。第二个按钮“显示”将显示生成的内容。除了在随机生成的序列中出现相同的颜色时，一切都可以正常工作。西蒙游戏：连续两种颜色不会褪色

例：= [“蓝色”，“黄”，“黄色”]

只有在这种情况下，淡入/淡出效果将不工作。我使用DevTools检查了什么是错误的，似乎该循环向两个索引（在上面的情况下将索引1和索引2添加了该类的“淡出”）。

这是为什么？我该如何解决它？

HTML

<div id="container"> 
    <div id="blue" class="btn"></div> 
    <div id="red" class="btn"></div> 
    <div id="yellow" class="btn"></div> 
    <div id="green" class="btn"></div> 
</div> 

<button id="startBtn">Start</button> 
<button id='showMe'>Show</button>

CSS

.btn { 
    height: 100px; 
    width: 25vw; 
    border: 1px solid black; 
    opacity: 1; 
    transition: opacity 1s ease; 
} 

.fade-out { 
    opacity: 0.5; 
    transition: opacity 1s ease; 
} 

#container { 
    display: flex; 
    flex-wrap: nowrap; 
} 

#blue { 
    background-color: blue; 
} 
#yellow { 
    background-color: yellow; 
} 
#red { 
    background-color: red; 
} 
#green { 
    background-color: green; 
}

var color = container.querySelectorAll('div.btn'); 
var startBtn = document.getElementById('startBtn'); 
var showBtn = document.getElementById('showMe'); 

var pcSequence = [], 
    mySequence = [], 
    i, 
    theLoop; 

startBtn.addEventListener('click', oneMore, false); 
showBtn.addEventListener('click', showSeq, false); 

function oneMore(){ 
    pcSequence.push(color[Math.floor(Math.random() * 4)]); 
} 

function showSeq(){ 
    i = 0; 
    theLoop = setInterval(function(){ 
    if (i > 0){ pcSequence[i - 1].classList.remove('fade-out'); } 
    if (i >= pcSequence.length){ 
     clearInterval(theLoop); 
    } else { 
     pcSequence[i].classList.add('fade-out'); 
    } 
    i++; 
    }, 2000); 
}

来源

2016-12-28 Marco Mazzai

虽然我没有看到淡入OU中的问题t出现在两个方格上，例如，我确实看到了，例如，在你的蓝色，黄色，黄色的情况下，黄色并不是完全不会变成无用的。

如果这是您关心的问题，原因是您要删除该类，然后立即重新添加它，所以ui基本上不会执行淡入。

这里的另一个策略可能是使用transitionend事件来执行淡入，而不是在区间中进行淡入。像这样的东西（我把一个黑客迫使红色和黄色每次都设置）：

var color = container.querySelectorAll('div.btn'); 
 
var startBtn = document.getElementById('startBtn'); 
 
var showBtn = document.getElementById('showMe'); 
 

 
var pcSequence = [], 
 
    mySequence = [], 
 
    i, 
 
    theLoop; 
 

 
startBtn.addEventListener('click', oneMore, false); 
 
showBtn.addEventListener('click', showSeq, false); 
 

 
// Force red initially 
 
pcSequence.push(color[1]); 
 
function oneMore(){ 
 
    // Force yellow each time they press Start 
 
    pcSequence.push(color[2]); 
 
    \t //Math.floor(Math.random() * 4)]); 
 
} 
 

 
function clearTransition() { 
 
\t var colorSquare = pcSequence[i - 1]; 
 
    colorSquare.removeEventListener('transitionend', clearTransition); 
 
\t colorSquare.classList.remove('fade-out'); 
 
} 
 

 
function showSeq(){ 
 
    i = 0; 
 
    theLoop = setInterval(function(){ 
 
    if (i >= pcSequence.length){ 
 
     clearInterval(theLoop); 
 
    } else { 
 
     var colorSquare = pcSequence[i]; 
 
    
 
     colorSquare.classList.add('fade-out'); 
 
     colorSquare.addEventListener('transitionend', clearTransition); 
 
    } 
 
    i++; 
 
    }, 2000); 
 
}

.btn { 
 
    height: 100px; 
 
    width: 25vw; 
 
    border: 1px solid black; 
 
    opacity: 1; 
 
    transition: opacity 1s ease; 
 
} 
 

 
.fade-out { 
 
    opacity: 0.5; 
 
    transition: opacity 1s ease; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
} 
 

 
#blue { 
 
    background-color: blue; 
 
} 
 
#yellow { 
 
    background-color: yellow; 
 
} 
 
#red { 
 
    background-color: red; 
 
} 
 
#green { 
 
    background-color: green; 
 
}

<div id="container"> 
 
    <div id="blue" class="btn"></div> 
 
    <div id="red" class="btn"></div> 
 
    <div id="yellow" class="btn"></div> 
 
    <div id="green" class="btn"></div> 
 
</div> 
 

 
<button id="startBtn">Start</button> 
 
<button id='showMe'>Show</button>

来源

2016-12-28 18:52:39 David

西蒙游戏：连续两种颜色不会褪色

回答

相关问题