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 == [2, 3, 4, 5, 6, 7, 8, /*...*/ 36] 

но Ваш код также увеличивает переменную num:

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

поэтому значение 2 был пропущен.