Giter Club home page Giter Club logo

emotic-tac's Introduction

๐Ÿ˜› emoTic-Tac-Toe

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

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.

emotic-tac's People

Contributors

amatun-nooor avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.