Let's begin from our last matching game example. We have styled the CSS, and now, it is time to add the game logic in the js/matchgame.js file.

The game is to match pairs of playing cards. We have 12 cards now, so we need six pairs of playing cards. Put the following code in the js/matchgame.js file. The array declares six pairs of card patterns:

var matchingGame = {};
matchingGame.deck = [
  'cardAK', 'cardAK',
  'cardAQ', 'cardAQ',
  'cardAJ', 'cardAJ',
  'cardBK', 'cardBK',
  'cardBQ', 'cardBQ',
  'cardBJ', 'cardBJ',
];

We aligned the cards in jQuery's ready function in the previous chapter. Now we need to prepare and initialize more code in the ready function. To do this, change the ready function into the following code. The changed code is highlighted here:

$(function...