Skip to content

Modern, neon-themed Tic Tac Toe game with React. Responsive design, cool CSS effects, and a twist on the classic game!

Notifications You must be signed in to change notification settings

URAYUSHJAIN/Tacwin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎮 Tacwin-Glassy Tic Tac Toe Game

A beautifully designed Tic Tac Toe game with a modern glassy, neon-themed interface. Built using React, this project is a fun way to revisit a classic game while showcasing responsive design and CSS effects.

🌐 Live Demo

Try the game live here.

🚀 Features

  • Interactive Gameplay: Play against yourself in this engaging game.
  • Neon & Glassy UI: Modern interface with glassy effects and neon accents for a futuristic look.
  • Responsive Design: Optimized for mobile and desktop screens.
  • Reset Button: Restart the game anytime with a single click.

📂 Project Structure

src
├── assets/                   
│   ├── cross-icon.png
│   └── circle-icon.png
├── components/
│   ├── TicTacToe/
│   │   └── TicTacToe.jsx      
│   └── styles.css            
├── App.js                     
├── index.js                  
└── README.md                  

🛠️ Technologies Used

  • React: Frontend JavaScript library for building user interfaces.
  • CSS3: For styling and creating glassy and neon effects.
  • HTML5: For structuring the web page.

🎨 Design Highlights

  • Glassy Effect: Utilizes backdrop-filter and semi-transparent backgrounds for a glass-like look.
  • Neon Glow: Icons for X and O have a vibrant neon glow effect using filter: drop-shadow.
  • Smooth Transitions: Interactive hover and click animations for a seamless user experience.

💻 How to Run Locally

  1. Clone the repository:
    git clone https://github.com/your-username/tic-tac-toe-react.git
  2. Navigate to the project directory:
    cd tic-tac-toe-react
  3. Install dependencies:
    npm install
  4. Run the app:
    npm start

📱 Usage Instructions

  1. Open the game in your browser.
  2. Click on any box to place your move (X or O).
  3. The game automatically checks for a win or draw.
  4. Press the RESET button to start a new game.

📦 Deployment

To deploy this project on platforms like Netlify or Vercel, follow these steps:

  1. Build the project:
    npm run build
  2. Deploy the build folder on your preferred hosting service.

🤝 Contributing

Contributions are welcome! Feel free to fork this repository, submit issues, or open pull requests.

🛡️ License

This project is licensed under the MIT License.


🌟 Star this repository if you enjoyed playing this game or found the project helpful! 😊

About

Modern, neon-themed Tic Tac Toe game with React. Responsive design, cool CSS effects, and a twist on the classic game!

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published