如何在元素更改時使動態值數組更改值

Question

我正在嘗試制作 3 Men's Morris 游戲。 我創建了游戲，但幾乎沒有錯誤或問題。 當將一個球拖到盒子時，它的值被推到數組，但再次將同一個球拖到另一個盒子時，如果相同的球匹配模式它說用戶贏了而沒有將其他球插入游戲，它就會將一個新值推到數組。 是否有一種方法可以僅從Array中刪除當前球值。 並且可以是使其他玩家機器人像井字游戲一樣自動對抗的任何方法。 這是我的 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();
  });
});

如果需要更多詳細信息，這是我的代碼筆https://codepen.io/ghulamshabeer/pen/qBVavEg

Answer 1

如果我創建一個值不斷變化的動態數組，然后將這些Arrays推送到主數組，那么您就可以解決這個問題。

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];

Answer 2

而不是使用這么多arrays可以通過在特定索引處添加項目來解決問題，例如

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);
    }
}