array.shift() removes only half array

Question

I'm developing a simple card game, for now i generate cards and then display them on the screen. Once the card is displayed, it is removed from the array (array.shift()). The code works fine but only for half of the array. In total there are 36 cards, i can display and shift only 18 cards.

If I remove deckOfCards.shift(); from drawCard function, then I can display all 36 cards.

I need to be able to display all 36 cards and remove them all from the array as they appear on screen. I can't see where lies the problem and why array.shift() works only for half of the array. Any help is greatly appreciated!

Here is my 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" />

Here i create cards

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

And here starts the actual function which gives me trouble

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

And here is the problem:

    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
}

Can you provide more context where where in your code that shift operation occurs? Someone would need to get an idea of the conditions right before it was executed and maybe even more than that to know why it's doing that. General basic debugging of a program is a pretty tall order for this site. Why don't you runt the code in a debugger and single step it and use print statements to get a feel how it's coming up short? — clearlight
– clearlight, Commented Mar 28, 2015 at 0:38

Radek · Accepted Answer · 2015-03-28 00:54:27Z

1

Your problem lies in the statement

switch(deckOfCards[num].suit){

If You want to use unshift(), num should be replaced there by 0.

Second solution is not to call .unshift() at all.

Explanation

Function Array.shift() deletes the first value from the array.

Let's assume that we have an array of indices:

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

// cards[num] == 1

After calling cards.unshift(), the value of cards will be:

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

but Your code also increases the num variable:

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

so the value 2 was skipped.

edited Mar 28, 2015 at 0:54

answered Mar 28, 2015 at 0:37

Radek

8464 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NataliaB Over a year ago

Thanks Ged for this awesome explanation! I changed my counter num to add 1 instead of 2 ( var num = (document.getElementById('theValue').value-1)+1;) so it won't skip an element in array and it works!

Collectives™ on Stack Overflow

array.shift() removes only half array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related