Tic-Tac-Toe Project
Create a two-player Tic-Tac-Toe game. Players take turns marking 'X' and 'O' on the grid, aiming to get three in a row—horizontally, vertically, or diagonally. Design the layout and handle win, lose, and tie conditions. You will be building this project as part of our JavaScript Course.
Resources: Background Image, Icons.
Things you need to know: Conditionals, Functions, HTML DOM Selection and Manipulation, Browser Events.
Task 01
Add a background image to the body of the page using the provided resource.
Add a heading with the text, Tic-Tac-Toe.
Task 02
Create a basic 3 x 3 grid structure.
Ensure that the grid doesn't change shape on different screen sizes.
Add a Reset button.
Style the button as shown in the adjacent image.
Task 03
Add functionality to show player moves.
The game should keep a count of clicks on the 3 x 3 grid.
Any time an empty cell is clicked in the game, it should add either an X or an O inside that cell. Get these icons from the provided resource.
When an empty cell is clicked, if the number of clicks inside the grid is odd, add an X inside the cell.
When an empty cell is clicked, if the number of clicks inside the grid is even, add an O inside the cell.
Ensure that you only count the first click on a cell. Once the cell shows either an X or an O, any further clicks on that cell should be meaningless.
Add functionality in the Reset button so that when clicked, it should remove all Xs and Os from the grid. This should restore the game to its initial state so that a new game can be started.
Task 04
The icons could be in the same vertical, horizontal or diagonal line.
Display the winner by adding text below the grid and above the Reset button.
The text should say O wins! if there are three Os in a straight line.
The text should say X wins! if there are three Xs in a straight line.
Change the background colour to lightgreen for the three cells which make the winning line.
More projects
These are some of the projects you'll build while learning.
