JavaScript/Exercises/TicTacToe

TicTacToe

TicTacToe is a game for two players. They choose fields out of a 3 x 3 chessboard.

First, we need an HTML file plus CSS to realize the user interface. It shall contain:


 * A caption
 * A container with nine buttons arranged in a 3 x 3 chessboard
 * Two button  and a button   to decide which user starts
 * A  button
 * A textfield to give the users feedbacks about the status of the game

The HTML might look like this:

Next, you develop the app's logic by adding events to buttons and functions within the script element.
 * When the game starts or will be reset, the nine X/O buttons and the feedback area must be cleared.
 * It is helpful when the nine X/O buttons call the same event handler.  delivers the ID of the button and via   this button is reachable.
 * Whenever one of the nine X/O buttons is clicked, this button must be protected against further clicks.
 * We need a function that decides whether a line, a row, or a diagonal (8 possibilities) contains 3 'X's respectively 3 'O's.
 * Consider the case that no one wins.

All in all, the app might look like this: