This is an easy game of tic tac toe made with HTML, CSS, JS.
Tic Tac Toe is a site that hopes to demonstrate how pure JavaScript works in a real-world context. The site will be targeted toward people who not only love to implement more advanced JavaScript concepts but also logic. Tic Tac Toe is a fully responsive JavaScript logic game that will allow users to compite agaist the computer.
-
The Tic Tac Toe Logo and heading
- Featured at the top of the page, Tic Tac Toe logo and Heading is easy to see for the user and brings some memories from your childhood. The users are able to see the name of the game.
- You find the rules of the game at the left of the page. It is easy to read and understand. As most of us is familiar with this game.
- This section will allow the user to play the Tic Tac Toe. The user will be able to easily see the game table.
- The user will be able to compete against the computer using the Os meanwhile the computer will be using the Xs.
-
Add a section that allow the user to choose to play with O or X.
-
Add a section that shows the score of the user and the AI.
-
Add a light/dark mode.
-
The game is really simple, consists to have three Os in a row horizontal, vertical or diagonal to win.
-
I used an AI to compete against the user called "minimax algorithms". It is made to test the patience of the user before the person is going to break his own device since AI is unbeatable.
- My project is responsive in different browsers: Chrome, Safari and FireFox.
- This project is responsive and looks good and is working in all the standard screen sizes. I tested it using devtools device toolbar.
- I confirmed that the Header, Game are readable and easy to understand.
- The site is working fine with all the resolutions such as:
1920×1080 (9.94%) 1366×768 (6.22%) 360×640 (5.88%) 414×896 (4.21%) 1536×864 (3.94%) 375×667 (3.74%)
-
The game is working fine, once you will manage to beat the AI the cell will color in darkblue and a message will appear with the opposition to replay the game.
-
In case of tie game, the background will color itself with a coral background.
- In case of user winning the game, after making three O in a row, the background will color pink.
-
The website was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the setting tab
- From the soursr section menu, select Pages
- Select the live link that I provided below
* Link below
### https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository
-
On GitHub.com, navigate to the main page of the repository.
-
Above the list of files, click Code. "Code" button
-
Copy the URL for the repository.
-
To clone the repository using HTTPS, under "HTTPS", click. To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH, then click.
To clone a repository using GitHub CLI, click GitHub CLI, then click . The clipboard icon for copying the URL to clone a repository with GitHub CLI Open Terminal.
Change the current working directory to the location where you want the cloned directory.
Type git clone, and then paste the URL you copied earlier.
-
git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY Press Enter to create your local clone.
Cloning into
Spoon-Knife
... remote: Counting objects: 10, done. remote: Compressing objects: 100% (8/8), done. remove: Total 10 (delta 1), reused 10 (delta 1) Unpacking objects: 100% (10/10), done.
- I took ispiration from the CI Love Math Project.
- I watched plenty of videos on youtube to get some inspiration of javascritps project, that helped me to create the Tic Tac oe game.
A minimax algorithm is a recursive program written to find the best gameplay that minimizes any tendency to lose a game while maximizing any opportunity to win the game
- Tic Tac Toe: Understanding the Minimax Algorithm.
- look at the link below https://alialaa.com/blog/tic-tac-toe-js-minimax
Few of the YouTube channel that i watched to get inspired : https://www.youtube.com/watch?v=oZrp3Atkz18 https://www.youtube.com/watch?v=AzvpHNkjqsg https://www.youtube.com/watch?v=P2TcQ3h0ipQ https://www.youtube.com/watch?v=Y-GkMjUZsmM