Skip to content

JohnPetros/tekken-top-trumps-game

Repository files navigation

Tekken Top Trumps Game 🤜👊🤛


🖥️ About the App

This app is a Top trumps card game with characters of Tekken, which is a series of fighting video and arcade developed and published by Bandai Namco.

The motivation for creating this project was to practice the basics of framer motion, which is a powerful and simple React animation library.

🕹️ About the Game

The App has two players: player One (user) and Player Two (bot) and follows the rules of a typical Top trumps card game, which are:

  • At the beginning each player must select 10 fighters from the central deck.
  • Each fighter has three attributes (Force, Defense and Mobillity) with their respective values.
  • The game is divided by rounds where one of the players has to set one attribute that will be use to compare the fighters.
  • The player whose fighter with a higher round attribute value than the other fighter wins the round.
  • The loser player's fighter is taken from his/her deck and placed in the winner player's.
  • In the next round the other player must set the attribute of this round and then the cycle repeats itself.
  • The player with all fighters wins the game!

⏹️ Demonstration

Preview of the running application

✨ Features

  • All user's actions have animation feedback. 💫
  • Events of some elements are blocked depending on the actual state of the game.
  • The appearance of the each fighter card indicates which player it belongs to.
  • Player Two's actions are performed randomly to emulate a real user.
  • At final of each round, as well as the end of game, a modal opens to shows the result. Of course, the modal's content is dynamicaly modified depending on the result
  • Once the game is over, user can restart the game.

🛠️ Technologies

This app was developed using the following technologies:

✔️ ReactJs

✔️ TypeScript

✔️ Framer Motion

✔️ Styled Components

✔️ Lottie


🚀 How to run this app?

Prerequisites

You will need a package manager like npm or yarn to run the application.

📟 Running the application

# Clone this repo
$ git clone https://github.com/JohnPetros/tekken-top-trumps-game.git

# Access the app's folder
$ cd tekken-top-trumps-game

# Install the dependecies
$ npm install or yarn add

# Run the app in development mode
$ npm run dev or yarn dev

# Probably the app will runnig on http://localhost:5173

⚙️ Deploy

This app was deployed by Vercel. This means you can access the running app by accessing this link.


💪 How to contribute

# Fork this repo
$ git clone https://github.com/JohnPetros/tekken-top-trumps-game.git

# Create a branch with your feature
$ git checkout -b my-feature

# Commit your changes:
$ git commit -m 'feat: My new feature'

# Push to your branch:
$ git push origin my-feature

You also can open a new issue report. It will be an honor to be able to help you and improve this application as well.


📝 License

This app is under MIT lincese. See the License file for more details.


Made with 💜 by John Petros 👋🏻

Releases

No releases published

Packages

No packages published