Classic Board Game with jQuery

jQuery is enough to get simple board games with few code lines.
Memorize is one of the simplest games of this genre.
Combine them and obtain your first JavaScript game in few minutes.

Javier Beaumont

Social Point

jQuery: Advantages and Disadvantages

Pros
- Free Software
- Community and Documentation
- Browser, DOM and Ajax Support
Cons
- Performance and Size
- Structure and Organization
- Data Manipulation Support

Memorize: Definition and Screenshot

Show any compact set of unordered pairs of cards.
The cards will be hidden and shown when the player interacts with them.
Every pair of cards clicked will be checked for equality, in which case they will remain permanently visible. If they are different, they will hide again.

Memorize: Parts

Board
Playing Cards
Print Elements
Player Interaction

Board

Compact and rectangular area where the playing cards are grouped

// Board: Playing Card Distribution
  var couples = config.couples		// From configuration file
    , cards = couples * 2;

// Lists all divisors from number of playing cards
  for (var d = 1, l = []; d <= cards; d++){
    if(cards % d === 0) {
      l.push(d);
    }
  }

// Select best divisors from the list
  var w = (l.length % 2 === 0) ? [1, 0] : [.5, .5]
    , rows = l[l.length / 2 - w[0]]
    , cols = l[l.length / 2 - w[1]];

Memorize: Parts

Board
Playing Cards
- Selection
- Shuffling the deck
Print Elements
Player Interaction

Playing Cards: Selection

Select playing cards between available ones and, if possible, without repeating.

// Playing Cards Selection
  var couples = config.couples		// From configuration file
    , minId = config.id.min		// From configuration file
    , maxId = config.id.max		// From configuration file
    , list = [];

  while(list.length < couples) {
    var m = Math.floor((Math.random() * (maxId - minId)) + minId);

    if (maxId - minId <= list.length || $.inArray(m, list) === -1) {
      list.push(m);
    }
  }

Playing Cards: Shuffling the deck

Shuffle the deck to unsort the playing cards.

// Shuffle The Deck
  var list = [1, 2, 3, 4];

  $.merge(list, list).sort(function() {
    return 0.5 - Math.random();
  });

Memorize: Parts

Board
Playing Cards
Print Elements
- Basic HTML
- Basic CSS
- Board and Playing Cards
Player Interaction

Print Elements: Basic HTML

<!DOCTYPE HTML>
<html>
  <head>
    <title>memo.js</title>
    <link rel="stylesheet" type="text/css" href="style/memo.css" media="all" />
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/memo.js"></script>
  </head>
  <body>
    <div class="board" data-element="board"></div>
  </body>
</html>

Print Elements: Basic CSS

.board {
  margin: 0 auto;
  padding: 5px;
}

.card, .card img {
  width: 90px;
  height: 90px;
}

.card {
  float: left;
  position: relative;
  margin: 5px;
}

.card img {
  position: absolute;
  top: 0;
}

Print Elements: Board and Playing Cards

DOM and Style manipulation

// Playing Card HTML Code
  var html = '\
        <div class="card" data-status="hide">\
          <img src="image/card_%id%.jpg" />\
          <img src="img/cover.jpg" data-element="cover" />\
        </div>';

// Print Board and Playing Cards
  $('[data-element="board"]')
    .append(function() {
      var data = '';

      $.each(list, function(index, id) {    
        data += html.replace('%id%', id);
      });

      return data;
    })
    .css({
      width: function() {
        return $(this).children().outerWidth(true) * cols;
      },
      height: function() {
        return $(this).children().outerHeight(true) * rows;
      }
    });

Memorize: Parts

Board
Playing Cards
Print Elements
Player Interaction
- Selection
- Comparation
- Slide Effect

Player Interaction: Selection

// Player Interaction
  var count = 0
    , pair = [];	

  $('[data-element="cover"]').on('click', function() {
    count ++;

    if (count <= 2) {

      if($(this).parent().attr('data-status') === 'hide') {
        $(this).parent().attr('data-status', 'view');

        pair.push($(this).prev().attr('src'));
      }

      if (count === 2) {
	// Comparation
      }
    }
  });

Player Interaction: Comparation

// Player Interaction
  var count = 0
    , pair = [];

  $('[data-element="cover"]').on('click', function() {
    count ++;

    if (count <= 2) {

      if($(this).parent().attr('data-status') === 'hide') {
        $(this).parent().attr('data-status', 'view');

        pair.push($(this).prev().attr('src'));
      }

      if (count === 2) {
        if (pair[0] === pair[1]) {
          $('[data-status="view"]').attr('data-status', 'show');

          count = 0;

          pair = [];
        } else {
	  $('[data-status="view"]').attr('data-status', 'hide');

	  count = pair.length;

	  pair = [];
        }
      }
    }
  });

Player Interaction: Slide Effect

// Player Interaction
  var count = 0
    , pair = [];

  $('[data-element="cover"]').on('click', function() {
    count ++;

    if (count <= 2) {
      $(this).slideUp('slow');
 
      if($(this).parent().attr('data-status') === 'hide') {
        $(this).parent().attr('data-status', 'view');

        pair.push($(this).prev().attr('src'));
      }

      if (count === 2) {
        if (pair[0] === pair[1]) {
          $('[data-status="view"]').attr('data-status', 'show');

          count = 0;

          pair = [];
        } else {
          $('[data-status="view"] [data-element="cover"]').delay(500).slideDown('slow', function(){
	    $('[data-status="view"]').attr('data-status', 'hide');

	    count = pair.length;

	    pair = [];
	  });
        }
      }
    }
  });

Memorize