2D Skirmish Game for website

Inspiration

"Chess, but with hit points." We wanted to blend the turn-based spatial strategy of Chess with the dynamic stats and "Fog of War" feel of classic tactical RPGs like Fire Emblem or Final Fantasy Tactics.

What it does

Tactical Skirmish is a local 1v1 grid-based combat engine. Players command a randomized squad of specialized troops—each with unique HP, movement ranges, and attack power. Unlike Chess, pieces don't just disappear; they engage in a war of attrition where positioning and range management are the keys to victory.

How we built it

• Engine: Built from scratch using React and TypeScript.
• Logic: Implemented a Breadth-First Search (BFS) algorithm to handle pathfinding, ensuring units navigate around obstacles rather than teleporting over them.
• State Management: Utilized React hooks (useMemo, useCallback) to handle complex grid calculations and turn-state transitions efficiently.
• Styling: Used Tailwind CSS with custom CSS animations to create a "cyber-grid" aesthetic.

Challenges we ran into

The biggest hurdle was Grid Intelligence. Initially, units used simple Manhattan distance for movement, which allowed them to "ghost" through solid walls. We had to pivot mid-hackathon to implement a proper pathfinding queue to respect the map's topology. Managing the "Selected State" across dozens of interactive cells while maintaining 60fps performance was another significant hurdle.

Accomplishments that we're proud of

• The Pathfinding Engine: Building a functional BFS explorer that updates in real-time as you hover over units.
• Responsive UI: Creating a game board that feels tactile and "snappy" despite being built entirely with DOM elements rather than Canvas.
• Visual Polish: Implementing a cohesive "Neon-Noir" UI that elevates the game from a simple prototype to a finished-feeling product.

What we learned

We learned the intricacies of Coordinate-based State. Storing game data in a flat array while rendering it in 2D space requires a high level of data discipline. We also deepened our understanding of React's render cycle—specifically how to prevent unnecessary re-renders in a grid of 100+ active components.

What's next for Tactical Skirmish

• AI Opponent: Developing a "Minimax" algorithm to allow for single-player practice.
• Fog of War: Hiding enemy units until they enter a troop's line of sight.
• Abilities: Adding special moves like "Heal," "Shield," or "Teleport" to further differentiate unit classes.

Built With

• react
• typescript