Skip to content
This repository has been archived by the owner on Feb 6, 2024. It is now read-only.

deck-of-cards/deck-of-cards

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 its 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:

// Instantiate 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