Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mirayatech/tic-tac-emoji

🎮 Tic Tac Emoji - offering singleplayer & multiplayer.
https://github.com/mirayatech/tic-tac-emoji

bot coding emoji framer-motion game gamemode games multiplayer react singleplayer styled-components tic-tac-toe typescript ui zustand

Last synced: about 1 month ago
JSON representation

🎮 Tic Tac Emoji - offering singleplayer & multiplayer.

Awesome Lists containing this project

README 

        
## 😛 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/mirayatech/Tic-Tac-Toe](https://github.com/mirayatech/Tic-Tac-Toe)



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](http://localhost:5173) (or the address shown in your console) in your web browser to view the app.



## 📸 - Demo Images