Estoy haciendo un tic tac toe en js con fines de aprendizaje, sin embargo, estoy un poco atascado. mi código es:
for (let i = 0; i <= 2; i++) { for (let j = 0; j <= 2; j++) { const newElement = document.createElement('td'); tableR.item(i).appendChild(newElement); newElement.addEventListener('click', () => { if (elementIsEmpty(newElement)) { const img = document.createElement('img'); if (xTurn) { img.src = 'images/x.svg'; x.push(String(i) + String(j)) } else { img.src = 'images/o.png'; o.push(String(i) + String(j)) } newElement.append(img) console.log("here") checkWinOrDraw(xTurn) xTurn = !xTurn } }) }}
y mi función checkWinOrDraw es:
let winPat = [['00', '10', '20'], ['01', '11', '21'], ['02', '12', '22'], ['00', '01', '02'], ['10', '11', '12'], ['20', '21', '22'], ['00', '11', '22'], ['02', '11', '20']]; function checkWinOrDraw(xTurn) { for (let i = 0; i < winPat.length; i++) { if (xTurn) { if (winPat[i].every(element => x.includes(element))) { alert('X wins') reset() return } } else { if (winPat[i].every(element => o.includes(element))) { alert('O wins') reset() return } } } for (let item of td) { if (elementIsEmpty(item)) return } alert('Draw') reset()}
Sin embargo, cuando finaliza el juego, la última imagen no se muestra en la pantalla. Por ejemplo, cuando X gana, recibo una alerta ("x gana") pero la imagen de x en la celda no se muestra.