Deck of Playing Cards in JavaScript

June 3rd, 2010 | Categories: CSS, JavaScript, jQuery | Tags: , , ,

So, I drank a whole pot of coffee yesterday. And it was a black, black, pot of coffee--like the soul of an exploded quasar, black. Twelve hours later (midnight), I was buzzing. So, what did I do? I wrote a jQuery library.

Check out the project on github: jquery.playingcards.

Check out a demo here. The demo just writes the cards to the page and allows you to click them to flip the cards. Will add buttons for the other behaviors (shuffle, pile, etc) soon.

How?

I used jQuery as a base (it's a jquery plugin). However, this code could easily be extracted out to be used with any other JavaScript framework or even stand alone.

The cards are drawn mostly in CSS, using images only in the case of face cards--though, I have committed an open source card font that will eventually be implemented as a configuration option in place of the css/images. The images are courtesy of David Bellot with his awesome SVG card set.

Why?

  1. I wanted to use github since just about every cool project I've seen in the last 6 months is hosted there.
  2. I wanted to make a public jQuery plugin (made a few before but only proprietarily for companies so I couldn't share them)
  3. When interviewing developer candidates, I frequently ask that the person code a deck of cards with a few simple methods (init, shuffle, deal) and I realized that although I had thought a lot about this problem and seen other peoples code, I hadn't taken the time to write my own
  4. Doesn't everyone need a deck of cards? Why not have one in your JavaScript arsenal?

Get Involved

There's still a lot that can be added to this library. If you want to develop a game pack extension for it, let me know. Wouldn't it be cool to have a generic deck of cards and set of rules for every card game known to man, all written in JavaScript? I think so.

ToDo

  • Buttons for running demo methods (shuffle, deal, pile, etc)
  • Handling for including card.ttf as a font replacement for the css images (if set in config)
  • Keeping track of hands/players? -- probably an extension along with game rules
  • Game rule packs (maybe these will extend a board that keeps track of hands, players, score, etc

Let the games begin!

No comments yet.
You must be logged in to post a comment.