O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – adding game logic to the matching game

We have prepared the game environment in the last example and decided the game logic should be the same as playing a real deck. It is time to code the JavaScript logic now:

  1. 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.
  2. 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',
    ];
  3. We aligned ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required