https://github.com/sarahshahab12345/react-tic-tac-toe-game

🎉 **Tic Tac Toe Game** 🕹️ Play the classic Tic Tac Toe in React! This interactive game features scoring, confetti explosions 🎊 for winners, and a fun shake animation 💥. Enjoy a vibrant design with color-coded X and Y boxes. 🎨 Start a new game or restart with a single click! 🆕🔄 Perfect for quick, casual gaming sessions. 🕰️👾
https://github.com/sarahshahab12345/react-tic-tac-toe-game

animation confetti confetti-animation css fornt-end game gaming html interactive javascript react shake-animation tic-tac-toe uiux web-development

Last synced: 14 days ago
JSON representation

🎉 **Tic Tac Toe Game** 🕹️ Play the classic Tic Tac Toe in React! This interactive game features scoring, confetti explosions 🎊 for winners, and a fun shake animation 💥. Enjoy a vibrant design with color-coded X and Y boxes. 🎨 Start a new game or restart with a single click! 🆕🔄 Perfect for quick, casual gaming sessions. 🕰️👾

• Host: GitHub
• URL: https://github.com/sarahshahab12345/react-tic-tac-toe-game
• Owner: sarahshahab12345
• Created: 2024-08-27T08:36:46.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2024-08-27T08:49:35.000Z (3 months ago)
• Last Synced: 2024-08-27T10:04:08.300Z (3 months ago)
• Topics: animation, confetti, confetti-animation, css, fornt-end, game, gaming, html, interactive, javascript, react, shake-animation, tic-tac-toe, uiux, web-development
• Language: JavaScript
• Homepage:
• Size: 50.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Tic Tac Toe Game - Functionality

### Overview

This React-based Tic Tac Toe game allows two players to play against each other, tracks scores, and provides visual feedback with animations when someone wins.

### How It Works

#### State Management

- **BoxValues**: An array representing the 3x3 grid, initially filled with empty strings.

- **XTurn**: A boolean indicating whether it is player X's turn.

- **XScore & YScore**: Track the scores for players X and Y.

- **status**: Displays the current game status (whose turn it is, or who won).

- **isGameOn**: Boolean indicating if the game is active.

- **winner**: Stores the winner ("X" or "Y") if there is one.

#### Gameplay

- **handleOnBoxClick(index)**:

  - Updates the grid cell to "X" or "Y" depending on the current turn if the cell is empty.

  - Toggles the turn between X and Y.

  - The click is only registered if `isGameOn` is true.

#### Winner Checking

- **checkWinner()**:

  - Defines winning patterns for Tic Tac Toe.

  - Checks if any of the winning patterns match the current state of the grid.

  - If a player wins, updates the score, status message, and stops the game.

  - If the grid is full and no winner is found, it declares a draw.

#### Game Control

- **startPlay()**:

  - Resets the game and sets it to active.

- **clear()**:

  - Clears the grid and updates the status to indicate which player starts.

#### Visual Effects

- **Confetti**: Appears when there is a winner, adding a celebratory effect.

- **Shake Animation**: Adds a shake effect to the game container when a player wins.

#### User Interface

- **Grid**: Clickable 3x3 grid where players make their moves.

- **Score Display**: Shows the current scores of X and Y.

- **Status**: Displays messages like whose turn it is or who won.

- **Start/Restart Button**: Allows starting a new game or restarting the current game.