Requirements

Introduction

First game to include in a suite of games. The objective of this game is to revise HTML/ JavaScript/ CSS and Gaming Algorithms.

Demo

Game will be shown here.

Screen

Screenshot

Below is the screenshot of the game.

Screen Content

1. Screen shows the following components:
   1. Tic-tac-toe board
   2. Settings panel
   3. Buttons panel

Tic-Tac-Toe Board

1. Board allows X or O to appear in an empty cell
2. If a user tries to enter a token in an occupied cell, the following happens
   1. Warning sound is made
   2. Background to the  cell goes red
3. A winning number of joint tokens makes the cells goes green, and all further input is stopped
4. The last token placed has its background set to yellow

Settings Panel

Player 1 and Player 2

1. Player 1 and Player 2 has the following values in the dropdown:
   1. Human
   2. Computer - Hopeless
   3. Computer - Clever
2. Human Player 1 and Player 2 means that the games waits until that individual places a token in an empty cell on the board
3. A setting with Computer in the prefix means that a token is placed automatically in the board, before the other player can make their move.
4. Computer - Hopeless has an algorithm where the next token is placed in a random cell.
5. Computer - Clever has an algorithm where the best move is calculated.
6. The Player 1 and Player 2 dropdowns are disabled once the first token is placed in a cell
7. The Player 1 and Player 2 dropdowns are enabled when the game first appears
8. The Reset Game Button sets the Player 1 and Player 2 dropdowns.

Select Token

1. A dropdown under each player allows them to choose either X or O
2. The dropdowns cannot have the same value at the same time
3. The dropdowns are disabled once the first token is placed on the board
4. The Select Token Dropdowns are enabled when the game first appears
5. The Reset or New Game Buttons enable the Select Token dropdown

Moves

1. The Moves text is disabled
2. The Moves text is reset to Zero when Reset or New Game buttons are pressed.
3. The Moves text for each Player increments by 1 when they place a token on the board.
4. The minimum value for the Moves text is 0 and 3.

Score

1.  The Scores are 0 for Player 1 and Player 2 when the game first appears
2. The Reset Button resets the Scores for Player 1 and Player 2 to zero
3. When a Player wins the Score is incremented by 1
4. When there is a Draw the Score remains the same

Buttons Panel

1. Reset Game button has the following behaviour:
   1. Sets Player 1 to be Human
   2. Sets Player 1 to be Human
   3. Leaves the token per Player 1 and Player 2 as it was
   4. Resets the Moves to be zero
   5. Resets the Score to be zero each
2. New Game button has the following behaviour:
   1. Leaves Player 1 dropdown the same
   2. Leaves Player 2 dropdown the same
   3. Leaves the Player Token the same
   4. Resets the Moves to be zero
   5. Leaves the Score the same