Synchronisation des boutons clignotants

Question 1

REMARQUE: je suis très nouveau dans ce domaine, j'ai appris du tutoriel de freeCodeCamp sur youtube et je voulais essayer de travailler sur quelque chose par moi-même.

J'essaie d'écrire le jeu Simon, mais j'ai du mal avec le timing des boutons clignotants. À partir de maintenant, tous les boutons de la séquence clignotent en même temps, alors que je veux qu'ils clignotent un par un. J'ai essayé d'utiliser setTimeout à plusieurs endroits, mais sans succès ... Quelqu'un peut-il m'aider à déterminer où une utilisation de setTimeout est manquante?

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;
  }
}

javascript

0

Asaf 8 nov. 2019 à 12:31

Answer

Je ne suis pas sûr à 100% qu'il résoudra tout, mais le problème découle de ce qui suit, où vous allez appeler flashButton pour tous boutons après 900 millisecondes.

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);
}

Au lieu de cela, répartissez le tir, en augmentant le délai d'attente pour chaque bouton en utilisant 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));
}

J'utilise 900 * (i + 1) (au lieu de simplement 900 * i) sinon le premier bouton se déclencherait immédiatement (c'est-à-dire 900 * 0 = 0)

J'ai également remarqué que rndChoice() renvoie une valeur entière, que vous mettez dans sequence, et c'est cette valeur que vous passez à flashButton().

Dans flashButton(id), vous utilisez ce paramètre pour appeler document.getElementById(id) ... ce qui indique que vous avez le id des éléments définis sur des choses comme id="1", etc.

Malheureusement, le code HTML n'est pas valide pour avoir un caractère numérique comme premier caractère de la propriété id.

Vous devriez donc envisager de modifier le id et le document.getElementById en conséquence.

0

freefaller 8 nov. 2019 à 09:58

Question 2