https://github.com/shamikaredkar/tic-tac-toe
The app features a clean and interactive game board, real-time updates, and a game log that tracks each move.
https://github.com/shamikaredkar/tic-tac-toe
html-css html-css-javascript javascript react-components react-hooks reactjs tic-tac-toe-game tic-tac-toe-javascript
Last synced: 7 months ago
JSON representation
The app features a clean and interactive game board, real-time updates, and a game log that tracks each move.
- Host: GitHub
- URL: https://github.com/shamikaredkar/tic-tac-toe
- Owner: shamikaredkar
- Created: 2024-08-18T17:01:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-19T18:23:01.000Z (over 1 year ago)
- Last Synced: 2025-03-14T03:28:54.679Z (12 months ago)
- Topics: html-css, html-css-javascript, javascript, react-components, react-hooks, reactjs, tic-tac-toe-game, tic-tac-toe-javascript
- Language: JavaScript
- Homepage: https://tic-tac-toe-shamikaredkar.vercel.app/
- Size: 1.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
TicTacToe Game - Demo
https://github.com/user-attachments/assets/fd8155b0-f633-4671-9c0e-99aeb371818f
## Overview
This is a simple yet engaging implementation of the classic Tic-Tac-Toe game built using React. The game allows two players to compete against each other, with the app tracking the game state and determining the winner. It includes features like tracking player moves, displaying the game board, and showing the winner or draw status.
## Features
### Game Board
- **Interactive UI:** The game board is fully interactive, allowing players to click on cells to make their moves.
- **Responsive Design:** The board adjusts to different screen sizes, ensuring a consistent user experience on both mobile and desktop devices.
- **Real-time Updates:** The game log updates in real-time as players make their moves, providing instant feedback.
### Player Tracking
- **Player Names:** The game allows players to set their names, which are displayed throughout the game.
- **Turn Indicator:** The current player's turn is clearly indicated, making it easy to follow the game flow.
### Game Over Screen
- **Winner Announcement:** Once a player wins, the game over screen announces the winner with a congratulatory message.
- **Draw Handling:** If the game ends in a draw, the game over screen displays a message indicating that the game is a tie.
- **Restart Option:** Players can restart the game from the game over screen, allowing for multiple rounds without needing to refresh the page.
### Game Log
- **Move History:** The game logs each move, providing a history of the game that players can review.
- **Clear Log:** Players have the option to clear the log, resetting the game history for a fresh start.
## Built With
- [![React.js][React.js]][React-url]
- [![HTML5][HTML5]][HTML5-url]
- [![CSS3][CSS3]][CSS3-url]
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/
[HTML5]: https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white
[HTML5-url]: https://developer.mozilla.org/en-US/docs/Web/HTML
[CSS3]: https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white
[CSS3-url]: https://developer.mozilla.org/en-US/docs/Web/CSS