Simon Game：2色の色が正しく消えません。

Question

私はjavascriptの「Simon says」ゲームを構築しようとしています。 これまでは、ボタンを使って基本的なテストを行ってきました。 最初のボタン 'Start'はシーケンスを生成します。 2番目のボタン「表示」は生成されたものを表示します。 ランダムに生成されたシーケンス内の同じ色が連続して表示される場合を除いて、すべてが機能します。

例：= [ '青「黄色」、「黄色」]

のみ、この場合にはフェードイン/フェードアウト効果が動作しません。 私は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; 
} 

JS

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); 
} 

Answer 1

私はフェード-OUに問題があることを見ていないですしながら正方形の2つに現れるtは、私は、例えば、青、黄色、黄色のあなたのケースでは、黄色は、全くunfadedになっていないことを確認してください。

あなたが懸念している問題がある場合は、そのクラスを削除してすぐに再追加するため、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>

：このような何かが（私は毎回設定する赤と黄色を強制的にでハックを入れて）