PARTE DEL CUERPO HTML
<body> <div class="main"> <img class="red" src="red.png" alt=""> <img class="blue" src="blue.png" alt=""> <img class="green" src="green.png" alt=""> <img class="yellow" src="yellow.png" alt=""> <div class="btn"> <button class="play">Play</button> <button class="restart">Restart</button> </div> </div> </body> </html>PARTE JS
const play=document.querySelector(".play") const restart=document.querySelector(".restart") let items=['red','blue','green','yellow'] let sequence=[] let generateRandomSequence=()=>{ let count=Math.trunc(Math.random()*4) sequence.push(items[count]) console.log(sequence) } let makeColorBright=async (array)=>{ let second=()=>{ for(item of array){ console.log(item) document.querySelector(`.${item}`).style.filter="brightness(2)" setTimeout(()=>{ document.querySelector(`.${item}`).style.filter="brightness(1)" },2000) } } return second() } play.addEventListener("click",async function(){ generateRandomSequence() await makeColorBright(sequence) })Entonces, la función generateRandomSequence() funciona bien, y agrega elementos aleatorios en secuencia cada vez que presiono reproducir. Inicialmente, mi objetivo era ver si puedo hacer que se iluminen bloques aleatorios para los que he usado una matriz de secuencia. Ahora makeColorBright() tomará entradas de la secuencia y el objetivo es hacer que un color se ilumine y luego esperar 2 segundos antes de que se apague, y luego pasar al siguiente color. Pero el problema es que funciona bien solo para un elemento en la matriz Sequence. Cuando hay 2 o más elementos en secuencia, todos los colores se encienden simultáneamente, pero solo el último elemento se enciende después de 2 segundos.
Puede cambiar for(item of array){ a for (let item of array) { para reducir el alcance de la variable item . Sin embargo, incluso después de arreglar eso, no creo que la secuencia de comandos funcione como se esperaba, ya que llama a setTimeout en sucesión, sin esperar.
Hay algunas formas de arreglarlo. Aquí hay uno que crea una función de tiempo de espera usando Promises.
(Nota: cambié las imágenes a divs y brillo a opacidad para facilitar la creación de un fragmento de código).
const play = document.querySelector(".play"); const restart = document.querySelector(".restart"); let items = ['red', 'blue', 'green', 'yellow']; let sequence = []; let generateRandomSequence = () => { let count = Math.trunc(Math.random() * 4); sequence.push(items[count]); } // Sleep function const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); async function makeColorBright(array) { for (let color of array) { await wait(500) .then(() => document.querySelector(`.${color}`).style.opacity = 1); await wait(1500) .then(() => document.querySelector(`.${color}`).style.opacity = .2); } } play.addEventListener("click", async function() { generateRandomSequence(); makeColorBright(sequence); }) .box { width: 50px; height: 50px; display: inline-block; opacity: .2; } .red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } .yellow { background-color: yellow; } <div class="main"> <div class="box red"></div> <div class="box blue"></div> <div class="box green"></div> <div class="box yellow"></div> <div class="btn"> <button class="play">Play</button> <button class="restart">Restart</button> </div> </div>No he usado mucho await/async, la respuesta de Johnny puede ser mejor que mi solución, pero activa tus luces en una sucesión cronometrada como querías. Tenías un tiempo de espera para apagar las luces, pero no cuando se encienden.
const play=document.querySelector(".play") const restart=document.querySelector(".restart") let items=['red','blue','green','yellow'] let sequence=[] let generateRandomSequence=()=>{ let count=Math.trunc(Math.random()*4) sequence.push(items[count]) console.log(sequence) } doThing = async(item, t)=>{ setTimeout(()=>{ document.querySelector(`.${item}`).style.filter="brightness(2)"; setTimeout(()=>{ document.querySelector(`.${item}`).style.filter="brightness(1)"; }, 1000); }, t); } play.addEventListener("click",async function(){ generateRandomSequence() let t = 0; for(item of sequence){ doThing(item, t*1000); t++; } }) img{width:50px;height:50px} .red{background:red;} .blue{background:blue;} .green{background:green} .yellow{background:yellow} <div class="main"> <img class="red" src="red.png" alt=""> <img class="blue" src="blue.png" alt=""> <img class="green" src="green.png" alt=""> <img class="yellow" src="yellow.png" alt=""> <div class="btn"> <button class="play">Play</button> <button class="restart">Restart</button> </div> </div>