Estoy creando un juego de tik tak toe con javascript. Así que ahora mismo lo estoy haciendo para que puedas jugar contra la computadora. Y lo hice funcionar, pero en este momento llena un campo en el tablero, y también tengo una matriz con gameState para rastrear qué campos en el tablero ya están llenos. Pero lo que hace ahora es que en ese matriz el movimiento de la computadora se pone en una posición incorrecta A VECES. No siempre, pero como 50/50 y, a veces, ni siquiera aparece en la matriz. Pondré mi código para la computadora abajo. La variable de campos es solo un querySelectorAll para los campos del tablero.
function handleComputerMove() { const emptyFields = []; let randomField; if (!gameActive || !gameState.includes("")) { return; } fields.forEach(function(cell){ if (cell.textContent == '') { emptyFields.push(cell); } }); randomField = Math.ceil(Math.random() * emptyFields.length -1); emptyFields[randomField].innerHTML = currentPlayer; handleCellPlayed(randomField); handleResultValidation(); }El problema es que el índice de los emptyFields no es (necesariamente) el índice de la celda que está libre.
Por lo tanto, debe volver a traducir eso al índice de la celda, que es lo que podría almacenar en los emptyFields (en lugar del elemento de la celda).
No es su problema, pero debe usar la forma más común de generar un número entero aleatorio, porque Math.random() puede, en teoría, devolver 0.
Asi que:
fields.forEach(function(cell, i){ if (cell.innerHTML == '') { emptyFields.push(i); // Store i, instead of cell } }); randomField = emptyFields[Math.floor(Math.random() * emptyFields.length)]; fields[randomField].innerHTML = currentPlayer;