Blog

Using OOP JavaScript and jQuery to Shuffle a Deck of Cards, Deal a First Card, Deal a Random Card, and use this
Posted on July 9, 2015 in JavaScript, jQuery by Matt Jennings

Some of the code snippets below are from my deck of cards JavaScript game that uses object constructors, methods, and images to represent the cards. In the future, I may add a blackjack game where the dealer faces off against a single player.

Example JavaScript to Shuffle the Deck

$(function() {
// Deck of Cards Game JavaScript

    // Deck constructor
    function Deck() {
        this.cardMin = 1;
        this.cardMax = 52;

        this.showCardsArr = function () {
            this.dealerCardsArr = [];

            for (var i = this.cardMin; i <= this.cardMax; i++) {
                this.dealerCardsArr.push(i);
            }

            return this.dealerCardsArr;
        };

        this.shuffleDeck = function() {
            $("#dealer-cards").empty();

            var cards = this.showCardsArr();
            var j = 0;
            var temp = null;

            for (var i = cards.length - 1; i > 0; i -= 1) {
                j = Math.floor(Math.random() * (i + 1));
                temp = cards[i];
                cards[i] = cards[j];
                cards[j] = temp;

                $("#dealer-cards").append("<img id='dealer_card_" + cards[i] + "' src='images/" + cards[i] + ".png' width='50'/>");
            }

            return this;
        }

    }

    // Create new object instance for Deck
    var dealerDeckAction = new Deck();

    // When clicking #shuffle-deck link
    // execute shuffle deck function
    $("#shuffle-deck").on("click", function(e) {
        e.preventDefault();
        dealerDeckAction.shuffleDeck();
    });

});

Example JavaScript to Deal a First Card

$(function() {
// Deck of Cards Game JavaScript

    // Deck constructor
    function Deck() {
        this.cardMin = 1;
        this.cardMax = 52;

        this.showCardsArr = function () {
            this.dealerCardsArr = [];

            for (var i = this.cardMin; i <= this.cardMax; i++) {
                this.dealerCardsArr.push(i);
            }

            return this.dealerCardsArr;
        };

        this.dealFirstCard = function() {
            var firstCard = $("#dealer-cards").children("img").first();

            firstCard.clone().appendTo("#player-cards");
            firstCard.remove();

            return this;
        }

    }

    // Create new object instance for Deck
    var dealerDeckAction = new Deck();


    $(document).on("click", "#deal-first-card", function(e) {
        e.preventDefault();
        dealerDeckAction.dealFirstCard();
    });
    
});

Example JavaScript to Deal a Random Card

$(function() {
// Deck of Cards Game JavaScript

    // Deck constructor
    function Deck() {
        this.cardMin = 1;
        this.cardMax = 52;

        this.showCardsArr = function () {
            this.dealerCardsArr = [];

            for (var i = this.cardMin; i <= this.cardMax; i++) {
                this.dealerCardsArr.push(i);
            }

            return this.dealerCardsArr;
        };

        this.dealRandomCard = function() {
            var randomCard = $("#dealer-cards").children("img").eq(Math.floor(Math.random() * this.cardMax));

            randomCard.clone().appendTo("#player-cards");
            randomCard.remove();

            return this;
        }

    }

    // Create new object instance for Deck
    var dealerDeckAction = new Deck();


    $(document).on("click", "#deal-random-card", function(e) {
        e.preventDefault();
        dealerDeckAction.dealRandomCard();
    });

});

Example JavaScript, Using this, Discarding a Player’s Card when Clicked On

$(function() {
// Deck of Cards Game JavaScript

    // Player constructor
    function Player() {

        // discardCard method
        this.discardCard = function(imgID) {
            $(imgID).remove();

            console.log(imgID);
            return this;
        };

    }

    // Create new object instance for Player
    var playerHand = new Player();

    // When clicking on a card image in the player's hand
    // remove it from said player's hand
    $(document).on("click", "#player-cards > img", function(e) {
        e.preventDefault();

        playerHand.discardCard("#" + $(this).attr('id'));
    });

});

Example HTML

<h1>Deck of Cards JavaScript Game</h1>

<div id="player-cards">

    <h3>Player</h3>
    <span></span>
    <p><a href="#" id="add-name">Add/Change<br />Player Name</a></p>

</div>

<div id="dealer">

    <h3>Dealer</h3>
    <img src="images/dealer.png" alt="dealer"/>

    <ul>
        <li><a id="reset-deck" href="#">Reset Deck</a></li>
        <li><a id="shuffle-deck" href="#">Shuffle Deck</a></li>
        <li><a id="deal-first-card" href="deal-first-card">Deal First Card</a></li>
        <li><a id="deal-random-card" href="#">Deal Random Card</a></li>
    </ul>

    <div id="dealer-cards"></div>

</div>