Question

我试图在simonGame中制作闪光效果，并且我使这些功能将颜色css更改为突出显示的颜色，然后恢复正常，它们从数组中随机获取序列并更改颜色在数组中：

game.computerMoves = [green, blue, blue, blue, red, red, yellow];

function showMoves () {

  let i = -1;

  const start = setInterval(function(){
  if(i >= game.computerMoves.length-1){
    clearInterval(start);
  }

  console.log(i + 'start ' + game.computerMoves.length);

  const showColors = new Map([
    [green, 'lime'],
    [yellow, 'rgb(255,255,102)'],
    [blue, 'dodgerblue'],
    [red, 'salmon'],
  ]);

  i++;

  let move = game.computerMoves[i];

  move.style.backgroundColor = showColors.get(move);
 }, 1000);
}

//revert the colors that were changed in showMoves
function removeMoves() {
  let c = -1;
  //put at 2 seconds to change after showMoves is done
  const computerStop = setInterval(function(){

  console.log(c + 'stop ' + game.computerMoves.length);

  if(c >= game.computerMoves.length-1){
     clearInterval(computerStop);

    }
 const colorKey = new Map([
  [green, 'green'],
  [yellow, 'yellow'],
  [red, 'red'],
  [blue, 'blue']
]);

  c++;

  let move = game.computerMoves[c];

   move.style.backgroundColor = colorKey.get(move);
  }, 2000);
}

并且此函数启动它们：

function startFlashing(){
  showMoves();
  removeMoves();
 }

我将removeMoves设置为每2秒开始一次，因此它可以在showMoves以1秒结束后激活以创建闪烁效果，但是showMoves首先创建一个闪烁效果，但是然后showMoves比removeMoves快几倍而不是一个接一个，showMoves在showMoves已经循环遍历数组之后激发了几次。我很感激任何帮助。

Answer 1

您可以将此组合成一个每秒触发一次的计时器，然后相应地切换状态。见下文：

endsWith([a,b,c,d,e], [c,e,d])

const green = 'GREEN';
const blue = 'BLUE';
const red = 'RED';
const yellow = 'YELLOW';
const game = {
  computerMoves: [green, blue, blue, blue, red, red],
};

const move = document.getElementById('move');

const showColors = new Map([
  [green, 'lime'],
  [yellow, 'rgb(255,255,102)'],
  [blue, 'dodgerblue'],
  [red, 'salmon'],
]);

const hideColors = new Map([
  [green, 'green'],
  [yellow, 'yellow'],
  [red, 'red'],
  [blue, 'blue'],
]);

const startFlashing = () => {
  let i = -1;
  let visible = true;
  const interval = setInterval(() => {
    if (visible) {
      i += 1;
    }

    if (i >= game.computerMoves.length) {
      clearInterval(interval);
      return;
    }

    visible = !visible;
    colorMapper = visible ? showColors : hideColors;
    const turn = game.computerMoves[i];
    const color = colorMapper.get(turn);
    console.log(`visible: ${visible}, color: ${turn}`);
    move.style.backgroundColor = color;
    
  }, 1000);
}

startFlashing();

#move {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

Answer 2

我认为通过这种方式你可以实现这个使用setTimeout的第二个条件，它将从第一个条件（setInterval）调用

game.computerMoves = [green, blue, blue, blue, red, red, yellow];


function showMoves() {

    let i = -1;
    let c = -1;

    const start = setInterval(function() {
        if (i >= game.computerMoves.length - 1) {
            clearInterval(start);
        }

        console.log(i + 'start ' + game.computerMoves.length);

        const showColors = new Map([
            [green, 'lime'],
            [yellow, 'rgb(255,255,102)'],
            [blue, 'dodgerblue'],
            [red, 'salmon'],
        ]);

        i++;

        let move = game.computerMoves[i];

        move.style.backgroundColor = showColors.get(move);
        //revert the colors that were changed in showMoves
        //put at 2 seconds to change after showMoves is done
        const computerStop = setTimeout(function() {

            console.log(c + 'stop ' + game.computerMoves.length);

            if (c >= game.computerMoves.length - 1) {
                clearInterval(computerStop);

            }
            const colorKey = new Map([
                [green, 'green'],
                [yellow, 'yellow'],
                [red, 'red'],
                [blue, 'blue']
            ]);

            c++;

            let move = game.computerMoves[c];

            move.style.backgroundColor = colorKey.get(move);
        }, 1000);
    }, 2000);
}

您可以在其他功能中分隔setTimeout代码，但需要声明c变量全局。

两个setIntervals未在序列中激活并在不同时间触发

2 个答案: