javascript - 西蒙游戏: Two colors in a row won't fade properly

Question

我正在尝试构建一个 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;
}

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

虽然我没有看到两个方 block 出现淡出的问题，但我确实看到，例如，在蓝色、黄色、黄色的情况下，黄色不会变得不褪色-完全出局。

如果这是您担心的问题，原因是您要删除该类，然后立即重新添加它，因此 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]);
  	//Math.floor(Math.random() * 4)]);
}

function clearTransition() {
	var colorSquare = pcSequence[i - 1];
    colorSquare.removeEventListener('transitionend', clearTransition);
	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>