This is an ambitious project. "DomiNations" is a deep MMORTS (Massively Multiplayer Online Real-Time Strategy) game that combines base-building (like Clash of Clans) with civilization advancement (like Civilization).
To build a browser-based version, you need a robust tech stack that can handle real-time graphics and a secure backend to prevent cheating.
Here is a comprehensive README.md file designed to structure your project, guide your technology choices, and outline the implementation roadmap.
OpenCivilizations is a browser-based strategy game inspired by DomiNations. Players build a civilization from the Stone Age to the Space Age, manage resources, design defensive layouts, and conquer rival nations in real-time or asynchronous battles.
- Base Building: Isometric grid-based placement of buildings, walls, and roads.
- Civilization Progression: Research tech trees to advance through historical Ages (Bronze, Iron, Classical, etc.).
- Economy: Resource management (Food, Gold, Oil) with real-time accumulation and storage limits.
- Combat System:
- Unit Training: Barracks logic and troop capacity.
- Pathfinding: A* algorithm for units navigating walls and obstacles.
- PvP: Asynchronous multiplayer (attack other players' base layouts).
- Nations: Selectable civilizations (e.g., Romans, British, Japanese) with unique stat multipliers.
- Cross-Platform: Runs in any modern web browser (Desktop & Mobile).
- Language: TypeScript (Strict typing is essential for complex game logic).
- Game Engine: Phaser 3
- Why? It has excellent support for 2D sprites, isometric plugins, and input handling. It is lightweight compared to Unity/Unreal but powerful enough for a game like this.
- UI Framework: React or Vue (Overlaid on top of the Canvas).
- Why? Handling complex menus (Tech trees, Inventory, Chat) is painful in a game canvas. Using HTML/DOM overlays is cleaner and more accessible.
- State Management: Redux or Zustand.
- Runtime: Node.js
- Framework: Colyseus or Socket.io
- Why? Colyseus is specifically built for multiplayer games and handles state synchronization automatically.
- Database: MongoDB
- Why? Storing complex JSON objects (user base layouts, building coordinates) is native to Mongo.
- Caching: Redis (For leaderboards and session management).
/
├── client/ # Frontend (Phaser + React)
│ ├── src/
│ │ ├── assets/ # Sprites, Isometric tiles, Audio
│ │ ├── game/ # Phaser Game Logic
│ │ │ ├── scenes/ # MainMap, BattleScene, Loading
│ │ │ ├── entities/ # Buildings, Units, Projectiles
│ │ │ └── systems/ # Pathfinding, GridSystem, Input
│ │ └── ui/ # React overlays (HUD, Menus)
├── server/ # Backend (Node.js)
│ ├── src/
│ │ ├── rooms/ # Game room logic (Colyseus)
│ │ ├── models/ # Database schemas (User, Base, Clan)
│ │ └── mechanics/ # Verification logic (prevent cheating)
└── shared/ # Shared Types/Config (TypeScript)
├── constants.ts # Building costs, Unit stats
└── types.ts # Interfaces for API responses
- Set up Phaser 3 with an Isometric Plugin.
- Implement a Grid System (conversion between Screen X/Y and Grid Row/Col).
- Create Building Entities (Town Center, House, Farm).
- Implement Placement Logic (Check for collisions, snap to grid).
- Save/Load base layout to
localStorage(temporary persistence).
- Implement the Server Backend.
- Create User Accounts and Database connectivity.
- Implement Resource Generation (Farms produce X gold per hour).
- Note: The server must calculate resources based on
(CurrentTime - LastLoginTime)to prevent client-side hacking.
- Note: The server must calculate resources based on
- Implement Construction Timers (Buildings take time to upgrade).
- Create Unit Entities with Finite State Machines (Idle, Move, Attack, Die).
- Implement Pathfinding (A)*. Units must find the path to the nearest target while avoiding walls.
- Implement Combat Logic (Range checks, Damage calculation, HP updates).
- Build the "Attack" loop: Load a generic enemy base -> Spawn troops -> Calculate result.
- Matchmaking: Find other players' base data from the DB to attack.
- Replay System: Record unit spawn coordinates and timing to replay attacks for defenders.
- Alliances: Chat system and donating troops.
- Art Polish: Add particle effects (fire, explosions) and UI animations.
To render a 2D grid like 3D, use these helper functions:
// Convert Grid coordinates to Screen coordinates
function cartesianToIsometric(cartPt: {x: number, y: number}){
return {
x: (cartPt.x - cartPt.y) * TILE_WIDTH_HALF,
y: (cartPt.x + cartPt.y) * TILE_HEIGHT_HALF
};
}
// Convert Screen coordinates to Grid coordinates (for mouse clicks)
function isometricToCartesian(isoPt: {x: number, y: number}){
return {
x: (isoPt.x / TILE_WIDTH_HALF + isoPt.y / TILE_HEIGHT_HALF) / 2,
y: (isoPt.y / TILE_HEIGHT_HALF - (isoPt.x / TILE_WIDTH_HALF)) / 2
};
}Never trust the client.
- Bad: Client says "I finished building the Town Hall instantly."
- Good: Client says "I want to finish the building." Server checks if the user has enough Gems. If yes, Server updates DB and tells Client "Success".
Use a library like easystarjs for the frontend.
- Walls are "non-walkable" nodes.
- Gates are "walkable" only if destroyed.
- Units update their path every X seconds or when a target is destroyed.
- Kenney Assets: Free isometric starter packs.
- OpenGameArt.org: Search for "RTS" or "Isometric".
- Fork the repo
- Create your feature branch (
git checkout -b feature/NewWonder) - Commit your changes
- Push to the branch
- Open a Pull Request
- Depth Sorting: In isometric games, rendering order is critical. Buildings "lower" on the screen must be drawn in front of buildings "higher" on the screen. Phaser handles this, but you need to manage the
depthproperty of sprites carefully. - Database Concurrency: If a player is online and gets attacked by another player at the same time, you need a locking mechanism (e.g., "Under Attack" shield) so their data isn't corrupted.
- Mobile Performance: WebGL is fast, but handling 100+ units on a mobile browser requires optimization (object pooling, texture atlases).