This is a tile matching game built using JQuery. Its structure is based on a similar game by Adam Khoury with some alterations and added functionality.

For this project I started by creating a container div to house the tiles and an empty child div where the content would be generated. I wrote some style rules for the tiles so that they would display as a grid and used a CSS patterns gallery to create the background image for the back of each tile.

To create the game functionality I began by making an array of the letters ‘A-M’ repeated which I could then use for the content of the tiles. I also added a shuffle function which would randomize the order of the items in the array to ensure the tiles were well mixed.

I then created a reset function which is called on page load. This resets the game variables and dynamically generates the tile divs and their content.

Next I added a click event handler for each tile with a callback function which provided the game logic. Each time a tile is clicked its content is stored in a temporary array. When the number of array items reaches two then the values are compared to see if they match. If they do, then the game counter increases and the tiles stay flipped, if not the tiles are turned back over and reset.

To allow some time for the user to see the tiles before they are reset I added a setTimeout function to delay the event by 1000 milliseconds. I also added an if condition which stops any tile being clicked if it is already turned over.

To improve the look of the game, I switched out the letters and added a series of SVG images to the array. I also added a score counter to allow the user to see how many pairs have been found as the game progresses.

I decided that the game would look better if the tiles had a flip effect when they were turning over. To do this I originally tried a JQuery plugin but decided instead to do it using just CSS. I found a walkthrough on a blog post by David Walsh which explained how to do it.

Finally I added a congratulations modal on completion of the game and added a callback which reset the board when the box was closed so the user could play again.