Final project in the Microverse JavaScript Curriculum
Implementation of a Turn-Based RPG Game built with the Phaser 3 framework
The main objective of this project was to build a platform game. The basics of the game are used from the GameDev Academy Tutorial. But, I had to create the overall design of the game, the different scenes, gameplay and scoring system.
The character that you will be interacting with, for most of the time, is the Prospector. He was assigned the task of leading two warriors through an enemy infected forest. The only way to get through the forest is to fight against the enemies that stand in the way (they are hidden, but you will know when you get close to them!).
The Prospector will lead the way and find where the enemies are. But, he is only there to lead the way. The two warriors will have to fight with the enemies so they can move on.
There are six types of enemies
- Four main types of enemies, the ones that you have to fight to get through the forest
- Skeletons
- Pirates
- Ninjas
- Monsters
- And, two secondary types that you fight if you enter into the deep parts of the forest (they are not mandatory for finishing the game)
- Bats
- Spiders
After defeating each of the main enemies the next ones get stronger and harder to defeat.
- The skeletons will give you 30 points
- The pirates 50 points
- The ninjas 70 points
- And, the monsters 150 points
If you pass through the forest and fight with only the main enemies you get out with a total score of 300. But, that score increases by 10 points for every secondary enemy group you fight with.
Prospector
To move around the map with the prospector you use the arrow keys on your keyboard. Each arrow key moves the Prospector in the respective direction. You will travel through the map, looking for the enemies. When you do come up to a pair of enemies, the screen will switch to the Battle Field.
And, that is when the two warriors come in to play.
Warriors
As explained before this is a turn-based game. That means, that when you get into a fight with an enemy group your two warriors are the first ones that attack. After both of them finish, the enemies have their turn at attacking your warriors. And, if after the first round both sides still have at least one living character you move on to the next round. It continues like that, until one side losses both of their characters.
Fighting
When you get switched to the Battle Field you will see your two warriors on the right side of the screen. And, the two enemies on the left side. At the bottom of the screen you will see two menus, with the names of the warriors and the enemies. You start of with the Warrior 1 chosen, to start you first click the Space button on your keyboard. With that you choose to attack one of the enemies. Then, you use your arrow keys to choose which enemy to attack. (The chosen name gets highlighted in yellow). And, again you click Space to attack the enemy. A message will show up on the screen to inform you of that.
When the battle finishes you get switched back to the forest, so the Prospector can lead the way again. Or, to the Game Over screen, depending on the outcome of the battle.
npm required - get npm
Clone the repository by running this command in your terminal
git clone https://github.com/evansinho/RPG-game.git
Navigate into the newly created folder
cd RPG-game
Install all of the dependencies
npm install
Bundle the files and start the development server
npm run start
Visit this link to see the game in your browser
http://localhost:8080/
Run Jest tests
npm test
All of the sprites, backgrounds, buttons and the background music can be found on OpenGameArt
Home Screen
Welcome Scene
Options Scene
Credits Scene
Leaderboard Scene
Play Scene
Battle Scene
Victory Scene
Game Over Scene
- JavaScript
- HTML/CSS
- Phaser 3
- Babel
- Webpack
- ESlint
- Jest
- Netlify
- Leaderboard API for tracking scores
👤 Evanson Igiri
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Microverse
- Phaser 3
- OpenGameArt
- GameDev Academy
- Webpack
- npm