Why doesn't my code generate only 2 of a type

Question

So I'm making a memory game with vanilla JS. The game is supposed to generate only 2 instances of one type of a card(Pokemon). My game has 4 different types of cards. In order to generate 2 instances of a type I use a different instance counter for each of the types an also a few if statements. For some reason when I run my code it generates a random amount of types. How can i fix this.

Github link here

Image

Answer 1

If you got a card the third time,you just generate a ranodm number again, which can of course be the type the fourth time, having 3 cards of one type.

You could fill an array like [0,0,1,1,2,2,3,3,4,4,5,5,...], make a random of array.length, take the value at the index and remove it from the array until array is empty.

var cards = new Array(20);

for(var i=0;i<cards.length/2;i++){
    cards[i*2] = i;
    cards[i*2 +1] = i;
}

console.log(cards);

while (cards.length > 0) {
    var index = Math.floor(Math.random() * cards.length);
    console.log(cards[index]);
    cards.splice(index, 1);

}

Answer 2

The problem is that a random number is generated after every if-clause, In doing so, your script doesn't check further.

//...
this.type = Math.floor(Math.random() * 4);
  if(this.type == 0){
     if(t0C < 2){
        t0C++;
     } else if(t0C == 2){
        this.type == Math.floor(Math.random() * 4);
        //what happens if this.type == 0?
     }
  } 

  if(this.type == 1){
  //...

You could improve your code by "cleaning" the Card "class" from the methods that aren't specific to the card.

function Card (id, type) {
  this.flipped = true;
  this.id = id;
  this.image = "";
  this.type = "";
  this.flip = function() {
  //do some stuff here...
  }
  this.setImage = function(src) {
  //do some stuff here...
  //this.image = ...
  }
  this.setType = function (type) {
  //some control over type parameter...
  //this.type = type;
  }
  //...
}

Keeping the other functions out of the Card class, you can keep your if-clauses more readable and effective:

var cards = []; //it will be 4 x 2 = 8 cards
var types = 4;
var peekCard = function(max) { //helper function to get a random number from 0 to max
  return Math.floor(Math.random() * max);
}


// helper function 
// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
/**
 * Shuffles array in place.
 * @param {Array} a items An array containing the items.
 */
function shuffle(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
}

//peek 4 different cards
while(cards.length < types) {
  var card = peekCard(types);
  if (cards.indexOf(card) === -1) {
    cards.push(card);
  }
}

//duplicate cards:
cards  = cards.concat(cards);
//shuffle cards:
cards = shuffle(cards);
console.log(cards);

Now you have an array of numbers that represent your couples of cards.

var c = [];
   for(var i = 0; i < cards.length; i++) {
    c[i] = new Card("c"+i, cards[i]);
    //...
   }