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.
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,DefenseandMobillity) 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!
- 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.
This app was developed using the following technologies:
✔️ ReactJs
✔️ TypeScript
✔️ Lottie
You will need a package manager like npm or yarn to run 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
This app was deployed by Vercel. This means you can access the running app by accessing this link.
# 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.
This app is under MIT lincese. See the License file for more details.
Made with 💜 by John Petros 👋🏻