francislangit/tic-tac-toe

A web application simulating a two-player version of Tic-tac-toe. Built on vanilla JavaScript.

tic-tac-toe's Issues

Add additional features to the user interface

Here we'll create supplementary features that'll bring our user interface alive.

• Create a button that restarts the game when clicked.
  • Displays "Restart" if game still ongoing.
  • Displays "Play again?" if and when game is over.
• Create a display element that shows the result of the game when it is over. Either congratulates winner or declares draw. (This feature was built out in the last pull request).
• If applicable, clean up the user interface such that it'll be more presentable and easier to use for users.

Create an AI that users can play against

Difficulty Modes

1. Easy Mode - AI randomly makes a move.
2. Hard Mode - AI makes a move based on a minimax algorithm. This should make it virtually unbeatable.

Order of Building Features

• Before the game starts, prompt the user on their choice of game mode.
  • One-player: User plays against an AI. If chosen, user chosen between Easy Mode and Hard Mode.
  • Two-player: User plays against another user. Takes user to game board immediately once chosen.
• Build the Easy Mode AI.
• Build the Hard Mode AI.

Prepare repository for public release

Here we'll be preparing this GitHub repository for publicity.

• Create a banner for README.md and social media card.
• Fill up README.md and create a GIF for its usage section.
• Fill up sidebar text.

Afterwards, we should confidently be able to change our repository's publicity to public.

Create and render game board array

The game board will be represented by an array with elements each representing a tile.

• Each element can only have a value of either X or O, and not anything else.
• The contents of the array must be rendered onto the screen as a tic-tac-toe board would look like.

For example, our array may be in the form: ['X', 'X', ' ', 'O', ' ', 'X', 'O', ' ', 'O']. Such should output:

X X 
O   X
O   O

Build features for input and game over detection

Here, we'll flesh out the features of the game allowing for a two-player mode to be played.

• Allow players to click on the game board in order to make their respective moves.

  • There are only two players, one placing X and the other placing O.
  • Players alternate turns. If player X is done with their move, for example, the next click on an open tile should make a drawing of an O symbol, not an X.

• Build logic that checks for when the game is over. Such is the case if either of the following are true:

  • Either player has marked 3-in-a-row.
  • No 3-in-a-rows are present but there are no more legal moves that can be made (board is full).