jquery.concentration.js

Click on two cards to see if they match.

Code

<!doctype html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="jquery.concentration.css"/>
</head>
<body>
  <div id="concentration"></div>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.concentration.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $('#concentration').concentration({
        fronts: [ // images for card fronts. 8 of these will be picked at random
          'img/thumb_1.png', 'img/thumb_2.png', 'img/thumb_3.png', 'img/thumb_4.png',
          'img/thumb_5.png', 'img/thumb_6.png', 'img/thumb_7.png', 'img/thumb_8.png',
          'img/thumb_9.png', 'img/thumb_10.png', 'img/thumb_11.png', 'img/thumb_12.png',
          'img/thumb_13.png', 'img/thumb_14.png', 'img/thumb_15.png', 'img/thumb_16.png',
          'img/thumb_17.png', 'img/thumb_18.png', 'img/thumb_19.png', 'img/thumb_20.png',
          'img/thumb_21.png'
        ],
        back: 'img/thumb_back.png', // image for card back
        pairs: 8, // number of card pairs (so 16 cards). 8 is the default
        columns: 4 // 4 is the default
      });
    });
  </script>
</body>
</html>

Notes

Images © Hazel Newlevant. Reload the page to get a new game. The only reward for matching all the cards is the satisfaction of having done it.