Hearthstone Clone Game
A fan-made card game inspired by Blizzard Entertainment's Hearthstone, featuring turn-based gameplay with character selection, resource management, and card combat mechanics.
Hearthstone Clone App
browser play link: Hearthstone Clone App (all devices)
Overview
A fan-made card game inspired by Blizzard Entertainment's Hearthstone, featuring turn-based gameplay with character selection, resource management, and card combat mechanics.
Game Features
Character Selection
- Multiple hero characters available
- Unique abilities per character
- Custom starting decks
Core Gameplay
- Turn-based combat system
- Mana crystal resource management
- Card drawing and deck management
- Strategic combat interactions
- Against computer mode, a game BOT
Features
- 100+ multilingual card design
- 11+ card cast skill type(can add more types like minion type, card type(taunt, divine shield, stealth etc)
- EN/TR language options
- Awesome animations
- Dynamic card rendering
- Responsive design for all screens (mobile, tablet, pc screens)
Development
Setup
- Clone repository
- Install dependencies
npm i - For every build time you must run tailwind and vite
4.3 For Vite
npm run dev4.2 For Tailwind
npx tailwindcss -i ./src/App.css -o ./src/output.css --watch
Card Cast Skill Types
| Health Skills | |
|---|---|
| HealRandomCard | Gives 1 health to a random card |
| HealHero | Gives 1 health to the hero |
| HealCard | Gives 1 health to a random card |
| HealAllCards | Gives 1 health to all cards |
| Damage Skills | |
| DealRandomEnemy | Deals 1 damage to a random enemy |
| DealAllEnemyMinions | Deals 1 damage to all opponent's minions |
| DealAll | Deals 1 damage to everyone in the game |
| DealAllEnemy | Deals 1 damage to all enemies |
| Give Back Skills | |
| ReturnToHandAndGiveHealth | Destroys a card, returns it to your hand with an amount/amount attack/health buff |
| Card Drawing Skills | |
| DrawCard | Draw a card |
| Empowerment Skills | |
| EmpowerRandomCard | Empowers a random card by 1 |
| Armor Skills | |
| GainArmor | Gives armor to your hero |
| Special Skills | |
| GainHealthAmountOfCardsInYourHand | Gains health equal to the number of cards in your hand |
Tech Stack
- Frontend: React, Redux, Tailwind CSS, Vite, TypeScript
- i18next for localization
- Custom game logic systems
Contributing
Open sourced and contributions welcome! Please fork and submit pull requests.
License
MIT License
Acknowledgments
Thanks to the people for their support and contributions.
- Yavuz Celiker
- Mustafa Ozkan
- Ahmet Salih Balandi
- Azad Karataş
- Hasan Eskin
Card types
Game Overview
Card Process Stream
Card Pairing Algorithm
End turn card destiny algorithm
Card Gallery
Character Selection & Menu Showcase
Visual Progress
Latest Screenshots from Hearthstone Clone (Most Recent First ⬆️)
Gameplay Screenshots
Need a Tailwind website built?
Hire a professional TailwindCSS developer today.