0

Apologies if this sounds very basic but I'm a total novice when it comes 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 compare 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;
}
Improve this question
3
  • 3
    Have you try something ? Commented Nov 16, 2013 at 16:06
  • Can you show the code you have so far? Commented Nov 16, 2013 at 16:09
  • 1
    I'm just completely 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! Commented Nov 16, 2013 at 16:10

3 Answers 3

Reset to default
4

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 comparison 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 comparison 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, compare 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

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

3 Comments

"poncy regex test" - what? I understand 'poncy,' but I fail to see how it applies to 'regex tests.'
Poor choice of words. I was thinking in terms of the OP being new to coding, regexs probably aren't going to be worth the trouble.
You have too many cards in your deck. There are 13 cards per suit, not 14. I tried to edit but it was directed by the mods. Also, I couldn't update your fiddler.
0

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.compare = function(a, b) {
    /* Define how you want to compare cards. My guess is: */
    return a.number < b.number;
};
Card.prototype.compareTo = function(other) {
    return Card.compare(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.compareTo(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.

Improve this answer

10 Comments

The OP is asking whether a card is higher or lower than the other.
It wasn't in the OP's spec, but I'll mention this here as this is probably the best answer. Just need to include that, once a card has been picked, it can't be picked again.
It sounds like the OP was also just learning JS. Introducing prototypes doesn't sound like a great idea when you could achieve something simpler.
@Andy but I think that doesn't merit a down vote if it's an legitimate and correct answer, however complicated it is. There's isn't only 'one' right answer.
@Andy I write answers in SO because I want to help. And I want to help as much as I can. So I won't post a worse answer only because there is a possibility that asker doesn't understand it, because with a better answer I can help more most people coming here searching an answer, even if some don't understand it. And maybe I can also help those which don't understand, because maybe they will learn and understand.
|
0

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*/
}
Improve this answer

2 Comments

What if the card was "club14.jpg". card.match(/\d/g) wouldn't work.
@Andy I just fixed it. I had meant to do card.match(/\d+/g) which works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.