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.
Related Articles - Games
- JavaScript Amazing Maze Game
- JavaScript Random Maze Generator
- JavaScript Playable Maze Game Generator
- JavaScript Memory Card Game with Animation
- JavaScript Twister Controller with Speech
- JavaScript Creating a Generator Function
- JavaScript Graphing Game
< JavaScript: Controlling CSS Animations
Marcus 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.
jsfiddle.net/bigtoerag/ab3uLg7k/
I was using the unicode for another maths game for the kids so thought I would try to apply it.