HTML5 deck of cards management

The idea behind this new series of tutorials is based upon some concepts I have in mind for some easy card games. The first thing you have to do when dealing with a card game, is managing a deck of cards.

And the first thing you have to do when managing a deck of card is finding some nice playing cards icons. The pictures I am using in this prototype come from game-icons.net, the biggest online repository providing heaps of cool game related graphics under the terms of the Creative Commons 3.0 BY license.

It means that can use them freely as long as you credit the original author in your creation, just like I did :)

I combined the card icons in a big PNG file like this one:

cards

Which I will use as a sprite sheet. The original PSD file is as big as 4342×1760 and it’s included in the downloadable source code you will find at the end of this page.

Then, the small prototype I am showing you today is this one:

A deck of cards is shuffled and the first card is drawn on the table. Then you can swipe up to make next card appear above current card or swipe down to make next card appear below current card. Then next card takes the place of the current card which leaves the stage, and you can swipe to call the third card, and so on. If you have a mobile device, you can test the prototype from this link.

I have a couple of ideas in mind starting from this simple prototype.

The whole source code – uncommented yet because it’s still under development – is less than 100 lines, and easily understandable, but I just want you to see how easy is to create and shuffle an array representing a deck of cards – lines 24, 25 – just using ArrayUtils class.

Andif you want to make your own card game starting from this prototype, you can download the source code.

  • Great share dudes. Thank you so much!

  • jb

    the card texture is WAY too big for my mobile device.

    • Emanuele Feronato

      yes, I am about to publish a new post with 1024×1024 texture

    • Ademar Morais

      Boa tarde! Baixei o código fonte e no navegador não aparece, exceto o background azul. Este jogo não abre no navegador de pcs?