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:
<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
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.)
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:
window.setInterval()could prove useful.)