Apologies if this sounds very basic but I'm a total novice when it es to coding (I'm trying my best to get better though!)

I'm making a simple higher or lower card game with javascript in which the user guesses if the next card will be higher or lower than the current card shown.

I currently have an array of 52 cards & I'm using Math.random to randomly generate a card from the array.

What I want is to pare the value of two cards but I'm not sure how to go about it. I've got a feeling it might involve IndexOf but I'm not sure.

Thanks a million & I'm sorry if this is off topic or a duplicate!

Here's my array if it helps.

function randomCard()
{
var cardArray = ["Club0.jpg","Club1.jpg","Club3.jpg","Club3.jpg","Club4.jpg","Club5.jpg","Club6.jpg","Club7.jpg","Club8.jpg","Club9.jpg","Club10.jpg","Club11.jpg","Club12.jpg","Diamond0.jpg","Diamond1.jpg","Diamond2.jpg","Diamond3.jpg","Diamond4.jpg","Diamond5.jpg","Diamond6.jpg","Diamond7.jpg","Diamond8.jpg","Diamond9.jpg","Diamond10.jpg","Diamond11.jpg","Diamond12.jpg","Heart0.jpg","Heart1.jpg","Heart2.jpg","Heart3.jpg","Heart4.jpg","Heart5.jpg","Heart6.jpg","Heart7.jpg","Heart8.jpg","Heart9.jpg","Heart10.jpg","Heart11.jpg","Heart12.jpg","Spade0.jpg","Spade1.jpg","Spade2.jpg","Spade3.jpg","Spade4.jpg","Spade5.jpg","Spade6.jpg","Spade7.jpg","Spade8.jpg","Spade9.jpg","Spade10.jpg","Spade11.jpg","Spade12.jpg"];

var pickCard = cardArray[Math.floor(Math.random() * cardArray.length)];
document.getElementById("card").src = pickCard;
}

Apologies if this sounds very basic but I'm a total novice when it es to coding (I'm trying my best to get better though!)

I'm making a simple higher or lower card game with javascript in which the user guesses if the next card will be higher or lower than the current card shown.

I currently have an array of 52 cards & I'm using Math.random to randomly generate a card from the array.

What I want is to pare the value of two cards but I'm not sure how to go about it. I've got a feeling it might involve IndexOf but I'm not sure.

Thanks a million & I'm sorry if this is off topic or a duplicate!

Here's my array if it helps.

function randomCard()
{
var cardArray = ["Club0.jpg","Club1.jpg","Club3.jpg","Club3.jpg","Club4.jpg","Club5.jpg","Club6.jpg","Club7.jpg","Club8.jpg","Club9.jpg","Club10.jpg","Club11.jpg","Club12.jpg","Diamond0.jpg","Diamond1.jpg","Diamond2.jpg","Diamond3.jpg","Diamond4.jpg","Diamond5.jpg","Diamond6.jpg","Diamond7.jpg","Diamond8.jpg","Diamond9.jpg","Diamond10.jpg","Diamond11.jpg","Diamond12.jpg","Heart0.jpg","Heart1.jpg","Heart2.jpg","Heart3.jpg","Heart4.jpg","Heart5.jpg","Heart6.jpg","Heart7.jpg","Heart8.jpg","Heart9.jpg","Heart10.jpg","Heart11.jpg","Heart12.jpg","Spade0.jpg","Spade1.jpg","Spade2.jpg","Spade3.jpg","Spade4.jpg","Spade5.jpg","Spade6.jpg","Spade7.jpg","Spade8.jpg","Spade9.jpg","Spade10.jpg","Spade11.jpg","Spade12.jpg"];

var pickCard = cardArray[Math.floor(Math.random() * cardArray.length)];
document.getElementById("card").src = pickCard;
}

• javascript
• arrays
• pare

• 3 Have you try something ? – Ankit Tyagi Commented Nov 16, 2013 at 16:06
• Can you show the code you have so far? – bitoffdev Commented Nov 16, 2013 at 16:09
• 1 I'm just pletely stuck & have no idea how to go about it. I'm sorry, I normally try and attempt things myself first but I'm very confused. Sorry! – user2984273 Commented Nov 16, 2013 at 16:10

3 Answers 3

I think the problem here is not that you don't have an understanding of arrays and looping, but how to frame your question properly before you start. At present you have the following:

var cardArray = ["Club0.jpg","Club1.jpg","Club3.jpg"...];

And it you're making your life much more difficult for yourself because performing a numerical parison on these array elements - while not impossible - would involve regex test that you're probably not quite ready for yet.

If instead you said "I have 4 suits of cards, and the cards have a value of 1 - 13 (11 being a Jack up to 13 a King, Aces low), then you can start to understand the problem scope better.

Let's start by creating the deck - four suits with 14 cards each.

