JavaScript Capstone Project: Build an RPG game

AFRICAN JUNGLE

This is Microverse's final project for the Javascript section.

In this project I implemented an RPG game using Phaser 3, an open-source framework for Canvas and WebGL powered browser games.

Table of Contents

• About
• The game
  • How to play
  • Design
    • Player characters
    • Enemies
    • Scenes
• Technologies used
• Learning Objectives
  • Transversal
  • Soft skills
  • Technical
• Contact
• Acknowledgements

About

This project's objective was to build a platform game similar GameDev Academy.The main objective was to use the tutorial to point me in the right direction to build a platform game with different levels.

The link to the assignment can be found Here.

Link to a live-version.

Repository: https://github.com/WCanirinka/RPG-Game

The game

It is a turn-based game where you will have three characters, the game start with the first character (prospector) , you will be using him to find the enemies spolier alert!!! enemies are not visible use brute force to see them when you find the enemies you will have your two other characters Herus and ninja to help you fighting the enemies. select the character you want to use with keyboard arrows and attack the enemy with space. the game has three levels and as you progress you get stronger enemies and higher score.

0- 50 level 1

50- 200 level 2

200- ++ level 3

on the left, of the screen, you can see the LeaderBoard and when the game end if you broke your record, it will be automatically updated on the LeaderBoard

How to play

The player will have two turns before the enemies get their own. Use to select the character you want to use and the enemy you want to attack, and press to attack the selected enemy.

You can play the game online clicking here or locally following these steps:

clone the repo by typing

git clone https://github.com/WCanirinka/RPG-Game

navigate to the folder by typing

cd RPG-Game

get the Dependencies by typing

npm install

bundle the files and start the server by typing

npm start

You will have a live update of your score as you play. Enjoy the game

Design

The Game will start with your first character the prospector you will use him to find the hidden enemies when you find them you will be taken to the other screen which is the battle screen. when you are in the battle screen you will see your two heroes characters appear on the right and the enemies on the left of the screen, use the arrow keys on your keyboard to select your hero and press space to attack after you've attacked the enemies will automatically attack you, you can keep track of your remaining hp by looking at the health bar on the top left of your screen.if you won the battle you will be taken back to the main screen so that you can look for more enemies if you lost you will be taken to the game over screen.

players-characters

Prospector

use him to seek enemies in the forest

Ninja

he is your most important asset for making damage to the enemies he has 150 damage* and 80 Hp

Herus

You cant count on him bear attacks from the enemies he has 50 damage and 200 Hp

Enemies

wizarus 1

You will see him in level one(he can take different forms) he has 80 damage and 80 Hp

wizarus 2

You will see him in level 1 90 damage and 90 Hp

wizarus 3

You will see him in level 2 110 damage and 100 Hp

ghostus

The most powerful all the wizarus, he joins in level 3 120 damage and 150 Hp

Master

he is the most valuable enemy that needs to be defeated since he is very strong 150 damage and 200 Hp

Scenes

TItle scene

credit scene

option scene

world scene

battle scene

Technologies used

• JavaScript
• A bit of HTML and CSS for the front end
• Phaser 3
• Webpack
• Eslint
• Babel
• Jest in the tests
• Github
• Netlify for the deployment
• Leaderboard API service for the leaderboard

Learning Objectives

Transversal

• Use linters (code standards)
• Maintain professional Github repos
• Deploy apps (Heroku, Netlify)

Soft skills

• Strong English written communication
• Ability to communicate information effectively to non-technical people
• Ability to translate business requirements into software solutions
• Sets high standards of performance to oneself
• Shows a desire to take personal responsibility to complete tasks and solve problems
• Ability to multitask and effectively manage time and prioritization

Technical

• Create effective JavaScript code that solves the problem
• Encapsulate JS code in modules
• Use Webpack
• Use EcmaScript+
• Deal with async code
• Send and receive data from a back-end endpoint
• Use JSON format
• Use DOM (read/write data) listen to events
• Test JS code

Overall Grade

contact

👤 Wilfried Canirinka

• Github: [@WCanirinka]https://github.com/WCanirinka)
• Twitter: @WCanirinka

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!