Fire Emblem - Remake of a GBA Game

A love letter to Fire Emblem - Blazing Sword from Game Boy Advanced (GBA).  

It is built for the sake of re-creating a well-loved game.

A web-based version. This game is built entirely in JavaScript and Canvas.

A turn-based strategy role-playing game (TBSRPG). 

Controls:

• Left-click: Moves a player to a selected tile, confirms choices on menus and for initiating battle. After click Attack from menu, click on enemy to choose which enemy to attack.
• Right-click: Clicking an empty tile will bring up the End Turn menu.
• Shift while cursor is over a unit: Will bring up the unit summary screen. Pressing up/down during this screen will cycle through all the units on the map.
• Enter: Will bring up the battle summary screen, showing total gold, main character, and battle objective for the map.
• Escape: Will clear any and all menus, and undo actions taken (resetting selected movement tile, for example).

Gameplay Flow

Gameplay progresses exactly the same way it does in Fire Emblem.

1. Opening chapter cutscene.
2. Begin the map, in which the player must complete an objective in order to progress to the next chapter.
3. Use your units to defeat the enemy army. You can only move each unit once per turn. If the main character (Jaffar) dies, you will get a Game Over.
4. Player units that die will be gone forever, so move them wisely!
5. After attacking, a unit's turn will be used up.

Gameplay Mechanics

During battle, there are a handful of things that the player can do to aid them in battle. These include:

1. Using the terrain to their advantage. Certain terrains provide bonuses to DEF and AVOID.
2. Player units can trade between each other.
3. A player which can equip a staff can heal an adjacent unit.
4. A player can equip weapons / use consumable items.
5. A player can move by clicking a tile on the map.
6. A player can move towards an enemy, and initiate combat.
7. A player can enter a shop and purchase/sell items.
8. Jaffar, the main character can move onto the boss tile and Seize it, based on the battle objective.

Tips and tricks for newcomers and veterans alike:

There are numerous ways to take turn the tides of battle in your favor. These include:

1. Being careful of rushing too far ahead. Some enemies move once you get into close proximity, while others will move on certain turns. Try to find a right balance of pushing forward, while being reserved.
2. Use terrain to your advantage and reap the bonuses.
3. Pay attention to the weapons wielded by your opponent. Swords beat Axes, Axes beat Lances, and Lances beat Swords. Units at an advantage will gain increased ATTACK and HIT RATE, and units at a disadvantage will lose ATTACK and HIT RATE.

Game Features: Terrain

Throughout the game, there are various terrain tiles which the player can step on. By staying on these tiles, the player can get various additions to their DEF and AVOID. The terrain modal shown below will display the bonuses awarded for the tile that the cursor is hovering over. Use these terrains to your advantage in battle!

Trading

In order to trade, move a friendly unit next to another friendly unit, then select Trade. Both units inventories will be displayed. In order to trade:

• Click one item on both units' inventory, and the items will be swapped.
• You may trade repeatedly in a single turn, or with other units. Trading does not end your turn.

Healing

Currently, the only playable unit that can heal is Nino. You may equip a Heal staff, then move next to an adjacent player unit that has taken damage, and replenish some HP.

NOTE: You may not fight with a staff equipped, it will leave you defenseless. Equip staffs wisely.

Using items

Items such as Energy Drop, Angelic Robe, Vulnerary and Elixir are consumable items which have the following effects:

1. Energy Drop: Permanently increases unit's strength by 2.
2. Angelic Robe: Permanently increases unit's max health by 7.
3. Vulnerary: Recovers 10 HP.
4. Elixir: Recovers 20 HP.

Equipping items works the same way.

Movement

Left-click a highlighted tile to move onto. The following tiles are not suitable targets*

1. You cannot move onto a tile occupied by a unit (both enemy/player).
2. You cannot move onto certain tiles (water, cliffs, mountains).
3. You cannot move onto any tile on the edge of the map.

If at any time you select a tile you do not wish to move to, press ESCAPE to undo and re-select a tile.

Combat

A player can enter combat by moving adjacent to an enemy unit and selecting ATTACK from the menu. Once this selection has occurred, the player unit initiating the attack must then left-click an enemy to enter combat against them (in the case that there are multiple targets surrounding the player unit).

Before entering combat, you can see the summary of the battle. This includes:

1. How much HP both units have.
2. Equipped weapons of both units.
3. How much damage each unit can do to each other.
4. Hit rate of both units.

During battle, if the enemy or player has a significantly higher attack speed (AS) than the other unit, then they will attack twice during combat.

Shopping

Stepping onto a shop tile (shown below) will allow the player to enter the shop, in which they can purchase or sell items.

Source Code & Project Files:

Fire Emblem games in general can be broken down into several major components. Of these components, the list below shows the current systems that have been implemented.

• Core battle system
  • Battle grid system
    • Multiple controllable player units
    • Unit pathfinding using A* search algorithm
    • Enemy AI algorithm to determine best unit to attack
    • Mouse "point-and-click" for unit movement
    • Non-collision nearby unit detection
    • Attackable enemy units
    • Healable player units
    • Terrain system
    • Camera system to focus on active unit
  • Battle animation system
  • Melee and ranged battle animations
  • Animation queue for initial, counter, and second attacks
  • Animation handling for normal, magic, and critical attacks
• Map objectives
• Map scripts
• Cutscene system and dialogs
• Character development system
  • Level and experience system
  • Base stats
  • Derived stats
  • Stat growth system
• Items
  • Unit inventory system
    • Weapon durability
    • Consumable items
    • Item quantity and usage
    • Enemy item drops
  • Unit equipment system
    • Melee, ranged, and magic weapons
    • Weapon stats system
  • Trade system
  • Shop system
• Graphical user interface (along with all their corresponding functionalities)
  • Mouse-driven menu interaction
  • Battle animation screen
  • Attack/Heal interface
  • Battle quick-summary
  • Unit stats screen
  • Inventory menu
  • Trade menu
  • Shop screen
  • Dialog screen
  • Game settings configuration screen

Test the source code:

Refer to this tutorial for how to test the game code with the local server.

(

(Quick and easy local server setup using Visual Studio Code and the free Live Server extension.)

Disclaimer: 

This game and source code are purely for education purposes. As such, this is a non-profit project, and is not meant for wide distribution. All included graphics are copyright of Nintendo and Intelligent Systems (except for the custom title screen art and game music). These copyrighted resources include: all animation sprites, map sprites, map tiles, character images and names, weapons/items along with their corresponding animations, all graphical user interfaces (stats screen, character modals, battle animation interfaces), as well as the gameplay concepts. These resources are solely used for the sake of a realistic remake of a well-known game.