javascript - 西蒙游戏:连续两种颜色不能正确褪色

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

最佳答案

虽然我看不到两个正方形上都出现淡出的问题，但是我确实看到例如在蓝色，黄色，黄色的情况下，黄色根本不会消失。

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

关于javascript - 西蒙游戏:连续两种颜色不能正确褪色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41367646/