Skip to content
Deck of Cards (old version)
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Latest commit 8d3be56 Mar 26, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update FUNDING.yml Jun 5, 2019
chrome added Chrome app source Sep 8, 2015
css Add will-change Jun 19, 2017
dist fixes #36 Mar 29, 2017
example Add will-change Jun 19, 2017
lib Fix fisher-yates 🙈 Mar 26, 2020
views css transition -> JS animation Sep 16, 2015
.gitignore added npm-debug.log Sep 4, 2015
LICENSE Update LICENSE Nov 11, 2015
README.md Added financial contributors to the README Jul 15, 2019
index.js added card.animateTo() -method! Sep 23, 2015
package.js Meteor packaging Nov 30, 2015
package.json Added call to donate after npm install (optional) Jul 15, 2019

README.md

HTML5 Deck of Cards

Financial Contributors on Open Collective Gitter

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

Featured on

You can’t perform that action at this time.