当前位置：首页 > 软件库 > 游戏/娱乐 > >

deck-of-cards

Deck of Cards (old version)

授权协议 View license

开发语言 JavaScript

所属分类游戏/娱乐

软件类型开源软件

地区不详

投递者邢运良

操作系统跨平台

开源组织无

适用人群未知

软件概览

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

Featured on

使用案例

【leetcode】914. 卡牌分组（x-of-a-kind-in-a-deck-of-cards）（数学）[简单]

链接 https://leetcode-cn.com/problems/x-of-a-kind-in-a-deck-of-cards/ 耗时解题：33 min 题解：11 min 题意给定一副牌，每张牌上都写着一个整数。此时，你需要选定一个数字 X，使我们可以将整副牌按下述规则分成 1 组或更多组：每组都有 X 张牌。组内所有的牌上都写着相同的整数。仅当你可选的 X >= 2 时返回
ZOJ 2852 Deck of Cards DP

题意: 一一个21点游戏。 1. 有三个牌堆,分别为1X,2X,3X。 2. 纸牌A的值为1,纸牌2-9的值与牌面面相同,10(T)、J、Q、K的值为10,而而joke(F)的值为任意大大。 3. 一一列牌要按顺序放入入三个牌堆中。当某个牌堆的值超过21点时,不能在放牌;如果某个牌堆的总值为21点时,这个排队讲会被清空;joke放上后这个牌堆的值立立即变为21点。 4. 成功放上一一张牌得50
leetcode 914. X of a Kind in a Deck of Cards

unordered_map可类比于Python中的字典。其实现使用了哈希表，可以以O(1)的时间复杂度访问到对应元素，但缺点是有较高的额外空间复杂度。与之对应，STL中的map对应的数据结构是红黑树，红黑树内的数据时有序的，在红黑树上查找的时间复杂度是O(logN)，相对于unordered_map的查询速度有所下降，但额外空间开销减小。 class Solution { public:
LeetCode --- 914. X of a Kind in a Deck of Cards 解题报告

In a deck of cards, each card has an integer written on it. Return true if and only if you can choose X >= 2 such that it is possible to split the entire deck into 1 or more groups of cards, where: Ea
leetcode-914. X of a Kind in a Deck of Cards

In a deck of cards, each card has an integer written on it. Return true if and only if you can choose X >= 2 such that it is possible to split the entire deck into 1 or more groups of cards, where: Ea
Leetcode_Array --914. X of a Kind in a Deck of Cards [easy]

In a deck of cards, each card has an integer written on it. 在一副扑克牌中，每张牌上都写了一个整数 Return true if and only if you can choose X >= 2 such that it is possible to split the entire deck into 1 or more groups
Deck of Cards ZOJ - 2852 dp 多决策三维滚动更新

题意：一个特殊21点游戏具体http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2852 题解：建一个三维dp，表示三个卡槽分别为i,j,l分时最大的收益情况。　　　　对所有当前状态dp，将下一个可能的状态存入f，坑：~-1==0 #define _CRT_SECURE_NO_WARNINGS #include<cstri
Hongcow Buys a Deck of Cards CodeForces - 744C (状压)

大意: n个红黑卡, 每天可以选择领取一块红币一块黑币, 或者买一张卡, 第$i$张卡的花费红币数$max(r_i-A,0)$, 花费黑币数$max(b_i-B,0)$, A为当前红卡数, B为当前黑卡数, 求买完所有卡最少天数. 这题挺巧妙的, 刚开始看花费的范围太大一直在想怎么贪心... 实际上注意到减费最多只有120, 可以按照减费进行dp即可这题CF大神的最优解写了个模拟退火OR
LeetCode-X of a Kind in a Deck of Cards

Description： In a deck of cards, each card has an integer written on it. Return true if and only if you can choose X >= 2 such that it is possible to split the entire deck into 1 or more groups of car
LeetCode周赛#104 Q1 X of a Kind in a Deck of Cards (枚举)

题目来源：https://leetcode.com/contest/weekly-contest-104/problems/x-of-a-kind-in-a-deck-of-cards/ 问题描述 914. X of a Kind in a Deck of Cards In a deck of cards, each card has an integer written on it. Retur
C. Yet Another Card Deck-Educational Codeforces Round 107 (Rated for Div. 2)

Problem - 1511C - Codeforces C. Yet Another Card Deck time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standard output You have a card deck of nn cards, nu
CodeForces - 744C Hongcow Buys a Deck of Cards

Solution 朴素思路 f [ i ] [ j ] f[i][j] f[i][j] 表示取卡状态为 i i i，用了 j j j 颗红宝石，最少用蓝宝石的数量。瞄一眼数据 1 e 7 1e7 1e7，完全不可做。。。可以反着思考， f [ i ] [ j ] f[i][j] f[i][j] 表示取卡状态为 i i i，省了 j j j 颗红宝石，最多省蓝宝石的数量。为什么可以反着来？首先注
LeetCode 914. X of a Kind in a Deck of Cards

You are given an integer array deck where deck[i] represents the number written on the ith card. Partition the cards into one or more groups such that: Each group has exactly x cards where x > 1, and
leetcode （X of a Kind in a Deck of Cards）

Title：X of a Kind in a Deck of Cards 914 Difficulty：Easy 原题leetcode地址：https://leetcode.com/problems/x-of-a-kind-in-a-deck-of-cards/ 1. 方法比较丑陋：将每个数出现的次数存入到Map中，判断Map的长度，再将Map中的value存入到List中，对List
[leetcode] 914. X of a Kind in a Deck of Cards

Description In a deck of cards, each card has an integer written on it. Return true if and only if you can choose X >= 2 such that it is possible to split the entire deck into 1 or more groups of card
914. X of a Kind in a Deck of Cards*

914. X of a Kind in a Deck of Cards* https://leetcode.com/problems/x-of-a-kind-in-a-deck-of-cards/ 题目描述 In a deck of cards, each card has an integer written on it. Return true if and only if you can c
ZOJ - 2852 - Deck of Cards （三维DP）

Deck of Cards 题目链接： D - Deck of Cards ZOJ - 2852 题意按顺序给你很多的牌，牌的价值从1到10不等，有一张特殊的牌Joker可以代表尽可能大的值；然后给你三个插槽，从他们有自己的序号1，2，3. 我们可以把多张牌插入插槽，但是其值不能大于21；当插槽里面的牌值总和等于21时，可以将这里的牌都拿走。每成功插入一张牌就奖励50元如果操作4被执行，
914. X of a Kind in a Deck of Cards(Leetcode每日一题-2020.03.27)

Problem In a deck of cards, each card has an integer written on it. Return true if and only if you can choose X >= 2 such that it is possible to split the entire deck into 1 or more groups of cards, w
LeetCode--914. X of a Kind in a Deck of Cards

问题链接：https://leetcode.com/problems/x-of-a-kind-in-a-deck-of-cards/ 能想到的就是求多个数的公约数（只会求两个数的），但我不会求呀，然后想的解法就比较暴力，就是先找到数字出现次数中的最小值min，然后从min到2开始搜索找到能够被所有出现次数记录整除的数字。代码如下： class Solution { public boole