estoy haciendo tic tac toe con un bot y necesito verificar si una celda está vacía o no. Hice que el bot funcionara, porque escribe una X al azar en el tablero, pero el bot escribe X sobre Os. así que necesito descubrir cómo verificar si una celda contiene X u Os, si no, coloque la X. En este momento, mi código es este.
const cellElement = document.querySelectorAll('[data-cell]') const winner = document.getElementById("winner") let nextTurn = false let winningConditions = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ] cellElement.forEach(cell => { cell.addEventListener("click", handleClick, { once: true }) function handleClick() { playerTurn(cell) checkWin() computerTurn() //check for draw } }); function playerTurn(cell) { if (nextTurn == false) { cell.innerHTML = "O" nextTurn = true } } function computerTurn() { if (nextTurn == true) { cellElement[Math.floor(Math.random() * cellElement.length)].innerHTML = "X" nextTurn = false } } function checkWin() { for (let winCondition of winningConditions) { if (winCondition.every(i => cellElement[i].innerHTML == "X")) { winner.innerHTML = "X WON!!!" } else if (winCondition.every(i => cellElement[i].innerHTML == "O")) { winner.innerHTML = "O WON!!!" } } }lo que he intentado es esto, pero lo que hace es que solo pone x en la primera celda y luego avanza 1 celda, pero a pesar de que hay una O allí, simplemente se sobrescribe.
function computerTurn() { for (let i = 0; i < cellElement.length; i++) { console.log(cellElement[i]); if (nextTurn == true) { if (cellElement[i].innerHTML !== "X" && "O") { cellElement[i].innerHTML = "X" nextTurn = false break; } } else { computerTurn() } } }puede probar el código aquí https://jsfiddle.net/tv01cy7x/3/
Tú no puedes hacer
if (cellElement[i].innerHTML !== "X" && "O") { cellElement[i].innerHTML = "X"pero
const val = cellElement[i].innerHTML if ( val !== "X" && val !== "O") En un if , cada condición se evalúa de forma independiente, por lo que cuando coloca un && aún necesita decirle qué variable comparar
En otras palabras: if ( val !== "X" && "O") es equivalente a if ( "O" && val !== "X") y porque cualquier cosa que no sea nulo o 0 o indefinido, es igual a True , es equivalente a: if ( val !== "X" && true ) entonces equivalente a if ( val !== "X" )
Lo que podrías hacer para encontrar un lugar aleatorio X sería:
function computerTurn(){ r = Math.floor(Math.random() * cellElement.length); if (cellElement[i].innerHTML !== "X" && "O") { cellElement[i].innerHTML = "X"; return 1; } return computerTurn(); }