javascript - array.shift() 仅删除一半数组

Question

我正在开发一个简单的纸牌游戏，现在我生成纸牌，然后将它们显示在屏幕上。一旦卡片显示出来，它就会从数组中删除(array.shift())。该代码工作正常，但仅适用于数组的一半。总共有36张牌，我只能显示和移动18张牌。

如果我删除 DeckOfCards.shift();从drawCard函数中，我可以显示所有36张卡。

我需要能够显示所有 36 张卡片并将它们全部从阵列中删除(当它们出现在屏幕上时)。我看不出问题出在哪里以及为什么 array.shift() 仅适用于数组的一半。非常感谢任何帮助!

这是我的 html:

<p id="cardsLeft">here</p>
<div id="comp" class="area">Computer Cards Here</div>
<div id="play" class="area">Play Cards Here</div>
<div id="human" class="area">Human Cards Here</div>
<input type="button" onclick="drawCard(humanPlayer)" value="Human Card" id="humanCard" />
<input type="button" onclick="drawCard(compPlayer)" value="Computer Card" id="compPlayer" />

我在这里创建卡片

function Card(suit, value, rnum){
    this.suit = suit;
    this.value = value;
    this.rnum = rnum;
};
//Create array to hold Cards
var deckOfCards = [];

//Generate cards and push them into array
for(suit = 0; suit < 4; suit++){
    for (value = 6; value <=14; value++){
        var rnum = Math.floor(Math.random()*36+1);
        deckOfCards.push(new Card(suit,value,rnum)); 
    };  
};

//Sorting deck of cards by rnum to shuffle cards.   
deckOfCards.sort(function (a, b) {
    if (a.rnum > b.rnum) {
        return 1;
    }
    if (a.rnum < b.rnum) {
        return -1;
    }
    // a must be equal to b
    return 0;
});

这里开始了给我带来麻烦的实际功能

function drawCard(player) {
    var divPlayer = "";//creating div to find correct div in html

    if (player === compPlayer){
        divPlayer = "comp";
    }else{
        divPlayer = "human";
    };

    var ni = document.getElementById(divPlayer); //finds correct div based on       passed parameter
    var numi = document.getElementById('theValue'); //theValue is used to generate ids for divs
    var num = (document.getElementById('theValue').value-1)+2; //counter to keep track of how many cards has been assigned
    numi.value = num;
    var newdiv = document.createElement('div');
    var divIdName = 'my'+num+'Div';
    newdiv.setAttribute('id',divIdName);

    //Converting suite values into strings 
    var suit = '';
    switch(deckOfCards[num].suit){
    case 0: suit = "spades";
        break; 
    case 1: suit = "diamonds" ;
        break;
    case 2: suit = "hearts";
        break;
    case 3: suit = "clubs";
        break;
    };

    //assign corresponding image to newly created div
    newdiv.innerHTML = '<img   src="img/SVG/'+deckOfCards[num].value+'_of_'+suit+'.svg" class="card" alt="Card">';
    ni.appendChild(newdiv);

问题是这样的:

    deckOfCards.shift(); //removes only first 18 cards from array of 36 cards
    document.getElementById('cardsLeft').innerHTML = deckOfCards.length;    //counter of how many cards are left in the deck
}

Answer 1

你的问题出在声明中

switch(deckOfCards[num].suit){

如果您想使用unshift()，则应将num替换为0。

第二个解决方案是根本不调用 .unshift()。

说明

函数 Array.shift() 删除数组中的第一个值。

假设我们有一个索引数组:

var num = 0;
var cards = [1, 2, 3, 4, 5, 6, 7, 8, /*...*/ 36];

// cards[num] == 1

调用cards.unshift()后，cards的值为:

cards == [2, 3, 4, 5, 6, 7, 8, /*...*/ 36]

但是您的代码还增加了 num 变量:

// num == 1
// cards[num] == 3

因此值 2 被跳过。