Memory Game (due 26 Oct 2016)

Create a DHTML Memory Game using JQuery. Upon loading the page, a square grid of 16 blocks is visible. Clicking on a block shows a letter or a number on the block. Only two blocks can show letters or numbers at a given time. If the two blocks with the same letters appear they remain visible for the remainder of the game. If the text on the two blocks are different they disappear in 3 seconds. Any clicks during this time period (3 seconds from the clicking of the first block) is ignored. The game is over when all identical pairs are matched. Create an alert box that pops up that indicates the number of tries by the user. A try is the click of the first block in the 3 second period. Your end result will look like this:

Possible Scenarios:

What if the user clicks just once?

The text on the block that he has clicked is revealed for 3 seconds and then the text disappears. It is counted as one try.

What if the user clicks once and the second click is after 3 seconds?

The text on the block clicked first should have disappeared. The text on the second block appears. This block is now taken as the first block and it is exposed for 3 seconds. Within that time the user can click again.

What if the user clicks 2 or more blocks within the 3 second period from the clicking of the first block?

Only the second box clicked shows the text. The subsequent clicks are ignored and not counted towards the number of tries.

What happens if the user clicks two blocks that have the same letter or number during the 3 second period?

The text on both the blocks remain visible, i.e. the text does not disappear after the 3 second period.

What happens if the user clicks on a block that has a revealed text on it?

The click is ignored. It is not counted towards the number of tries the user made.

You have to do the problem in several parts.

• Create a 2-D array having 8 pairs of letters or numbers that are placed randomly as shown in the table above.
• Then create a grid of buttons having ids that will also reveal the position of the button on the grid, as shown below. The first digit in the id is the row number and the second digit is the column number.

  b00  b01  b02  b03
  b10  b11  b12  b13
  b20  b21  b22  b23
  b30  b31  b32  b33
  

• Create a button event handler that will reveal the text when clicked. Make sure that all of this working before you tackle the rest.
• Create a global variable that will keep track of the number of tries.
• Create two global variables that will keep track of the id of the first and second block clicked during the 3 second period.
• Create a global variable that will keep track of the number clicks from the first click of a block in the 3 second period.
• Create a separate function that given the ids of two blocks will return True if they have the same text.
• Create a separate function that given the id of a block will clear the text. Basically, it will replace the value with a blank string. This will be called only if the text on the two blocks clicked are different or only one block was clicked.

Even though, JavaScript has two Window methods that are capable of calling a function after a set amount of time - setTimeout() and setInterval(), use jQuery functions instead - fadeIn() and fadeOut().

The intent of this assignment is to use jQuery functions. If you are ambitious, you may use images instead of text. Also you should shuffle the images every time the page gets loaded.

Your page will be minimalistic but aesthetic. When you are finished with the assignment, please put a link in the table in your index.html page by 11 PM Wednesday, 26 Oct 2016.