Creating a card-matching memory game

We have gone through some basic techniques in CSS. Now, let's make a game using the techniques. We are going to make a card game. The card game will make use of transform to flip the card, transition to move the card, JavaScript to hold the logic, and a new HTML5 feature called custom data attribute to store custom data. Don't worry, we will discuss each component step by step.

Downloading the sprite sheet of playing cards

In the card-flipping example, we were using the graphics of two different playing cards. Now, we will prepare graphics for the whole deck of playing cards. Although we will only use six playing cards in the matching game, we will prepare the whole deck so that we can reuse these graphics in other card games that we may create.

There are 52 playing cards in a deck and we have one more graphic for the backside. Instead of using 53 separate files, it is good practice to put separate graphics into one big sprite sheet file. Sprite...