Je me permets de solliciter votre aide à propos d'un script qui tourne dans le vide et dont la console web Mozilla ne renvoie pas d'erreur quand je l'arrête.
Il s'agit de faire un tourner un jeu avec 9 cases jaunes sur un fond bleu. Au début, lors du niveau 1, une case jaune est censé devenir orange puis redevenir jaune et si on clique dessus on passe au niveau 2 sinon on perd. En cas de passage au niveau 2, la case du niveau 1 devient orange puis redevient jaune puis une autre case suit le même processus. Pour passer au niveau 3, il faut successivement cliqué sur ces deux cases et ainsi de suite..
J'ai beau relire mon code mais je ne vois pas ce qui peut clocher. Le script n'est pas très long et si quelqu'un de calé aurait la gentillesse de me dire ce qui cloche, ça serait sympa.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Séquence simplifiée</title>
<style>
body{background-color:blue;}
button,td{background-color:yellow;}
table,button{
width:100%;
height:140px;
}
</style>
</head>
<body>
<html>
<table>
<tr>
<td id="c1"><button id="1"></button></td>
<td id="c2"><button id="2"></button></td>
<td id="c3"><button id="3"></button></td>
</tr>
<tr>
<td id="c4"><button id="4"></button></td>
<td id="c5"><button id="5"></button></td>
<td id="c6"><button id="6"></button></td>
</tr>
<tr>
<td id="c7"><button id="7"></button></td>
<td id="c8"><button id="8"></button></td>
<td id="c9"><button id="9"></button></td>
</tr>
</table>
<script>
let level=1;
let clique=0;
let numero=0;
let T=[];
let clique1=document.getElementById('1');
clique1.addEventListener('click',function(){clique=1;});
let clique2=document.getElementById('2');
clique2.addEventListener('click',function(){clique=2;});
let clique3=document.getElementById('3');
clique3.addEventListener('click',function(){clique=3;});
let clique4=document.getElementById('4');
clique4.addEventListener('click',function(){clique=4;});
let clique5=document.getElementById('5');
clique5.addEventListener('click',function(){clique=5;});
let clique6=document.getElementById('6');
clique6.addEventListener('click',function(){clique=6;});
let clique7=document.getElementById('7');
clique7.addEventListener('click',function(){clique=7;});
let clique8=document.getElementById('8');
clique8.addEventListener('click',function(){clique=8;});
let clique9=document.getElementById('9');
clique9.addEventListener('click',function(){clique=9;});
for(let j=1;j=level;j++){
let total=0;
do{
numero=Math.round(Math.alea*10);
}while((numero==0)||(numero==10));
T.push(numero);
for(let k=0;k<=level-1;k++){
switch(T[k]){
case 1:
let bgc2=document.getElementById('1');
bgc2.style.backgroundColor="orange";
bgc2.style.backgroundColor="yellow";
break;
case 2:
bgc2=document.getElementById('2');
bgc2.style.backgroundColor="orange";
bgc2.style.backgroundColor="yellow";
break;
case 3:
bgc2=document.getElementById('3');
bgc2.style.backgroundColor="orange";
bgc2.style.backgroundColor="yellow";
break;
case 4:
bgc2=document.getElementById('4');
bgc2.style.backgroundColor="orange";
bgc2.style.backgroundColor="yellow";
break;
case 5:
bgc2=document.getElementById('5');
bgc2.style.backgroundColor="orange";
bgc2.style.backgroundColor="yellow";
break;
case 6:
bgc2=document.getElementById('6');
bgc2.style.backgroundColor="orange";
bgc2.style.backgroundColor="yellow";
break;
case 7:
bgc2=document.getElementById('7');
bgc2.style.backgroundColor="orange";
bgc2.style.backgroundColor="yellow";
break;
case 8:
bgc2=document.getElementById('8');
bgc2.style.backgroundColor="orange";
bgc2.style.backgroundColor="yellow";
break;
case 9:
bgc2=document.getElementById('9');
bgc2.style.backgroundColor="orange";
bgc2.style.backgroundColor="yellow";
break;
}
/*différence transition JS vs CSS?*/
}
for(let i=0;i<=level-1;i++){
if(clique!=T[i]){
break;}
if(clique==T[i]){total=total+1;}
if(total==level){
level=level+1;}
}
};
alert("Niveau "+(level-1)+ "atteint");
alert(T);
</script>
</html>
</body>
Un petit conseil : Etudie les boucles et les collections (sachant que querySelectorAll('') renvie une collection) ainsi que les méthodes associées à ces "objets".
La condition de ta première boucle for est toujours remplie (puisque c'est une association non nulle et pas une comparaison) et donc celle-ci itère à jamais (ligne 56 stack overflow)
Quand tu commences à coder un truc qui est aussi redondant, ça doit t'interpeler immédiatement car ça signifie que tu ne t'y prends pas de la bonne manière 100% des cas (et je suis ferme dans mon pourcentage de probabilité )
Des balises <html> et </html> mal positionnées !
Ton usage de boutons dans chaque cellule de ton tableau est parfaitement inutile .
Les deux premiers points sont certainement ceux à l'origine de ton problème (j'entends par là le fait que ton script ne fasse rien.)
Je ne suis pas certain d'avoir compris ce à quoi tu cherchais à arriver avec ton code, mais voici ce que je te propose étant donné ce que je pense que tu souhaites faire :
<!DOCTYPE html>
<html><!-- balise <html> AVANT le <head> !!! -->
<head>
<meta charset="utf-8">
<title>Séquence simplifiée</title>
<style>
body {
background-color: blue;
}
table {
width:100%;
}
td {
background-color: yellow;
height:140px;
}
</style>
</head>
<body>
<table id="game">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p><input id="startButton" data-level="1" type="button" value="Démarrer le niveau 1" /></p>
<script>
const sleep = t => new Promise(res => setTimeout(res, t));
// On défini une fonction sleep permettant d'attendre un temps t au moyen d'une pomesse
const table = document.querySelector('#game');
const boxes = [...table.querySelectorAll('td')];
const startButton = document.querySelector('#startButton');
// On garde en mémoire la table, les td et le bouton de démarrage
const baseSignalDuration = 1000; // La durée de base du clignottement
const baseDelayDuration = 500; // La durée de base de délai entre deux clignottements
const clickValidationDuration = 200; // La durée de validation d'un clique
const degressionFactor = 3; // Plus ce chiffre est bas, plus la durée du clignottement sera réduit radipement à chaque nouveau niveau
let clickHistory = []; // L'historique des cliques à réaliser pour un niveau
let ready = false; // Détermine si le joueur peut intéragir avec les boutons
startButton.addEventListener('click', async function startGame(e) {
/**
* On défini un gestionnaire asynchrone d'événement click sur le bouton
* de démarrage du jeu.
*/
this.disabled = true; // On désactive le bouton dès qu'il est cliqué
this.value = `Partie en cours (niveau ${this.dataset.level}) - Mémoriser`;
// On change son texte
for(let i = 0; i < this.dataset.level; i++) {
// On itère selon une boucle dont le point d'arret est le niveau actuel
await sleep(baseDelayDuration / this.dataset.level ** (1 / degressionFactor));
// On attend le délais entre deux clignottements (modifié par le coefficient degressionFactor)
const box = Math.floor(Math.random() * boxes.length)
// On récupère un nombre aléatoire entre 0 et 8 inclus
clickHistory.push(box);
// On ajoute ce nombre à l'historique des cliques que le joueur doit effectuer
boxes[box].style.backgroundColor = 'orange';
// On modifie la couleur de fond du bouton correspondant à ce nombre en orange
await sleep(baseSignalDuration / this.dataset.level ** (1 / degressionFactor));
// On attend le délais de clignottements (modifié par le coefficient degressionFactor)
boxes[box].style.backgroundColor = null;
// On rétablit la couleur par défaut
}
ready = true; // On démare le jeu
this.value = `Partie en cours (niveau ${this.dataset.level}) - Répeter`;
// On change le texte du bouton de démarrage
});
table.addEventListener('click', function(e) {
/**
* On ne défini qu'un seul gestionnaire d'événement click sur tes td.
* Pourquoi ? Parce que c'est plus lisible et que la propagation
* des événements depuis les éléments enfants vers les éléments
* parents le permet.
*/
if(!ready) // Si le jeu n'est pas prêt à recevoir les cliques du joueur :
return; // On ne fait rien
if(boxes.indexOf(e.target) !== clickHistory.shift()) { // Si le bouton cliqué n'est pas le bon :
ready = false; // On arrête le jeu
e.target.style.backgroundColor = 'red'; // On fait clignotter le bouton concerné en rouge
sleep(clickValidationDuration).then(() => e.target.style.backgroundColor = null);
// On attends la durée de validation d'un clique pour rétablir la couleur par défaut
startButton.disabled = false; // On rend le bouton de démarrage du jeu cliquable à nouveau
startButton.value = `Raté (niveau ${startButton.dataset.level}) ! Recommencer ?`; // On change le texte de ce dernier
startButton.dataset.level = 1; // On redéfini le niveau à 1
clickHistory = []; // On réinitialise l'historique des cliques à effectuer
return; // On arrête la fonction
}
// Sinon :
e.target.style.backgroundColor = 'green'; // On fait clignotter le bouton concerné en vert
sleep(clickValidationDuration).then(() => e.target.style.backgroundColor = null);
// On attends la durée de validation d'un clique pour rétablir la couleur par défaut
if(!clickHistory.length) { // Si l'historique des cliques à réaliser est maintenant vide :
startButton.disabled = false; // On rend le bouton de démarrage du jeu cliquable à nouveau
startButton.dataset.level++; // On incrémente le niveau de 1
startButton.value = `Bravo ! Prochain niveau : ${startButton.dataset.level} ! Démarrer ?`;
// On change le texte du bouton de démarrage du jeu
ready = false; // On arrête le jeu
}
});
</script>
</body>
</html><!-- Fin de balise html APRES le </body> !!!! -->
Ce script est conçu de sorte à ce que tu puisses ajouter autant de ligne et de colonne que tu le souhaite dans ton tableau.
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]