Creating a Memory game

Submitted by Barrett on Sat, 02/05/2011 - 11:07
Creating a Memory game

Backyardigans Memory Game

Playing Memory with the son this morning, I got to thinking about how I would go about building an online version of the game. With a bit of jQuery magic, I don't think it would be too hard.

My off-the-cuff thinking is that it'd take:

  • A set of images, trimmed to a consistent size and ratio to be the "face up" state of the cards. The number of images in the image library would determine how many "cards" could be displayed in a game.
  • An image of the same size and ratio as the aforementioned images to be the "face down" state.
  • Three css class definitions, setting the background-image properties of the cards in each of their states. The "face up" class would display the image, the "face down" would display the generic image, and the "matched" state would display some greyed out state indicating the card in that position was already selected.
  • Some code (probably PHP) to render the correct number of divs in a square rows-and-columns layout. A table and tr/td tags could also work and may be semantically better, actually.
  • Some code (PHP) to randomly assign images to the divs/td's above
  • jQuery code to handle the user interaction, essentially an on-click event that changes the class of the card to display the proper image.
  • Some jQuery to determine if two selected cards were a match

Supporting functionality would include:

  • Admin interface to add/change images in the image library
  • Letting the user choose how big a set of cards they wanted to play (e.g., a 4x4 grid or a 20x20 grid)
Barrett Sat, 02/05/2011 - 11:07