😛 XO Rumble

A tic-tac-toe game based on emojis that offers both multiplayer and single-player modes. Every time a user plays in single or multiplayer mode, there are always new emojis. In single-player mode, there's a choice between hard and easy modes for the bot. I bet you can't beat the hard mode of the bot 😉

1️⃣ Single Player

In this mode, you will play against a computer bot.

• Click on the 'Single Player' button to play.
• Choose a player - there are always new emojis appearing whenever you visit the select player page.
• Then, choose the game mode you want to play with the bot - Hard or Easy.
• The player who gets 3 in a row first wins.
• Whether it's a win, loss, or a draw, a modal displaying the result appears once the game is over. You'll then see two buttons:
  • Replay' button to play again.
  • Home button to return to the main menu.
• If you close the browser or leave the page and come back, you'll resume the game from where you left off.

2️⃣ Multiplayer

In this mode, you can play with another person sitting next to you.

• The first player is automatically selected, and the second player automatically gets their own emoji (random for every game round).
• The player who gets 3 in a row first wins.
• Whether it's a win, loss, or a draw, a modal displaying the result appears once the game is over. You'll then see two buttons:
  • 'Replay' button to play again.
  • 'Home' button to return to the main menu.
• If you close the browser or leave the page and come back, you'll resume the game from where you left off.

⚡ Technologies

• Vite
• React.js
• TypeScript
• Zustand
• Styled Components
• Framer Motion

💡 Idea

Project: https://github.com/5ekastanx

I've built a tic-tac-toe game before using HTML, CSS, and JavaScript, which was single-player only. I've always wanted to expand the project by adding multiplayer and making it more interactive. Emojis are something I've also always wanted since I've never seen a tic-tac-toe with emojis.

This is why I decided to create this project again, this time using React and TypeScript. I also had in mind that every time I've played a tic-tac-toe game online, I found most of them boring, that's why with the emojis.

🤔 How Can It Be Improved?

The project could be improved by adding sound effects and background music. I think it would also be cool to highlight the three rows that the user got to win, to show at the end who won.

🐛 Bug

• The game doesn't work on Android

🚦 Running the Project

To run the project in your local environment, follow these steps:

1. Clone the repository to your local machine.
2. Run npm install or yarn in the project directory to install the required dependencies.
3. Run npm run start or yarn start to get the project started.
4. Open http://localhost:5173 (or the address shown in your console) in your web browser to view the app.

📸 - Demo Images