HTML & JavaScript!!!

In this game the player has to find a hidden gem in a 3 by 3 grid. When the page is loaded the gem is randomly placed in the grid (but not shown to the player). The player must make a guess between 1 and 9 with the grid cells numbered from 1 in the upper left, and going across each row with 9 in the lower right. When the player makes an incorrect guess the spot in the grid is marked with an O and a message Try again is displayed. The player continues to guess until the gem location is found. When the gem is found an X is placed in that spot and a message is displayed congratulating the player. Also, if the player inputs an invalid number for cell a message is displayed correcting them. A player can also reset the board by clicking a button Clear.

A sample display of the final results is below:

The picture above is the start of the game

On an incorrect guess, a O fills the appropriate cell and the message Try again!! is displayed.

On a guess of a cell number greater than 9 or less than 1, a correction message is displayed.

On the correct guess, a congratulatory message is displayed.

Hints:

This game can be built in a variety of ways and you should think of how best to approach this problem. Think modular functions that accomplish specific things.

You can code this with or without jQuery.

One way to store the cell values between empty, O, and X would be an array.

You may have a renderBoard function that displays the board (i.e. a table with 3 rows and 3 columns) and the values of cells corresponding to a specific cell that gets called and refreshes the board at the right moments in the game.

To setup the hidden gem at the start of the game you have to pick a number randomly between 1 and 9. Here is one way to do that

var setPos = Math.floor(Math.random() * (max - min + 1)) + min;

Guess a spot (top row: 1,2,3 1 middle row: 4,5,6 I bottom row: 7,8,9) Submit Clear