I am trying to make 3 Men's Morris game. I created the game but there is little error or problem. When drag a ball to box its value pushed to Array but again drag the same ball to other box it pushed a new value to Array if the same ball match pattern it says user won without inserting other balls to game. Could there be a method to remove only the current ball value from Array. And could be any method to make the other player bot to auto play against like in tic tac toe. Here is my 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();
});
});
This is my codepen if want more details https://codepen.io/ghulamshabeer/pen/qBVavEg
If I make a dynamic Array whose values are changing then push those Arrays to main Array then you can overcome this problem.
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];
Instead of using so much arrays the problem could be overcome by adding item at specific index like
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);
}
}