Cuando coloco el bucle while de esta manera, mi fondo y mis avisos nunca aparecen. No tengo ni idea de por qué estaría causando esto. Todo lo demás funciona a la perfección, solo una vez que agrego el ciclo while mi código se rompe. También probé un bucle for pero tampoco funciona.
//score var score = 0 //replay loop var replay = "yes" //name of each gen 1 pokemon var pname = ['#'] //images for each one var bg = ['#'] while (replay == 'yes'){ background = bg[num = Math.floor(Math.random() * bg.length)]; document.body.style.backgroundImage = 'url(' + background + ')'; setTimeout(() => { var answer = prompt("What pokemon is this?") if (answer.toLowerCase() == pname[num].toLowerCase()) { alert("correct") score ++ replay = prompt("Want to keep playing?") } else { alert("incorrect") replay = prompt("Want to keep playing?") } }, 2000); }La función setTimeout tardará 2 segundos antes de ejecutarse, lo que hará que su ciclo while se ejecute una gran cantidad de veces en 2 segundos... todo el tiempo actualizando la imagen de fondo (que probablemente lo hace fácilmente más de 10,000 X en 2 segundos .
Sugiero usar recursividad:
//score var score = 0; //replay loop var replay = "yes"; //name of each gen 1 pokemon // var pname = [#]; <- this needs to hold all the available names //images for each one //var bg = [#]; <-this needs to hold all the available images let keepPlaying = function(){ background = bg[Math.floor(Math.random() * bg.length)]; document.body.style.backgroundImage = 'url(' + background + ')'; var answer = prompt("What pokemon is this?") if (answer.toLowerCase == pname[num].toLowerCase) { alert("correct") score ++ replay = prompt("Want to keep playing?") } else { alert("incorrect") replay = prompt("Want to keep playing?") } if(replay == 'yes') keepPlaying() else return(score) }()El bucle while no esperará a que se complete setTimeout(). Necesita encontrar una forma diferente.
Estas dos líneas no son válidas.
var pname = [#] // var pname = ['#'] var bg = [#], // var bg = ['#'] var score = 0 var replay = "yes" var pname = ['#'] var bg = ['#'] var index = 0; (function asyncLoop() { background = bg[num = Math.floor(Math.random() * bg.length)]; document.body.style.backgroundImage = 'url(' + background + ')'; setTimeout(function() { var answer = prompt("What pokemon is this?") if (answer == pname[num]) { alert("correct") score ++ replay = prompt("Want to keep playing?") } else { alert("incorrect") replay = prompt("Want to keep playing?") } if (replay == 'yes'){ asyncLoop(); } }, 1000); })(); <body></body>Permítanme señalar algunas cosas en el código primero.
var pname = [#] --> no es una sintaxis válida
var bg = [#], --> no es válido y tiene una coma aquí
Además, la función setTimeOut se ejecuta muchas veces, por lo que el script no responde.
Prueba esto:
var pname = ['qq','ww','ee']; var replay = "yes"; var score = 0; var bg = []; var num = 1; keepPlaying(); function keepPlaying() { var answer = prompt("What pokemon is this?") if (answer == pname[num]) { alert("correct") score ++ replay = prompt("Want to keep playing?") } else { alert("incorrect") replay = prompt("Want to keep playing?") } if(replay == 'yes') { keepPlaying(); } else { alert(score); } }