memo.js

Classic Board Game with jQuery

In 2013, colleagues agreed a game was hard to build, with few specialized libraries and a lot to wire up by hand. I disagreed. You could build one with almost anything, even something as far from games as jQuery. They called it impossible. So I built it.

  • 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.

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 cards

  • 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.
hide
show

Memorize

Parts

  1. Board: how many rows and columns.
  2. Playing cards: pick the images, pair them, shuffle the deck.
  3. Print elements: HTML, CSS and injecting the cards into the DOM.
  4. Player interaction: flip, compare, resolve.

01: Board

Square grid

Compact and rectangular area where the playing cards are grouped.

02: Playing cards

Selection

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

02: Playing cards

Shuffling the deck

Shuffle the deck to unsort the playing cards.

$.merge(list, list) concatenates the list onto itself: that single call is what turns cards into pairs. The shuffle is Fisher-Yates: walk from the end, swapping each card with a random earlier one, so every ordering is equally likely.

03: Print elements

Basic HTML

03: Print elements

Basic CSS

--long is the column count; the JS computes it and sets it on the board.

03: Print elements

Board and playing cards

DOM and style manipulation.

The JS sets --long and --short on the board; CSS grid uses them for the column count: --long in landscape, --short in portrait.

04: Player interaction

Selection

A click selects a card: set its status from hide to view and push its face into pair. On the second card, compare.

04: Player interaction

Comparison

On the second card, compare the pair: a match promotes both to show; a miss returns them to hide. Then reset count and pair for the next turn.

Cards match by image source: pair holds two <img src> values, equal only when it is the same emoji file.

04: Player interaction

Slide effect

jQuery adds the motion: on reveal the cover slides up, and a missed pair slides back down after delay(500).

The // ... parts are unchanged from the earlier slides. New here: slideUp reveals the card, and a missed pair slides back down after delay(500).