Question

我试图建立一个javascript＆＃39;西蒙说＆＃39;游戏。到目前为止，我用按钮进行了一些基本测试。第一个按钮＆＃39;开始＆＃39;生成一个序列。第二个按钮＆＃39;显示＆＃39;将显示生成的内容。一切都有效，除非随机生成的序列中的相同颜色出现在一行中。

Ex：= [＆＃39; blue＆＃39;，＆＃39; yellow＆＃39;，＆＃39; yellow＆＃39;]

只有在这种情况下，淡入/淡出效果才能起作用。我检查了DevTools，出了什么问题，似乎循环增加了课程“淡出”＆＃39;两个索引（在上面的情况下为索引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>

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

1 个答案: