What happens when city building, resource management, tactical combat, and empire expansion are combined into a browser game built entirely with frontend JavaScript?
The result is Empire Frontiers, a turn-based strategy game where you must develop a growing civilization while competing against three computer-controlled empires.
Play the game: https://lsvekis.github.io/Empire-Frontiers/
Build Your Empire
You begin with a capital city, a small amount of territory, and a basic army. From there, every decision affects how quickly your empire can grow.
Your main objective is to capture cities, expand your borders, strengthen your economy, and eventually conquer the other empires.
Territory is more than a visual indicator. It determines where you can construct production sites, heal units, and safely develop your forces.
Capturing and improving cities increases your income and gives you access to more land. Larger empires can produce more resources and support stronger armies, but they also have more territory to defend.
Create and Balance Your Economy
Empire Frontiers uses three resources:
- Gold pays for armies, development, and military upgrades.
- Food supports recruitment, healing, and city growth.
- Wood is needed for buildings, production improvements, and equipment.
You can select empty land inside your territory and construct one of three production sites:
- Gold mine
- Farm
- Lumber camp
Each site produces resources at the beginning of a new turn. Sites can also be upgraded to increase their output.
The resource totals at the top of the game show both your current supply and how much you will receive on the next turn. This makes it easier to plan your spending before recruiting a unit or starting an upgrade.
If your economy becomes unbalanced, you can convert an existing production site into a different type. Converting has a cost and resets the site to level one, so changing your economy requires careful planning.
Recruit Different Types of Units
Cities allow you to recruit several unit types. Each one has different movement, attack, defense, health, range, and resource requirements.
Infantry
Infantry is an affordable frontline unit that works well during the early stages of the game. It is especially effective against archers.
Swordsmen
Swordsmen are powerful foot soldiers. They are strong against infantry, archers, and spearmen, but they are vulnerable to cavalry.
Archers
Archers can attack from up to three tiles away. A ranged attack allows them to damage an enemy without receiving immediate retaliation, making positioning extremely important.
Cavalry
Cavalry units move quickly and are effective against swordsmen and archers. However, spearmen can stop a cavalry attack.
Spearmen
Spearmen are defensive units designed to counter cavalry. They have strong defense and can protect cities or important areas of the map.
Understand Unit Power
Selecting a unit displays its complete combat information:
- Current and maximum health
- Attack power
- Defense
- Total power
- Movement distance
- Attack range
- Current rank
- Units it is strong against
- Units that counter it
Units that have not acted during the current turn are surrounded by a bright gold ring. This makes it easier to see which armies are still available to move, attack, heal, or upgrade.
Combat results are calculated using unit type, attack power, defense, health, rank, terrain, and matchup advantages. Building only one type of unit will leave your army vulnerable to the correct counter.
A balanced army is usually stronger than a larger army containing only one unit type.
Heal and Upgrade Your Armies
Damaged units can be healed while standing inside friendly territory. Healing costs resources and uses the unit’s action for that turn.
Individual units can also be promoted through three ranks. Higher-ranked units gain additional health, attack, defense, and total power.
These upgrades create an important decision: should you recruit another basic unit or invest in improving an experienced army?
Develop Cities and Military Technology
Cities can be upgraded to increase their income and expand the territory they control.
You can also purchase empire-wide improvements:
- Armory upgrades increase the attack power of every unit.
- Armorworks upgrades improve defense and maximum health.
These improvements affect existing armies as well as units recruited later. A smaller empire with advanced military technology may be able to defeat a larger opponent with weaker troops.
Compete Against Three Rival Empires
The game includes three computer-controlled opponents:
- Ember Dominion
- Verdant Pact
- Violet Order
Each rival empire gathers resources, recruits units, moves armies, attacks opponents, and captures cities.
Three difficulty settings change how aggressively the computer players expand and recruit:
- Explorer
- Commander
- Warlord
The campaign continues until you control all remaining cities or lose your final city.
Built Entirely with Frontend JavaScript
Empire Frontiers was created using:
- HTML
- CSS
- JavaScript
- Canvas API
- Browser local storage
The game does not require a database, external game engine, installation process, or JavaScript framework.
The Canvas API draws the terrain, territory borders, cities, units, production sites, movement options, and attack targets. JavaScript manages the economy, combat calculations, artificial intelligence, upgrades, turns, and victory conditions.
Progress is stored locally in the browser, allowing players to continue a saved campaign later.
Play Empire Frontiers
Empire Frontiers combines empire building, economic planning, unit counters, tactical positioning, and territorial conquest in a game that runs directly in the browser.
Build your economy carefully, create a balanced army, improve your cities, and decide when it is time to defend or expand.
A complete turn-based browser strategy game built with HTML, CSS, JavaScript, and the Canvas API.
Play At https://lsvekis.github.io/Empire-Frontiers/
Play locally
https://github.com/lsvekis/Empire-Frontiers
- Extract the ZIP file.
- Open
index.htmlin a modern web browser. - Choose a difficulty and select Begin Conquest.
No installation, web server, build tools, or external libraries are required.
Files
index.html— game interfacestyles.css— responsive visual designgame.js— map generation, economy, combat, units, AI, upgrades, and saved-game logic
Gameplay
Capture cities, expand territory, build mines, farms, and lumber camps, upgrade production, recruit armies, and conquer three computer-controlled empires. Game progress is saved locally in the browser.
