Pure vanilla JS (+ CSS3) – no dependencies, by Juha Lindstedt & contributors.
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!
I'm currently rewriting the Deck of Cards. Lots of cool stuff coming soon! 😉
LGPL if you use Chris Aguilar's vector playing cards. Otherwise MIT.
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><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/
// Instanciate 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);// 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/
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/
npm install
npm start
(starts watching for 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
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
- Make z-index temporary by reordering DOM elements between actions
- Enhance API, make more flexible
- https://reddit.com/r/InternetIsBeautiful/comments/3jmq97/html5_deck_of_cards/
- https://news.ycombinator.com/item?id=10164513
- http://tympanus.net/codrops/collective/collective-184/
- https://github.com/trending?since=weekly
- https://twitter.com/fwa/status/639719192158171136
- https://twitter.com/search?q=%22html5+deck+of+cards%22
- https://theslackpost.com/tmpg
- http://news.js.org/
- http://boredmachine.com/go/rKv6A
- http://www.moongift.jp/2015/09/html5-deck-of-cards-html5%E8%A3%BD%E3%81%AE%E3%83%88%E3%83%A9%E3%83%B3%E3%83%97/
- http://www.blogduwebdesign.com/ressources-jeux/ressourcescreer-manipuler-cartes-HTML-Javascript-nodejs-Ruby/1933
- http://fex.baidu.com/blog/2015/09/fex-weekly-07/