The Core Concept
IsoTactics strips strategy gaming down to its essentials: two players, a 10×5 grid of triangles, and pure tactical decision-making. Each turn, you must choose between moving to adjacent triangles, attacking your opponent, or using items from your inventory. Every action costs Action Points (AP), making each decision meaningful.
The triangle grid creates interesting spatial relationships. Unlike square grids where movement feels uniform, triangles alternate between pointing up and down, creating asymmetric adjacency patterns. This means strategic positioning isn’t just about distance – it’s about understanding the geometry of your surroundings.
Game Mechanics
Resources:
- 3 HP (Health Points) – Lose them all, and you lose
- 1-3 AP (Action Points) – Fuel for all actions
- Items – Found during exploration
Actions (all cost 1 AP):
- Move – Navigate to adjacent triangles
- Attack – Deal 1 damage to adjacent opponent
- Use Item – Activate special abilities
The Twist: At the end of your turn, you gain +1 AP (capped at 3). This creates an interesting risk/reward: do you spend all your AP now, or pass your turn to bank points for a bigger move later?
Strategic Depth
What makes IsoTactics compelling isn’t complexity – it’s the emergent strategy from simple rules:
Cell Bonuses: Empty cells offer random rewards:
- 20% chance: +1 HP
- 30% chance: +1 AP
- 10% chance: Find an item
- 50% chance: Nothing
Territorial Control: Your visited cells (light grey) are safe to cross. But step on your opponent’s trail (dark grey) and you take 1 HP damage. This creates a territorial dimension – your movement history becomes both a record and a hazard.
The Item System:
Four items can turn the tide of battle:
- Teleporter ○ – Warp to any cell, breaking positional deadlocks
- Power Attack △ – Deal 2 damage instead of 1 when adjacent
- Health Pack + – Restore 2 HP, clutch healing in critical moments
- Ranged Attack → – Strike from anywhere, no adjacency required
Items appear as SVG icons in your inventory, making the interface clean and readable at a glance.
Technical Implementation
IsoTactics is built with vanilla JavaScript, HTML, and CSS – no frameworks, no dependencies. The entire game state (positions, HP, AP, inventories, visited cells) can be serialized to base64 and embedded in a URL. This means:
You can share any game state with a single link.
Click « SHARE GAME » and the current state gets copied to your clipboard. Send that URL to someone, and they load the exact game state – same positions, same HP, same items. No accounts, no databases, just pure URL-encoded state.
The triangle grid uses CSS clip-path for perfect geometric shapes:
- Upward triangles:
clip-path: polygon(50% 0%, 0% 100%, 100% 100%) - Downward triangles:
clip-path: polygon(0% 0%, 100% 0%, 50% 100%)
The grid scales responsively to 90% of viewport width, making it playable on any device.
AI Opponents
Can’t find a human opponent? Play against the computer. The AI makes tactical decisions:
- Uses health packs when HP is low
- Prioritizes power attacks when adjacent
- Teleports away when in danger
- Balances movement and aggression
It’s not perfect (intentionally), but it provides a solid challenge for testing strategies.
Play Modes
Human vs Human: Classic hot-seat gameplay Human vs Computer: Practice against AI Computer vs Computer: Watch the AI battle itself