HTML5 Deck of Cards

NEW VERSION COMING UP!

The new multiplayer Deck of Cards is released at https://deck.of.cards, but will have it's cards library open sourced soon here!

Old version

Pure vanilla JS (+ CSS3) – no dependencies, by Juha Lindstedt & contributors.

https://deck.of.cards/old

Install from Google Chrome Web Store

Frontside card graphics are slightly modified from Chris Aguilar's awesome Vector Playing Card Graphics Set.

Also check out my RE:DOM and HTML5 Node Garden projects!

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

LGPL if you use Chris Aguilar's vector playing cards. Otherwise MIT.

Download

Installation from npm

npm install deck-of-cards

Then add in your html file

In <head>:

<link rel="stylesheet" href="node_modules/deck-of-cards/example/example.css">

At the end of the <body>:

<script src="node_modules/deck-of-cards/dist/deck.min.js"></script>

Usage

Full example

<html>
    <head>
        <title>Cards</title>

        <link rel="stylesheet" href="node_modules/deck-of-cards/example/example.css">
    </head>
    <body>
        <script src="node_modules/deck-of-cards/dist/deck.min.js"></script>

        <div id="container"></div>

        <script>
            var $container = document.getElementById('container');

            // create Deck
            var deck = Deck();

            // add to DOM
            deck.mount($container);

            deck.cards.forEach(function (card, i) {
                card.setSide(Math.random() < 0.5 ? 'front' : 'back');

                // explode
                card.animateTo({
                    delay: 1000 + i * 2, // wait 1 second + i * 2 ms
                    duration: 500,
                    ease: 'quartOut',

                    x: Math.random() * window.innerWidth - window.innerWidth / 2,
                    y: Math.random() * window.innerHeight - window.innerHeight / 2
                });
            });
        </script>
    </body>
</html>

Available on JsFiddle: http://jsfiddle.net/x0gjood1/

Javascript API

Deck

// Instantiate a deck
var deck = Deck();

// display it in a html container
var $container = document.getElementById('container');
deck.mount($container);

Deck example: http://jsfiddle.net/ec4kcx1k/

// Flip all cards in deck
deck.flip();

// Sort cards
deck.sort();

// Shuffle
deck.shuffle();

// Display fan
deck.fan();

// Remove deck from html container, hide it
deck.unmount();

Shuffle cards and fan: http://jsfiddle.net/favbdkta/

Deck with jokers:

// Instanciate a deck with jokers
var deck = Deck(true);

Card

// Select the first card
var card = deck.cards[0];

// Add it to an html container
card.mount($container);

// Allow to move/drag it
card.enableDragging();
card.disableDragging();

// Allow to flip it
card.enableFlipping();
card.disableFlipping();

// Flip card
card.flip();

// Display card front or back
card.setSide('front');
card.setSide('back');

Draggable and flippable card: http://jsfiddle.net/cgz9mjts/

Card in deck

Remove a card from a deck

var deck = Deck();

// Remove 10 cards starting from the 6th
var removedCards = deck.cards.splice(5, 10);

removedCards.forEach(function (removedCard) {
    removedCard.unmount();
});

Deck without Clubs: http://jsfiddle.net/L25facxj/

Build instructions

npm install
npm start

(starts watching for changes..)

Latest changes

0.1.4 card.animateTo() -method added –> simplier modules! Simple example of usage
0.1.3 JS animations (instead of CSS transitions)
0.1.2 Backside graphics + setRankSuit (+ card.value -> card.rank!)
0.1.1 Better organized modules + Chrome app
0.1.0 Realistic face graphics, notice change of license for now..
0.0.4 winning mode, simpler shuffling, CSS box-shadow change
0.0.3 big refactoring – code now easier to follow and in smaller pieces
0.0.2 made intro shorter & added "poker"
0.0.1 initial version

Where's what?

css/ - CSS source (stylus + nib) of the example

chrome/ - Chrome Web Store app source

dist/ - deck.js & deck.min.js

example/ - https://deck-of-cards.js.org

lib/ - JS (ES6) source of dist/deck.js - deck.js is also the main file

views/ - HTML source of the example

Note to self: todo

Make z-index temporary by reordering DOM elements between actions
Enhance API, make more flexible

desriix / deck-of-cards