JavaScript Exercise: The Memory Game

In this exercise, you'll make a HTTP Status Cat memory game -- you can see a screenshot of a sample solution on the right. A memory game consists of an even number of tiles with images on one side and a generic back. Each image appears on precisely two tiles. You start the game with all tiles turned face down, and proceed to flip over two tiles at a time. If the two tiles have the same image, they remain face up. If not, they're flipped face down again after a short delay. The goal of the game is to get all the tiles flipped face up (i.e., find all the matching image pairs) in the least number of tries.

We'll make the game more fun by using random HTTP Status Cat images from HTTP Status Cats because their images follow a regular naming scheme so we can avoid scraping image URLs from sites by hand. The HTTP Status Cat.com image URLs follow the pattern https://http.cat/[statuscode]NNNN where NNNN is a sequentially assigned number. Some experimentation shows that most of the range between100 and 599 works well, though a few of the images are missing. (If you happen to pick a missing one, which HTTP status cat would you expect to appear?)

Here are some suggested steps for building the game:

  1. Write the HTML for the game's page, displaying a grid of face-down tiles. You can use any image you want for the tiles' backs, but make sure it's not easily confused with the HTTP Status Cat pictures, so it's clear whether a tile is face up or face down. You'll probably want to use a <table> to lay out the tiles, and set the width and height of each image by hand. You can either write the table by hand into your HTML file, or write code to generate it dynamically using document.createElement and appendChild.
  2. Write code to pick a bunch of random HTTP Status Cat image URLs and stick two copies of each URL into an array, then randomize the order of the array (using the code from the previous exercise). You might also take this opportunity to preload the images so there'll be no delay when they're flipped over for the first time. Make the preload images visible for now so you can verify that you're forming the URLs correctly.
  3. Assign one HTTP Status Cat URL from the randomized array to each tile. The easiest way to attach the URLs is to store them in a made-up attribute (e.g. facesrc) right on the DOM image elements. The browser will ignore any attributes it doesn't understand, but you'll be able to retrieve them later in your code when handling click events on the elements. (Note though that Firebug will not show your custom attribute in the DOM pane.)
  4. Attach a click handler to each tile that will turn it face up. Make sure that clicking on tiles that are already face up does nothing.
  5. Add a timeout handler when a tile is turned face up that will flip the tile face down again after a short delay (e.g., 500 milliseconds).
  6. Add the game logic that keeps track of the tiles that are face up and reacts appropriately based on whether they match or not.

You should now have a working game! Have fun playing it and tweaking it to really make it your own. Here's a few suggestions for extra features you could add: