skip to content

JavaScript: CSS-animated Card Game

 Tweet Share0 Tweets

Below you will find a working example, along with source code and links to download the card images.

Working Demonstration

The card are already shuffled. To start playing, click on the card pile on the left:

Complete source code

<!DOCTYPE html> <html> <head> <title>JavaScript Card Game | The Art of Web</title> <link rel="stylesheet" type="text/css" href="/css-animation.css"> </head> <body> <div id="stage"><!-- --></div> <script src="/css-animation2.js"></script> <script> var game = new CardGame("stage"); </script> </body> </html>

Changes and enhancements

From the original code we've made a couple of important changes. Firstly, we've removed the browser-prefixes from our CSS as most/all browsers now support CSS Transforms. We've also added some randomness to the card placement to make things more realistic.

The JavaScript CardGame class uses the object as constructor approach and has no public methods.

< JavaScript: Controlling CSS Animations

Send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

<- copy the digits from the image into this box

press <Esc> or click outside this box to close

Post your comment or question
top