HTML5 Deck of Cards

This is similar to something my room mate is working on: <a href="https:&#x2F;&#x2F;github.com&#x2F;thejoshwolfe&#x2F;board-gamer-2d" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;thejoshwolfe&#x2F;board-gamer-2d</a><p>The user can create a JSON string that represents a game (checkers, solitare, dominion, smash up, etc). Then the engine creates cards, tokens, dice, etc. It does not enforce rules but it supports multi player and some rules about visibility to other players. Its intended use case is for testing out new games or expansions before printing them.<p>It&#x27;s a little bit early in the project though, so you&#x27;d have to run it from source if you want a demo.

Maybe it&#x27;s a weird takeaway, but this line is really clever:<p>var suit = i &#x2F; 13 | 0;<p>That&#x27;s such a clean way to get a 0, 1, 2 or 3 from each card&#x27;s `i` and I <i>never</i> would have thought of it.

This is very pleasing to the eye to shuffle&#x2F;sort. Good work.<p>Now you just need to add a dropdown to select what drinking game you want to play.. ring of fire anyone?..

Any idea why the suits all render as smiley faces in Chrome&#x2F;Mac?<p>Inspecting the cards, you can see that they are using the unicode character for spade&#x2F;heart&#x2F;etc. But in the browser itself you get nothing but smileys.<p>Perhaps the font they&#x27;re using doesn&#x27;t have those code points?<p>Edit: Yes, that&#x27;s the case. Font is not specified, so it comes in as &quot;inherit&quot; by default, using whatever the browser feels like. On Mac Chrome, that must use smileys to represent unknown characters. Switching the document font to Arial in CSS fixes the issue and makes the cards look like cards.

Great work. There&#x27;s a couple of small issues. First, regardless of where you click on a card, when you start dragging the card will jump so that its centre is at the cursor position. Second, there is a mismatch on the Z-index used for dragging and that used when a card is dropped into place.

There&#x27;s one card face missing. That&#x27;s the back! A nice card back might be a more difficult challenge to do in HTML5.

Each of these cards could probably be made with one element and some CSS3 pseudo-element selectors, as opposed to the four elements (wrapper element and three child elements) that are currently used per card.<p>Additionally, with three elements (possible just one if you&#x27;re crazily good at CSS), it&#x27;d be possible to have flippable cards. Still just using CSS3.<p>Edit: Can someone explain these downvotes for me?

Nice animation although card faces need some work.<p>My own CSS playing cards with proper card faces from 3 years ago is here:<p><a href="http:&#x2F;&#x2F;donpark.github.io&#x2F;scalable-css-playing-cards&#x2F;" rel="nofollow">http:&#x2F;&#x2F;donpark.github.io&#x2F;scalable-css-playing-cards&#x2F;</a>

Really nice! An animation for turning the cards and the displaying of the back of the card would be a useful additional feature I guess.

It&#x27;d be perfect if the Z-index updated for card last selected. It looks like they&#x27;re z-indexed in a specific order at the moment?

What is it with cards that everything about them is so satisfying?

This is quite nice! One &quot;intuitive-but-counterintuitive&quot; result -- when the cards are stacked and I drag from the corner, I end up pulling a card from the middle of the deck.<p>I suppose that&#x27;s more for a second library that can manage stacks of cards, dealing and interacting with dealt cards, etc.

This kind of reminds me of something I almost ordered: <a href="http:&#x2F;&#x2F;varianto25.com&#x2F;code-deck.html" rel="nofollow">http:&#x2F;&#x2F;varianto25.com&#x2F;code-deck.html</a><p>Nice work by the way!

What? No 52 pick up? ;-)

Wow! Really nice. I love the animations.<p>I made an endless random card (and die roll) generator: <a href="http:&#x2F;&#x2F;staticresource.com&#x2F;shuffle.html" rel="nofollow">http:&#x2F;&#x2F;staticresource.com&#x2F;shuffle.html</a> just tap anywhere to draw a new card.<p>Seeing what you&#x27;ve done with your Deck of Cards is a big inspiration!

How did you get it to show up at the URL: <a href="http:&#x2F;&#x2F;pakastin.github.io&#x2F;deck-of-cards&#x2F;" rel="nofollow">http:&#x2F;&#x2F;pakastin.github.io&#x2F;deck-of-cards&#x2F;</a>?<p>I thought we needed to make a separate repository for github pages first. My other repo doesn&#x27;t show at all.

Very nice! I tried the CSS3 routes for card animations when I first built my card game ( <a href="https:&#x2F;&#x2F;solitaire.gg" rel="nofollow">https:&#x2F;&#x2F;solitaire.gg</a> ), but ended up going with WebGL since the cross-browser support for CSS3 animations was so wonky.

the animation is lovely and fluid. bit of a shame that the card faces don&#x27;t have the pictures for the royal cards and the usual layout of multiple suit signs on the number cards, but this is still super.

Very neat! Mind if I borrow some of the CSS for my cards trick[0]?<p>[0] <a href="http:&#x2F;&#x2F;cluecode.com&#x2F;cards&#x2F;" rel="nofollow">http:&#x2F;&#x2F;cluecode.com&#x2F;cards&#x2F;</a>

I wrote a simpler version of very nearly the same thing not long ago. But this one is <i>much</i> nicer. The animations, in particular, add a lot of flash.

Looks great! Ability to flip cards would be awesome. When the cards are fanned, I&#x27;d love to see the end one being flipped and they all domino over :)

Loved it :).Animations are beautiful, will be using them soon in card game I am developing. Thanks for releasing it at the right time for me.

gorgeous! really fine work. (granted i have no design talent, though i did work for an online poker shop for six years and i have played a lot of poker with friends and a lot house poker in casinos.<p>particularly awesome is &quot;sort&quot;, which i think really nicely simulates a (reverse) shuffle; it seemed like i could see the top edge of the cards lift as they rotated along the bottom edge

Way cool! Echoing the sentiments of others who&#x27;ve commented on the fluidity of the motions on display here.

This would be awesome for playing Magic The Gathering, grabbing the card art off of the gatherer site.

I want to deal a card game and play with someone. The cards need to be face down though.

Would be cool if you could drag select multiple cards to move hands around in the demo.

I&#x27;d love to build a cribbage game with this as the basis for the UI.

nitpick: when fanning out the cards and then clicking on one it should stay in the orientation it was in the fan, it jumps weirdly around.<p>same when clicking on the top card of a stack, it jumps ~40px.

Kudos for making this run smoothly on my three year old laptop!

More like JS + CSS3 Deck of Cards.

Mesmerizing.

What&#x27;s so HTML5 about this?