An enemy army approaches! Collect resources, train units, construct buildings, and defeat waves of enemies. Survive as long as you can!
- "Townsbattle" is my second project, and I started it with no prior knowledge in React, TypeScript, Tailwind CSS, or Node.js/NPM. Each piece of art was painstakingly generated using prompts to Midjourney AI.
- Building a game as my second project was an exciting challenge. I used React, TypeScript, Tailwind CSS, and Node.js/NPM, all of which were new to me. All art was painstakingly generated using prompts to Midjourney AI.
- This project's greatest challenge was learning to “Think in React”; mastering the concepts of component hierarchies, conditional rendering, and state management.
- Making a game from scratch offered plenty of opportunity to tackle interesting refactoring and debugging challenges while giving me a great excuse to explore my interests in game design, animation, sound design, and AI.
- I hope this project inspires others to explore new tech and improve their skills!
- Beautiful AI-generated art
- Engaging turn-based game mechanics
- Difficulty Options
- Save and Load
- Leaderboard
Main Menu
Planning
Combat
Mobile Friendly
Card Art
- "Townsbattle" is a turn-based strategy game in which you defend your town against waves of enemy attacks. The game has two main phases: "Planning" and "Combat."
- In "Planning," you assign workers to collect resources, which you can then use to train units and construct buildings.
- Each building you construct unlocks something new, such as new units or game-changing bonuses.
- In "Combat," you fight against increasingly tough waves of enemies with the army you have trained.
- Buildings have health and help protect your Town Center, which is your most important building. If it's destroyed, it's game over.
- Townsbattle was designed to be easy to play but challenging to master, with plenty of opportunities for strategic thinking and decision-making.
- React
- Tailwind CSS
- TypeScript
- Node.js and npm
- HeadlessUI
- Coolors
- Transform: CSS-to-Tailwind
- Midjourney
- ChatGPT - Great for understanding each line of code at a deeper level
- Gameplay balancing
- More of everything! Resources, units, buildings and upgrades, and unique unit abilities
- Boss enemies
- Multiple game styles (e.g. Survival, Adventure)
- Better endgame content
- Roguelite mechanics
- More animations and sounds
- User authentication
- Scott Skanes - [email protected]
- Project Link: https://github.com/skanes17/townsbattle
- This game was created as part of the Get Coding program
- A massive thanks to my coach and friend Devin Marsh, who constantly pushed me to make something bigger, better, and more complicated 😂
- Hearthstone for providing inspiration for art and combat mechanics
- Gabby Burke, Michael Appleby, and my wife Allison Skanes for playtesting and providing critical feedback
- MDN Web Docs
- Countless other websites and YouTube videos