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

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

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

如果这是您关心的问题，原因是您正在删除该类，然后立即重新添加它，因此 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>