Class 6 – Assignment: create a Tic-Tac-Toe game using JQuery

Posted: October 24th, 2009 | Author: amos | Filed under: assignments, javascript, jquery | Tags: class 6 | No Comments »

Advanced assignment

For those of you who are finished with all the previous assignments and feel comfortable with everything so far, here is the advanced assignment.

Your job is to make a tic-tac-toe game online using XHTML, CSS, Javascript, and JQuery.

Tic-tac-toe is a two player game.  One player is “X” and the other player is “O”.

Wireframes

Here is the beginning screen before either player has moved:

Players can click on any empty square.  But once a square has been clicked, it cannot be clicked again.

When the first player clicks on any square, that square becomes an “X”:

The next player then clicks on any empty square, and it becomes an “O”:

The players then take turns until one player has three of their squares in a row, either horizontally, vertically, or diagonally.  For example, the “X” player in this example has three X’s in a row vertically, so she has won:

When a player wins, the browser detect the winning state, and should pop up a message that indicates who has won.

It is possible that neither player has won after all the squares have been clicked.  If this is the case, the browser should show an appropriate message:

Once the player clicks the “Start over” button or clicks the little “x” at the top right of the message box, the game should start over, the message box should disappear, and the game board should become blank again.

Related posts:

1. Class 6 – Introduction to JQuery
2. Clas 6 – Deconstructing JQuery Syntax
3. Class 6 – Assignment Case Study
4. Class 6 – Assignment(s)
5. Class 6 – Some Useful JQuery Plugins

---