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;
}
}
1 réponse
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.