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
Si hago una matriz dinámica cuyos valores están cambiando, luego empujo esas matrices a la matriz principal, entonces puede superar este problema.
let goalBoxes = document.querySelectorAll(".goal"); let user1 = [ ]; let user2 = [ ]; let ball1 = [ ]; let ball2 = [ ]; let ball3 = [ ]; let ball4 = [ ]; let ball5 = [ ]; let ball6 = [ ]; // Adding pattern values if (event.target.firstChild.className == "ball") { if (event.target.firstChild.id == "ball1") { ball1 = []; ball1.push(parseInt(patternIndex)); } else if (event.target.firstChild.id == "ball2") { ball2 = []; ball2.push(parseInt(patternIndex)); } else if(event.target.firstChild.id=="ball3"){ ball3 = []; ball3.push(parseInt(patternIndex)); } } else { if (event.target.id == "ball4") { ball4 = []; ball4.push(parseInt(patternIndex));; } else if (event.target.id == "ball5") { ball5 = []; ball5.push(parseInt(patternIndex));; } else(event.target.firstChild.id== " ball6") { ball6 = []; ball6.push(parseInt(patternIndex));; } } let user1pattern =[...ball1,...ball2,...ball3]; let user2pattern =[...ball4,...ball5,...ball6]; user1 = [...user1pattern]; user2 = [...user2pattern];En lugar de usar tantas matrices , el problema podría superarse agregando elementos en un índice específico como
let goalBoxes = document.querySelectorAll(".goal"); let user1 = []; let user2 = []; // Adding pattern values let id = event.target.firstChild.id; let className = event.target.firstChild.className; if (className == "ball") { if (id == "ball1") { user1[0] = parseInt(patternIndex); } else if (id == "ball2") { user1[1] = parseInt(patternIndex); } else if (id == "ball3") { user1[2] = parseInt(patternIndex); } } else { if (id == "ball4") { user2[0] = parseInt(patternIndex) } else if (id == "ball5") { user2[1] = parseInt(patternIndex); } else(id == "ball6") { user2[2] = parseInt(patternIndex); } }