西蒙遊戲：連續兩種顏色不會褪色

我試圖建立一個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

西蒙遊戲：連續兩種顏色不會褪色

回答

相關問題