Estaba pensando en hacer un simple juego de tres en raya, pero en lugar de agregar X y 0, estaba pensando que cuando se hace clic en un cuadrado, ese cuadrado debe volverse rojo, luego hacer clic en otro cuadrado para que sea azul.
Todo estaba bien, hasta que los cuadrados se vuelven rojos cuando hago clic en ellos y en el siguiente clic no se vuelven azules. Probé de diferentes maneras, sin éxito. Finalmente, escribí el código así, para dejar muy claro que después de agregar la clase .red en el div en el que se hizo clic, el valor del reproductor actual debería cambiar, y luego, debido a que cambió, en el siguiente clic para agregar la clase .blue en se hizo clic en div. Pero se está volviendo rojo, no azul. ¿Qué debo hacer, de modo que en el siguiente clic, el div se vuelva azul? Gracias
let score=0 let blue ='blue',red = 'red' let currentPlayer = red const cells = [] // to keep all cell to iterate over them for(let i=0;i<9;i++){ const divCell = document.createElement('div') divCell.setAttribute('class', 'cell') divCell.setAttribute('id', i) gridWrapper.appendChild(divCell) cells.push(divCell) } cells.forEach( cell => { cell.addEventListener('click', (e)=> { let id = e.currentTarget.id if(!cells.id && currentPlayer === red){ cells[id] = currentPlayer e.target.classList.add('red') currentPlayer = blue console.log(currentPlayer); } if(!cells.id && currentPlayer === blue){ cells[id] = currentPlayer e.target.classList.add('blue') currentPlayer = red console.log(currentPlayer); } }) })```Creo que tiene un error lógico con la verificación de matriz de celdas que se ve en la imagen, se supone que son cells[id] y no cells.id
En cada clic, ambos if se invocan bloques. Porque los cambios realizados en el primer bloque if cumplen la segunda condición. Haz el segundo if y else if :
if (!cells.id && currentPlayer === red) { //... } else if (!cells.id && currentPlayer === blue) { //... }De esa manera, cada clic solo invoca el turno de un jugador en lugar de ambos.