javascript - Creating Playing Cards - Stack Overflow

admin管理员组

文章数量:1295863

Having an issue creating objects in JavaScript.

Trying to create a deck of playing cards which I can then display however I want. I am good with the HTML stuff to display them, just having an issue understanding what I am doing wrong in the JavaScript which is only creating undefined cards for me.

(function () {

function Card (rank, suit) {

    this.rank = rank;
    this.suit = suit;

};

function Deck() {

    this.deck = new Array();

    this.makeDeck = makeDeck;
    this.shuffle = shuffle;
    this.deal = deal;
}
function makeDeck() {

    var ranks = new Array("A", "2", "3", "4", "5", "6", "7", "8", "9", "10",
                    "J", "Q", "K");
    var suits = new Array("Clubs", "Diamonds", "Hears", "Spades");

    this.deck = new Array(52);

    var i, j;
    for (i = 0; i < suits.length; i++) {
        for (j = 0; j < ranks.length; j++) {
            this.deck[i*ranks.length + j] = new Card(ranks[j], suits[i]);
            document.write("Card made \n");
        }
    }
};

function shuffle() {
    var i, n, j, temp;
    for (i = 0; i < n; i++) {
        for (j = 0; j < this.deck.length; j++) {
            k = Math.floor(Math.random() * this.deck.length);
            temp = this.deck[j];
            this.deck[j] = this.deck[k];
            this.deck[k] = temp;
        }
    }
    document.write("Cards Shuffled");
};



function deal() {

    if (this.deck.length > 0) {
        return this.deck.shift();
    }
    else return null;
};

var deck = new Deck();

deck.makeDeck();
deck.shuffle();
for (i = 0; i < 2; i++) {
    for (j = 0; j < 5; j++) {
        var Card = new Card(deck.deal);
        var c = JSON.stringify(Card);
        document.write(this.deck[j]);
    }
}


   } ());

Having an issue creating objects in JavaScript.

Trying to create a deck of playing cards which I can then display however I want. I am good with the HTML stuff to display them, just having an issue understanding what I am doing wrong in the JavaScript which is only creating undefined cards for me.

(function () {

function Card (rank, suit) {

    this.rank = rank;
    this.suit = suit;

};

function Deck() {

    this.deck = new Array();

    this.makeDeck = makeDeck;
    this.shuffle = shuffle;
    this.deal = deal;
}
function makeDeck() {

    var ranks = new Array("A", "2", "3", "4", "5", "6", "7", "8", "9", "10",
                    "J", "Q", "K");
    var suits = new Array("Clubs", "Diamonds", "Hears", "Spades");

    this.deck = new Array(52);

    var i, j;
    for (i = 0; i < suits.length; i++) {
        for (j = 0; j < ranks.length; j++) {
            this.deck[i*ranks.length + j] = new Card(ranks[j], suits[i]);
            document.write("Card made \n");
        }
    }
};

function shuffle() {
    var i, n, j, temp;
    for (i = 0; i < n; i++) {
        for (j = 0; j < this.deck.length; j++) {
            k = Math.floor(Math.random() * this.deck.length);
            temp = this.deck[j];
            this.deck[j] = this.deck[k];
            this.deck[k] = temp;
        }
    }
    document.write("Cards Shuffled");
};



function deal() {

    if (this.deck.length > 0) {
        return this.deck.shift();
    }
    else return null;
};

var deck = new Deck();

deck.makeDeck();
deck.shuffle();
for (i = 0; i < 2; i++) {
    for (j = 0; j < 5; j++) {
        var Card = new Card(deck.deal);
        var c = JSON.stringify(Card);
        document.write(this.deck[j]);
    }
}


   } ());

• javascript
• object

Share Improve this question Follow edited Oct 8, 2014 at 2:44 TheCrownedPixel asked Oct 8, 2014 at 1:46 TheCrownedPixelTheCrownedPixel 36911 gold badge77 silver badges1818 bronze badges 2

• 1. Array literal syntax (['a', 'b']) is usually preferable to using the Array constructor. 2. Look at what you're doing in makeDecks. 3. You should use DOM methods such as document.body.appendChild(document.createTextNode('x')) rather than document.write. – Qantas 94 Heavy Commented Oct 8, 2014 at 1:53
• Not really understanding what you are saying. – TheCrownedPixel Commented Oct 8, 2014 at 2:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This is the problematic line :

this.deck = new Card(ranks[j], suits[i]);

this.deck is supposed to be the array that includes all your cards, but with the above line, you're overriding it everytime with the single new card.

You have 2 options :

First option

Instead of this.deck = new Array(52), use this.deck = [] instead, initializing an empty array to this.deck.

Then use this.deck.push(new Card(ranks[j], suits[i])) to push all the binations of the cards to your deck.

Second option

The problem with the first option is that array.push is not really efficient. Read this for more info. It wouldn't really matter for a 52-sized array, just putting this on the table for everyone's info.

Alternatively, you could use this.deck[i] = new Card(ranks[j], suits[i]) to populate your array. You could use this.deck = [] or this.deck = new Array(52) for this. Either would work.

In your "main" execution part :

var deck = new Deck();

deck.makeDeck();
deck.shuffle();
for (i = 0; i < 2; i++) {
    for (j = 0; j < 5; j++) {
        var Card = new Card(deck.deal);
        var c = JSON.stringify(Card);
        document.write(this.deck[j]);
    }
}

There are several things worth noting.

1. Change var Card from var Card = new Card(deck.deal);, as the variable Card overrides the function Card after the first iteration.
2. deck.deal is a function. What you need is deck.deal's return value, therefore, you must use deck.deal()
3. document.write(this.deck[j]); - You should use deck.deck[j] instead, because what you need to access is the deck you initialized in var deck, and to access the actual deck of cards, you need to access the deck property of the object deck. Therefore, you need to use deck.deck[j]

I am no expert in JS but one thing that rings to me is in your for cycle the deck assignment this.deck = new Card(ranks[j], suits[i]); shouldn't it also be indexed as you create the cards as in:

for (i = 0; i < suits.length; i++) {
        for (j = 0; j < ranks.length; j++) {
            this.deck[ranks.length*i+j] = new Card(ranks[j], suits[i]);
        }
    }

Probably that is why you do not have the deck you wished to form

本文标签： javascriptCreating Playing CardsStack Overflow