循环从玩家手中取出卡片不起作用

Question

我正在开发一款纸牌游戏。它有一个playerHand 数组，由7 个卡片对象组成，属性为Valuesuit 和cardName。这些在屏幕上呈现为 7 个 div，共享类 .card 和与相应 cardName 匹配的唯一类，例如.six_hearts.ace_spades

当卡片 div 被点击时，它会接收到 .selected 类。然后将 Div 的 classList 推入一个名为 SelectedCardsImg 的数组中。

我要做的是从playerHand数组中删除相应的卡片对象，并将其推入一个名为selectedCards的新数组中。

let selectedCardsImg = [];
let selectedCards = [];

    //loop through array of card images
    for (var i = 0; i < selectedCardsImg.length; i++) {

      //loop through playerHand array (card objects)
      for (var x = 0; x < playerHand.length; x++) {

        //if the current card image classlist contains the current card objects name
        if (selectedCardsImg[i].contains(playerHand[x].cardName)) {

          //push it into the new array selectedCards
          selectedCards.push(playerHand[x]);

          //remove it from the playerHand array
          playerHand.shift(playerHand[x]);
      }
    }
  }

好的，所以我找到了一个解决方案，我没有尝试在一个循环中完成所有操作，而是编写了两个循环。将卡片推入selectedCards 数组：

    for (var i = 0; i < playerHand.length; i++) {
        let currentCard = playerHand[i];
        let currentCardName = playerHand[i].cardName;

        for (var x = 0; x < selectedCardsImg.length; x++) {
        let result = selectedCardsImg[x].contains(currentCardName);

            if (result) {
    
                selectedCards.push(currentCard);
            } 
        }
    }

然后第二个循环将selectedCards 数组与playerHand 数组进行比较，并从playerHand 中删除匹配项：

      for (var i = 0; i < selectedCards.length; i++) {
    
       console.log(selectedCards[i]);

       for (var x = 0; x < playerHand.length; x++) {

            if (selectedCards[i] === playerHand[x]) {
                playerHand.splice(x, 1);
                console.log(playerHand);
                console.log(selectedCards)
            } 
       }

        
    }

Answer 1

这是你想要的：

let selectedCardsImg = [];
let selectedCards = [];

//loop through array of card images
for (var i = 0; i < selectedCardsImg.length; i++) {

    //loop through playerHand array (card objects)
    for (var x = 0; x < playerHand.length; x++) {

        //if the current card image classlist contains the current card objects name
        if (selectedCardsImg[i].contains(playerHand[x].cardName)) {

            //push it into the new array selectedCards
            selectedCards.push(playerHand[x]);

            //remove it from the playerHand array
            playerHand.splice(x,1);
        }
    }
}

Answer 2

尝试使用.includes() 方法而不是 .contains()

另外，shift() 会从数组中移除第一个元素并返回该移除的元素。由于它改变了数组的长度，如果你指望数组“向前”，你可能会跳过数组中的项目。

Answer 3

要从 playHand 中取出已移除的牌，您必须这样做：

playerHand.shift()

这将返回数组的第一个元素。 目前，您正在向shift() 传递一个不正确的参数。

您必须记住，playerHand 的长度将通过执行shift() 操作而减少。

要修改实际数组，可以使用splice() 并删除第一个元素。

playerHand.splice(index, 1)

这样，你的实际数组将被修改，长度将被改变。

Answer 4

这可能是一个可能的解决方案

function action() {
    const playerHand = ['a', 'b', 'c', 'd'];
    const selectedCardsImg = ['class1', 'class2', 'b'];
    const selectedCards = [];

    selectedCardsImg.forEach(card => {

        if (playerHand.some(hand => hand === card)) {
            
            selectedCards.push(card);
            playerHand.splice(playerHand.indexOf(card), 1)
        }
    });

    return {playerHand, selectedCardsImg, selectedCards}
}

console.log( action() );