Estoy tratando de hacer un juego Morris de 3 hombres. Creé el juego pero hay un pequeño error o problema. Cuando arrastra una bola al cuadro, su valor se empuja a Array pero nuevamente arrastra la misma bola a otro cuadro, empuja un nuevo valor a Array si el mismo patrón de coincidencia de bolas dice que el usuario ganó sin insertar otras bolas en el juego. ¿Podría haber un método para eliminar solo el valor actual de la bola de Array . Y podría ser cualquier método para hacer que el bot del otro jugador juegue automáticamente como en tres en raya. Aquí está mi JavaScript:

 let goalBoxes = document.querySelectorAll(".goal"); let user1 = [ ]; let user2 = [ ]; // Possible Win patterns let pattern = [ [1, 2, 3], // first row [4, 5, 6], // second row [7, 8, 9], // third row [1, 4, 7], // first column [2, 5, 8], // second column [3, 6, 9], // third column [1, 5, 9], // diagonal 1 [3, 5, 7] // diagonal 2 ]; // Check if anyone win or not function checkWinner(user) { let won = false; pattern.forEach((row) => { if ( user.indexOf(row[0]) > -1 && user.indexOf(row[1]) > -1 && user.indexOf(row[2]) > -1 ) { return (won = true); } }); return won; } function dragStart(event) { event.dataTransfer.setData(".", event.target.id); } function onDrop(event) { const id = event.dataTransfer.getData("."); const dragElem = document.getElementById(id); const patternIndex = event.target.getAttribute("data-index"); event.target.appendChild(dragElem); // Adding pattern values if (event.target.firstChild.className == "ball") { user1.push(parseInt(patternIndex)); } else { user2.push(parseInt(patternIndex)); } // Checking for Winner checkWinner(user1); checkWinner(user2); // Showing message on the screen if (checkWinner(user1) == true) { alert("User1 have won"); } else if (checkWinner(user2) == true) { alert("User2 have won"); } } goalBoxes.forEach((goal) => { goal.addEventListener("dragover", (event) => { event.preventDefault(); }); });

Este es mi codepen si quieres más detalles https://codepen.io/ghulamshabeer/pen/qBVavEg