var deck = {
  heart: [1,2,3,4,5,6,7,8,9,10,11,12,13],
  club: [1,2,3,4,5,6,7,8,9,10,11,12,13],
  spade: [1,2,3,4,5,6,7,8,9,10,11,12,13],
  diamond: [1,2,3,4,5,6,7,8,9,10,11,12,13]
};

We need to hold the names of the suits in a separate array so we can access the object.

var suits = ['heart','club','spade','diamond'];

Next, memo is important. Since we don't want to take an identical card on each draw we need to make a note of what cards have already been taken; memo is a store of chosen cards which we reference.

var memo = [];

Now for the function drawRandomCard. It takes a random suit from our suit array, and a number from the array of that chosen suit. If the card is in memo we draw again otherwise we add it to memo and return the card. However, because we still want to run a parison on the values, we're going to return an array, the first element is the suit, the second the value.

function drawRandomCard() {
  var suit = suits[Math.floor(Math.random() * suits.length)];
  var number = deck[suit][Math.floor(Math.random() * 13)];
  if (memo[suit + number]) drawRandomCard();
  memo.push(suit + number)
  return [suit, number];
}

For example:

var card1 = drawRandomCard();
var card2 = drawRandomCard();

To test the values, pare the second values of the array against each other:

console.log(card1[1] > card2[1]); // true or false

Then, should you want to, you can match the value of those variables to whatever images you need to load using join to merge the card array elements together.

var img = new Image();
img.src = card1.join('') + '.jpg'; // eg. diamond4.jpg

Or:

document.getElementById("card").src = card1.join('') + '.jpg';

Fiddle

I would use something like:

function Card(suit, number) {
    this.suit = suit;
    this.number = number;
}
Card.prototype.image = function() {
    return this.suit + this.number + '.jpg';
};
Card.pare = function(a, b) {
    /* Define how you want to pare cards. My guess is: */
    return a.number < b.number;
};
Card.prototype.pareTo = function(other) {
    return Card.pare(this, other);
};

var suits = ['Club', 'Diamond', 'Heart', 'Spade'],
    cardArray = [];
for (var i = 0; i < suits.length; ++i) {
    for (var j = 0; j <= 12; ++j) cardArray.push(new Card(suits[i], j));
}
var currentCard = cardArray[0]; /* Or whatever initial card */
function randomCard() {
    var pickCard = cardArray[Math.random() * cardArray.length | 0];
    if(currentCard.pareTo(pickCard)) {
        /* Do something */
    } else {
        /* Do something else */
    }
    document.getElementById("card").src = pickCard.image();
    currentCard = pickCard;
}

If you want that once a card has been picked, it can't be picked again (like @MackieeE said), replace

var pickCard = cardArray[Math.random() * cardArray.length | 0];

with

var pickCard = cardArray.splice(Math.random() * cardArray.length | 0, 1)[0];

in order to remove picked card from cardArray.

This will get the value out of the card's image string if card="Club10.jpg":

card.match(/\d+/g)

Will return:

10

For example:

var cardArray = ["Club0.jpg","Club1.jpg","Club3.jpg","Club3.jpg","Club4.jpg","Club5.jpg","Club6.jpg","Club7.jpg","Club8.jpg","Club9.jpg","Club10.jpg","Club11.jpg","Club12.jpg","Diamond0.jpg","Diamond1.jpg","Diamond2.jpg","Diamond3.jpg","Diamond4.jpg","Diamond5.jpg","Diamond6.jpg","Diamond7.jpg","Diamond8.jpg","Diamond9.jpg","Diamond10.jpg","Diamond11.jpg","Diamond12.jpg","Heart0.jpg","Heart1.jpg","Heart2.jpg","Heart3.jpg","Heart4.jpg","Heart5.jpg","Heart6.jpg","Heart7.jpg","Heart8.jpg","Heart9.jpg","Heart10.jpg","Heart11.jpg","Heart12.jpg","Spade0.jpg","Spade1.jpg","Spade2.jpg","Spade3.jpg","Spade4.jpg","Spade5.jpg","Spade6.jpg","Spade7.jpg","Spade8.jpg","Spade9.jpg","Spade10.jpg","Spade11.jpg","Spade12.jpg"];

var pickCard1 = cardArray[Math.floor(Math.random() * cardArray.length)];
var pickCard2 = cardArray[Math.floor(Math.random() * cardArray.length)];
if(parseInt(pickCard1.match(/\d+/g)) === parseInt(pickCard2.match(/\d+/g))){
    /*Do something here if the first equals the second card*/
} else if(parseInt(pickCard1.match(/\d+/g)) > parseInt(pickCard2.match(/\d+/g))){
    /*Do something here if the first card is greater than the second card*/
}else{
    /*Do something here if the first card is less than the second card*/
}