skip to content

JavaScript: CSS-animated Card Game

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" 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

User Comments

Post your comment or question

21 May, 2020

I love this so as part of my COVID codecamp I have had a play with the new things I learnt and spun up this from your base.

I was using the unicode for another maths game for the kids so thought I would try to apply it.