Question

请注意，我对此很陌生，是从youtube上的freeCodeCamp教程中学到的，并想尝试自己做一些事情。

我正在尝试编写游戏Simon，但是按钮闪烁的时间遇到了麻烦。截至目前，序列中的所有按钮将同时闪烁，而我希望它们一一闪烁。我尝试在多个地方使用setTimeout，但没有成功... 有人可以帮我弄清楚缺少setTimeout的地方吗？

var sequence = []; /* array to hold the sequence of colors */
var ind = 0; /* where to user is in the sequence */
var score = 0; /* the user's score */
var midOfSeq = false; /* is the user in the middle of a game? */
var Combo = 0; /* user's combo */
var result_div = document.querySelector(".result"); /* messages for the user */
const TIMEOUT = 600; /* time between flashes */

/* checks the user's progress */
function Simon(num) {
  if (sequence.length === 0) {
    return;
  }
  if (num === sequence[ind]) {
    Combo++;
    result_div.innerHTML = "Combo: " + Combo;
    ind++;
    if (ind === sequence.length) {
      result_div.innerHTML = "You beat phase " + sequence.length;
      score++;
      ind = 0;
      midOfSeq = false;
      Combo = 0;
      flashSequence();
    }
  } else {
    result_div.innerHTML =
      "Sorry, you clicked the wrong color. Your score: " +
      score +
      "<br>Press the Start! button to try again, Good luck!";
    score = 0;
    ind = 0;
    Combo = 0;
    sequence = [];
    midOfSeq = false;
  }
}

/* generates a number between 1 and 4 */
function rndChoice() {
  return Math.floor(Math.random() * 4) + 1;
}

/* flashes the sequence */
function flashSequence() {
  if (midOfSeq === true) {
    return;
  }
  if (score === 0) {
    result_div.innerHTML = "Game Start!";
    sequence.push(rndChoice());
    flashButton(sequence[0]);
  } else {
    sequence.push(rndChoice());
    for (let i = 0; i < sequence.length; i++) {
      setTimeout(function() {
        flashButton(sequence[i]);
      }, 900);
    }
  }
  midOfSeq = true;
}

/* flashes a button */
function flashButton(id) {
  let a = document.getElementById(id.toString());
  switch (a.id) {
    case "1":
      a.setAttribute("class", "flashBlue");
      setTimeout(function() {
        a.setAttribute("class", "blue");
      }, TIMEOUT);
      break;
    case "2":
      a.setAttribute("class", "flashRed");
      setTimeout(function() {
        a.setAttribute("class", "red");
      }, TIMEOUT);
      break;
    case "3":
      a.setAttribute("class", "flashYellow");
      setTimeout(function() {
        a.setAttribute("class", "yellow");
      }, TIMEOUT);
      break;
    case "4":
      a.setAttribute("class", "flashGreen");
      setTimeout(function() {
        a.setAttribute("class", "green");
      }, TIMEOUT);
      break;
    default:
      break;
  }
}

Answer 1

我不确定100％会解决所有问题，但是问题出在以下地方：在flashButton之后，您将为{strong> all 按钮调用900毫秒。

var sequence = [1,2,3,4,5];
for (let i = 0; i < sequence.length; i++) {
  setTimeout(function() {
    //flashButton(sequence[i]);
    console.log(sequence[i]);
  }, 900);
}

相反，通过使用900 * (i + 1) ...增加每个按钮的超时时间来展开触发。

var sequence = [1,2,3,4,5];
for (let i = 0; i < sequence.length; i++) {
  setTimeout(function() {
    //flashButton(sequence[i]);
    console.log(sequence[i]);
  }, 900 * (i + 1));
}

我正在使用900 * (i + 1)（而不是900 * i），否则第一个按钮将立即触发（即900 * 0 = 0）

我还注意到rndChoice()返回一个整数值，您将该整数值放入sequence中，并且将这个值传递给flashButton()。

在flashButton(id)中，您可以使用该参数调用document.getElementById(id) ...，这表示您已将id的元素设置为id="1"等。< / p>

不幸的是，以数字字符作为id属性的开头字符是无效的HTML。

因此，您应该考虑相应地更改id和document.getElementById。

闪烁的按钮计时

1 个答案: